map10.js

function initmap() {
updateClusters(false);
select_el.addEventListener('change', function(e) {
 // Update selected aggregation on dropdown
 select_value = select_el.value
 updateClusters(true);
 })
map.addSource("locais-2018-mp-clean", {
 type: "geojson",
 data: clusterData,
 buffer: 1,
 maxzoom: 14
 });
map.addLayer({
 id: "clusters",
 type: "circle",
 source: "locais-2018-mp-clean",
 filter: ["has", "point_count"],
 paint: {
 "circle-color": {
 property: select_value,
 stops: colorStops
 },
 "circle-blur": 0.50,
 "circle-radius": {
 property: select_value,
 type: "interval",
 stops: radiusStops
 }
 }
 }, "road-label");
map.addLayer({
 id: "unclustered-point",
 type: "circle",
 source: "locais-2018-mp-clean",
 filter: ["!has", "point_count"],
 paint: {
 "circle-color": {
 property: propertyToAggregate,
 stops: colorStops
 },
 "circle-radius": 2,
 "circle-stroke-width": 2,
 "circle-stroke-color": "#fff"
 }
 }, "road-label");
map.addLayer({
 id: "cluster-count",
 type: "symbol",
 source: "locais-2018-mp-clean",
 filter: ["has", "point_count"],
 layout: {
 "text-field": "{" + select_value + "}",
 "text-font": ["DIN Offc Pro Medium", "Roboto Black"],
 "text-size": 13
 
 },
 paint: {
 "text-halo-color": "black",
 "text-halo-width": 1.5,
 "text-color":"white"
 }
});
map.on('zoom', function() {
 newZoom = map.getZoom();
if (Math.floor(currentZoom) == 0) {
 currentZoom = 1
 };
if (Math.floor(newZoom) != Math.floor(currentZoom)) {
 currentZoom = newZoom
 updateClusters(true);
 map.getSource('locais-2018-mp-clean').setData(clusterData)
 }
 })
 };