[Map] Layer support for clustering markers #3032
Description
Hi,
At the moment some issues occur when implementing https://github.com/Leaflet/Leaflet.markercluster with the leaflet bridge.
After updating the markers on the map, there is a duplicate set of markers. This seems to occur because of markers being created on different layers. At the moment, the only possible way to add a leaflet layer with clustered markers is via javascript.
This feels like unnecessary iterations over every marker in your stimulus controller.
Right now, I am using the following snippet to ensure the markers are added to the clusterMarkerLayer. Adding support for Leaflet & Google Layers would resolve this issue.
Would an implementation of a Layers object within the Map object or a reference in the Marker object suffice?
This could be combined with changing the doCreateMarker in map_controller.js to add a marker to a configured layer or as a layer to the map.
I already asked this question on [Map] Add Clustering Algorithms but did not receive an answer and would like to hear your opinion on the matter.
import { Controller } from "@hotwired/stimulus";
import 'leaflet.markercluster/dist/MarkerCluster.css';
import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
/* stimulusFetch: 'lazy' */
export default class extends Controller {
connect() {
this.element.addEventListener('ux:map:connect', this._onConnect);
}
disconnect() {
this.element.removeEventListener('ux:map:connect', this._onConnect);
}
async _onConnect(event) {
await import("leaflet.markercluster/dist/leaflet.markercluster-src.js");
const { map } = event.detail;
var clusterMarkerLayer = L.markerClusterGroup({
maxClusterRadius: 60,
spiderfyOnMaxZoom: true,
showCoverageOnHover: false,
zoomToBoundsOnClick: true
});
map.eachLayer(layer => {
if (!(layer instanceof L.Marker)) {
return;
}
clusterMarkerLayer.addLayer(layer);
map.removeLayer(layer);
})
map.addLayer(clusterMarkerLayer);
}
}