CODEWITHSUNDEEP
javascriptgoogle-mapsleafletmapbox
Mihir Patel
Mihir Patel

Reputation: 2372

Mapbox no zoom for cluster based at exact same location

How do I set view so there is no zoom for cluster based at the same exact same location? I have to click on cluster twice to zoom in only to find out there are multiple data points for the same exact location on the map. See the images below.

enter image description here

enter image description here

CODE for Cluster:

var markerClusterLayer = new L.MarkerClusterGroup({
            maxClusterRadius: 25, 
            disableClustringAtZoom: 18, 
            spiderfyDistanceMultiplier: 3,
            zoomToBoundsOnClick: true,
            showCoverageOnHover: false, 
            iconCreateFunction: function (cluster) {
                    var childCount = cluster.getChildCount();

                    var c = ' custom-marker-cluster-';
                    if (childCount < 10) {
                    c += 'small';
                    } else if (childCount < 30) {
                    c += 'medium';
                    } else {
                    c += 'large';
                    }

                    return new L.DivIcon({ 
                        html: '<div><span>' + childCount + '</span></div>', 
                        className: 'marker-cluster' + c, 
                        iconSize: new L.Point(40, 40) });
            }
        });

Upvotes: 0

Views: 613

Answers (1)

ghybs
ghybs

Reputation: 53185

This is a pitfall of the current official version of the MarkerCluster plugin.

There is a new code that corrects this counter-intuitive behaviour, but it is not yet included in the released version unfortunately. With the new code, the cluster "spiderfies" right away without zooming, if even at the maximum map zoom you would still get the same cluster (which means your markers are still too close, not necessarily at the exact same coordinates).

I will try to find a way to "patch" your script so that can include this new code without having to wait for the new release of the plugin.

EDIT

You should be good by copy-pasting the following code in your script:

L.MarkerClusterGroup.include({
    _zoomOrSpiderfy: function (e) {
        var map = this._map;
        // The following first condition is the part that is missing in the
        // current plugin release, and which triggers a spiderfy if all
        // contained markers are still clustered at maximum zoom.
        if (e.layer._bounds._northEast.equals(e.layer._bounds._southWest)) {
            if (this.options.spiderfyOnMaxZoom) {
                e.layer.spiderfy();
            }
        } else if (map.getMaxZoom() === map.getZoom()) {
            if (this.options.spiderfyOnMaxZoom) {
                e.layer.spiderfy();
            }
        } else if (this.options.zoomToBoundsOnClick) {
            e.layer.zoomToBounds();
        }

        // Focus the map again for keyboard users.
        if (e.originalEvent && e.originalEvent.keyCode === 13) {
            map._container.focus();
        }
    }
});

Let me know if that does not resolve your issue, or if that is not what you were looking for.

Upvotes: 2

Related Questions