Leaflet.markercluster integration

[neillsanders]

Hi! Has anyone had any success integrating Leaflet.markercluster and if so could you please share how you did so, or give some pointers? I've read all of the documentation and am completely stuck! Thank you!

[bozdoz]

As a note, should be achievable with the FAQ: How can I add another Leaflet Plugin (https://github.com/bozdoz/wp-plugin-leaflet-map#how-can-i-add-another-leaflet-plugin). I think marker cluster was used before maybe a few years back. Might have some examples in the WP Forum

[neillsanders]

Thank you Ben for your reply (and for the fantastic plugin!) I've followed the FAQ and have enqueued my scripts, I'm just not sure where to go from there. How might I get the markers that are already being loaded onto the map via JSON to be added to an L.markerClusterGroup() layer instead? I've searched for examples and google has not been kind to me!!! Help much appreciated!

[bozdoz]

Looks like someone accomplished it here: https://wordpress.org/support/topic/markercluster/

[gmbo]

I have never made any progress with this either. I would find it super if that would work just with the integration of KML, GPX, or Json files, because you can include many POIs.
Because the map is without the cluster markers quickly confusing.
If the combination would be possible that would be great.

Thanks for the tip, I'll see if I can find something there.

[neillsanders]

Thank you gmbo for your reply! If I find the solution I'll be sure to post here (if you would be so kind to do so in return!) Thanks!

[neillsanders]

Hi gmbo I have found a way to easily add markercluster to the Leaflet Map plugin! See the discussion thread!

[neillsanders]

After much toil I'm pleased to say that I have finally got this working using the method outlined by Ben in his FAQ "How can I add another Leaflet Plugin" and the following javascript. Hope it comes in handy and thank you once again Ben for your great plugin.

(function () {
    function main() {
        if (!window.WPLeafletMapPlugin) { console.log('no plugin found!'); return; }
        var geojsons = window.WPLeafletMapPlugin.geojsons;
        for (var i = 0, len = geojsons.length; i < len; i++) {
            var geojson = geojsons[i];
            geojson.addEventListener('ready', function (e) {
                var cluster = L.markerClusterGroup();
                cluster.addLayer(e.sourceTarget.layer);
                e.sourceTarget.map.addLayer(cluster).removeLayer(e.sourceTarget.layer);
            });
        }
    }
    window.addEventListener('load', main);
})();

[bozdoz]

Ah, I think I understand the difficulty now. You wanted to add markers from a geojson to a markercluster! Not just adding markers to a marker cluster. Makes sense. Markers in geojson are more difficult to work with. There are a few outstanding issues related to them. Glad you got it resolved, and participated in the first github discussion on this project!