apply = { const featureGroup = L.featureGroup().addTo(map); const nodes = fd_grp_review_filtered.map(d => createNode(map.latLngToLayerPoint([d.latitude, d.longitude]), d.review_count, d.stars, d.name)); // init the cluster ! const cluster = mc .cluster() .nodes(nodes) .on("tick", ticked); // bind to zoom events map.on('zoomend', zoomend); // map.on('move', zoomend); // on d3-marker-cluster update function ticked() { const current = this.nodes(); const filtered = current.filter(d => d.r != 0); // filter out dead nodes //https://bl.ocks.org/Andrew-Reid/21ff4b57267fa91dacc57ef1ccb7afb3 // heuristic ? if (filtered.length !== current.length) { this.nodes(filtered); // faster iterations featureGroup.clearLayers(); // remove old layers mutable max_area = 0; mutable radii = []; let circleMarkers = []; filtered.forEach(function(c){ const mark = createMarker(map.layerPointToLatLng([c.x, c.y]), c); mark.addTo(featureGroup); circleMarkers.push(mark); mutable max_area = Math.max(mutable max_area, c.a); const area = radius_selector.match('Restaurants') ? c.a/30 : c.a*4; if(map.getZoom() < 8 && circleMarkers.length<15){ if(radius_selector.match('Restaurants') && area > 50){ var myIcon = L.divIcon({ className: 'my-div-icon', html: ` ${String(area)} `, iconAnchor: [12, 7] }); L.marker(map.layerPointToLatLng([c.x, c.y-c.r]), { icon: myIcon }).addTo(featureGroup); } else if (area>1000){ var myIcon = L.divIcon({ className: 'my-div-icon', html: ` ${String(area)} `, iconAnchor: [20, 7] }); L.marker(map.layerPointToLatLng([c.x, c.y-c.r]), { icon: myIcon }).addTo(featureGroup); } } }); const markersInBound = filterByBound(circleMarkers); const radiiArr = [...new Set(markersInBound.map(m => m.getRadius()))]; const radii = generateGrades(d3.min(radiiArr), d3.max(radiiArr)); mutable radii = radii.map(r => Number(r)); } legend.addTo(map); } // when we zoom function zoomend() { cluster.stop(); // stop the cluster featureGroup.clearLayers(); // remove old layers // recompute the position of the nodes depending on actual zoom const data = cluster .nodes( fd_grp_review_filtered.map(d => createNode(map.latLngToLayerPoint([d.latitude, d.longitude]), d.review_count, d.stars, d.name)) ) .alpha(1); // update the data cluster.restart(); // start the clusterer } // when we throw the cell away invalidation.then(() => { cluster.stop(); // stop the cluster :) map.off('zoomend', zoomend); // unbind events featureGroup.remove(); // remove the displayed markers }); return md`~~~observable "Important" // this cell adds markers to cluster and cluster to map ~~~`; }