Using openPopup() with Leaflet.js + Clustering

Question

I've been using the fantastic OpenStreetMap mapping library leaflet.js for a while now, and I've just started implementing this clustering plugin. I've got it working fine with a current project, which loads different layers onto the map and into a clickable sidebar.

The only problem is that if I click on a sidebar item and the corresponding marker is in a clustering object, I get an error. I've got around this by checking for an error (using try/catch) and zooming so the layer is visible as below:

$('.item').click(function() {
    currentlayer = this.id;
...
        try {
            geojson._layers[currentlayer].openPopup();
        } catch(e) {
            map.setView(geojson._layers[currentlayer]._latlng, 16); 
            geojson._layers[currentlayer].openPopup();
        }                   
...
    return false;
});

The only problem is that I get the same error when trying to run the openPopup() method after zooming, although, if I click on the sidebar again, the popup shows fine. You can see it in action here:

http://www2.lichfielddc.gov.uk/myarea/map2.php

Any ideas?

Answer 1

Yeah, I had the same problem with that plugin. So I've developed my own, which should position the popups correctly. I'm also building in some events, so you can run some code when a cluster is clicked, or prevent the zoom level from changing.

https://github.com/cavis/leafpile

Also, I'm working on a similar project to yours - https://github.com/cavis/slidemapper. It's a jquery plugin to create a slideshow that follows along on a map. I'm working on integrating my leafpile plugin directly into it.

Answer 2

Maybe you had to zoom to the cluster layer using zoomToShowLayer :

https://github.com/Leaflet/Leaflet.markercluster/issues/75