CODEWITHSUNDEEP
javascriptcluster-computingleafletmarker
eric.frigot
eric.frigot

Reputation: 90

Limit Zoom level when markers are on the same position

Using Leaflet 0.7.3 and last version of markercluster (https://github.com/Leaflet/Leaflet.markercluster), I would like to reproduce a behavior I have been able to do using Google API and associated libraries (Google Marker Cluster V3 & Overlapping Marker Spiderfier V3).

When you have a map with your clusters and you click on one cluster, the API will zoom to bound the markers contained in this cluster. But when all your markers are exactly on the same position, the zoom will be set to its maximum value which is often ugly (no context around the markers or just one street). I would like to limit the zoom level when user click on one cluster with a code like this :

        markers.on('clusterclick', function (a) {
            map.fitBounds(a.layer.getBounds());
            if (map.getZoom() > 14) {
                map.setZoom(14);
            }
        });

With such code the zoom is correctly limited to 14 but the spiderfy is not done (even if I explicitly call a.layer.spiderfy(). Is there something I am missing ?

Here is the fiddle : http://jsfiddle.net/953u41ax/ (click for exemple on 36 then on 12)

Upvotes: 0

Views: 2809

Answers (2)

Desmond
Desmond

Reputation: 361

Eric, you can achieve this by preventing zoom on click and then manually calling spiderfy on the layer.

Map Settings: 

        var stationsCluster = new L.MarkerClusterGroup({
          maxClusterRadius: 60,
          iconCreateFunction: null,
          spiderfyOnMaxZoom: true,
          showCoverageOnHover: true,
          zoomToBoundsOnClick: false

Spidery Listener: 

    stationsCluster.on('clusterclick', function (a) {
        a.layer.spiderfy();
    });

Upvotes: 1

Marko Letic
Marko Letic

Reputation: 2550

You can set the maximum zoom level on the map:

map._layersMaxZoom=8

and then disable the clustering at the same zoom level:

var markers = L.markerClusterGroup({
        disableClusteringAtZoom: 8
    });

You can play around with this to get the desired effect, this is just an example. JSFiddle is here http://jsfiddle.net/953u41ax/2/

Upvotes: 0

Related Questions