[Map] Layer support for clustering markers

[mart-insiders]

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);
    }
}

[smnandre]

Story is I had very little free time these last ~~days~~ ~~weeks~~ months to work on Symfony UX... so I have plenty of things I had to let in suspend.

The idea I had was to improve the LiveComponent helper to offer out-of-the-box clustering features for everyone. And then to work on custom code / script.

[smnandre]

[!TIP]
Side note regarding time

Despite what some may think, Hugo (@Kocal) and I (@smnandre) work on Symfony UX entirely in our personal time, with no compensation whatsoever.

If Symfony UX is part of your project toolbox, you may want to support Symfony by sponsoring events or releases (more info n this page). You can also support one of us directly: it gives us precious time to keep maintaining, improving, and adding new features... and it truly makes a difference.

[Tastaturberuf]

This library is a side project?

[mart-insiders]

Hi @smnandre ,

I respect the effort and time you and Hugo dedicate to Symfony UX. My original question was more about understanding the roadmap or vision for LiveComponent, and I was just curious about your next steps and ideas. I will see if I can try to experiment with a solution on my side in the meantime. 👍