getBounds()/fitBounds() + lots of markers = renders the map grey/unusable

Hello,

Intro

First thank you for the awesome plugin, we use it at quite some projects over here. 😃

At one of our projects we make use of the marker cluster plugin (the markercluster plugin is not the problem, read below):

marker[markersData[i][0]] = L.marker([_lat, _lng], {icon: icon});
markers.addLayer(marker[markersData[i][0]]);

Then we use:

var bounds = markers.getBounds(); // [1]
map.fitBounds(bounds); // [2]
map.addLayer(markers);

Problem

Okay this usually works perfectly fine until we have a case where we want to spawn lots of markers (2000-5000 markers). For some reason, doing this renders a grey map and it’s unusable. The map works just fine with less than 500 markers.

By unusable I mean the following: the map can’t be dragged with the mouse, nor scroll-zoomed, the zoom buttons don’t work, etc… I do can see the markers, but neither the popups open or anything.

With the .fitBounds() [2] code in (from the above code), the map gets rendered like this:

What we’ve tried

If I remove [2] (from the above code) the maps renders OK (but highly unzoomed which is what we don’t want).

The .getBounds() function returns coherent data:

o.LatLngBounds
    _northEast: o.LatLng
        lat: 42.0468718
        lng: 2.7438793000000032
    _southWest: o.LatLng
        lat: 41.219172
        lng: 1.6023217

We know the problem doesn’t come from the markercluster because we’ve tried removing it and the same issue happens.

So we’re out of ideas how we might fix this by ourselves. We hope you can help us 😃.

Thanks in advance!

[mrAceT]

A bit of and old issue, but I had strange grouping problems with just a dozen markers. Without the call to fitBounds everything worked fine. But the fitBounds call really messed things up.

After a lot of searching without any really good solution I had a great idea (if I may say so 😉: First initialize the map with zoomlevel 1 (or 2) (zooming out as far as you can) Then you have all your markers bundled in just one group, then in stead of calling the fitBounds function, you do: $(‘#’+container.id+’ .marker-cluster’).first().click();

Et voila ! You use the “bult in fitBounds” of the markerCluster plugin!

PS: assuming you you are using jquery

[badreal]

adding a timeout before calling fitbounds might be a solution , it was in my case.