ramiroaznar/app.js

## app.js
const map = L.map('map').setView([30, 0], 3);

// add basemap
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);

// add CARTO client
const client = new carto.Client({
apiKey: 'default_public',
username: 'ramirocartodb'
});

// add layer
const source = new carto.source.Dataset(`populated_places`);
const style = new carto.style.CartoCSS(`
    #layer {
        marker-width: 7;
        marker-fill: #EE4D5A;
        marker-line-color: #FFFFFF;
    }
`);
const layer = new carto.layer.Layer(source, style);

client.addLayer(layer);
client.getLeafletLayer().addTo(map);

// add category dataview
const categoryDataview = new carto.dataview.Category(source, 'featurecla', {
    limit: 5,
    operation: carto.operation.COUNT
});

categoryDataview.on('dataChanged', data => {
    console.log(data.categories);
    categories = data.categories;
    addCategories(categories, $categories);
});

categoryDataview.on('error', error => {
    alert(error.message);
});

client.addDataview(categoryDataview);

// add bbox filter
const bboxFilter = new carto.filter.BoundingBoxLeaflet(map);
categoryDataview.addFilter(bboxFilter);

// add categories
const $categories = $('.categories');
console.log($categories);

function addCategories(arrCats, container){
    container.empty();

    arrCats.forEach(function(cat) {
        console.log(cat);
        container.append(`<li style="width:24px; color:#EE4D5A"></div> <p>${cat.name}</p>`);
    });
}

// add autostyle
const droplet = $('droplet');
const boldScheme = ['#7F3C8D','#11A579','#3969AC','#F2B701','#E73F74'];

function autostyle(colors){
    let elements = $('li')
    for(var i = 0; i < colors.length; i++){
        console.log(elements[i]);
        console.log(colors[i]);
        elements[i].style.color = `${colors[i]}`;
    }

    let cartoCSS = layer.getStyle();
    cartoCSS.setContent(`
        #layer {
            marker-width: 7;
            marker-fill: ramp([featurecla], (${colors}), category(5));
            marker-line-color: #FFFFFF;
        }`);
}

droplet.on('click', function(){
    autostyle(boldScheme);
});


## droplet.png

      
    Raw
  

              droplet.png
            
          
## index.html
      <!DOCTYPE html>
<html>
  <head>
    <title>Autostyle with dataviews | CARTO.s v4.1</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <!-- Include jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Include Leaflet -->
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet">
    <!-- Include CARTO.js -->
    <script src="https://libs.cartocdn.com/carto.js/v4.1.0/carto.min.js"></script>
    <link href="https://carto.com/developers/carto-js/examples/maps/public/style.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div id="map"></div>

    <aside class="toolbox">
        <div class="box">
        <droplet></droplet>
          <header>
            <h1>Type of cities</h1>
            <button class="github-logo js-source-link"></button>
          </header>
          <section>
              <ul class="categories">
              </ul>
          </section>
          <footer class="js-footer"></footer>
        </div>
      </aside>

    <script type="text/javascript" src="app.js"></script>
  </body>
</html>


## style.css
button{
    display: none;
}
droplet{
    background-image: url('droplet.png');
    z-index: 999;
    position: absolute;
    top: 20px;
    right: 16px;
    width: 24px;
    height: 24px;
}
droplet:hover{
    cursor: pointer;
}
li{
    color:#EE4D5A;
}
	const map = L.map('map').setView([30, 0], 3);

	// add basemap
	L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
	maxZoom: 18
	}).addTo(map);

	// add CARTO client
	const client = new carto.Client({
	apiKey: 'default_public',
	username: 'ramirocartodb'
	});

	// add layer
	const source = new carto.source.Dataset(`populated_places`);
	const style = new carto.style.CartoCSS(`
	#layer {
	marker-width: 7;
	marker-fill: #EE4D5A;
	marker-line-color: #FFFFFF;
	}
	`);
	const layer = new carto.layer.Layer(source, style);

	client.addLayer(layer);
	client.getLeafletLayer().addTo(map);

	// add category dataview
	const categoryDataview = new carto.dataview.Category(source, 'featurecla', {
	limit: 5,
	operation: carto.operation.COUNT
	});

	categoryDataview.on('dataChanged', data => {
	console.log(data.categories);
	categories = data.categories;
	addCategories(categories, $categories);
	});

	categoryDataview.on('error', error => {
	alert(error.message);
	});

	client.addDataview(categoryDataview);

	// add bbox filter
	const bboxFilter = new carto.filter.BoundingBoxLeaflet(map);
	categoryDataview.addFilter(bboxFilter);

	// add categories
	const $categories = $('.categories');
	console.log($categories);

	function addCategories(arrCats, container){
	container.empty();

	arrCats.forEach(function(cat) {
	console.log(cat);
	container.append(`<li style="width:24px; color:#EE4D5A"></div> <p>${cat.name}</p>`);
	});
	}

	// add autostyle
	const droplet = $('droplet');
	const boldScheme = ['#7F3C8D','#11A579','#3969AC','#F2B701','#E73F74'];

	function autostyle(colors){
	let elements = $('li')
	for(var i = 0; i < colors.length; i++){
	console.log(elements[i]);
	console.log(colors[i]);
	elements[i].style.color = `${colors[i]}`;
	}

	let cartoCSS = layer.getStyle();
	cartoCSS.setContent(`
	#layer {
	marker-width: 7;
	marker-fill: ramp([featurecla], (${colors}), category(5));
	marker-line-color: #FFFFFF;
	}`);
	}

	droplet.on('click', function(){
	autostyle(boldScheme);
	});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Autostyle with dataviews \| CARTO.s v4.1</title>
	<meta name="viewport" content="initial-scale=1.0">
	<meta charset="utf-8">
	<!-- Include jQuery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<!-- Include Leaflet -->
	<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
	<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet">
	<!-- Include CARTO.js -->
	<script src="https://libs.cartocdn.com/carto.js/v4.1.0/carto.min.js"></script>
	<link href="https://carto.com/developers/carto-js/examples/maps/public/style.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
	</head>
	<body>
	<div id="map"></div>

	<aside class="toolbox">
	<div class="box">
	<droplet></droplet>
	<header>
	<h1>Type of cities</h1>
	<button class="github-logo js-source-link"></button>
	</header>
	<section>
	<ul class="categories">
	</ul>
	</section>
	<footer class="js-footer"></footer>
	</div>
	</aside>

	<script type="text/javascript" src="app.js"></script>
	</body>
	</html>
	button{
	display: none;
	}
	droplet{
	background-image: url('droplet.png');
	z-index: 999;
	position: absolute;
	top: 20px;
	right: 16px;
	width: 24px;
	height: 24px;
	}
	droplet:hover{
	cursor: pointer;
	}
	li{
	color:#EE4D5A;
	}