CODEWITHSUNDEEP
javascriptleafletmapboxmarkerclusterer
neelshiv
neelshiv

Reputation: 6375

Open leaflet marker using url parameter not working now that markercluster is used

I have a leaflet application at http://atlantaartmap.com. The javascript it uses is http://atlantaartmap.com/lazy_art.js.

At line 16, I grab a url parameter that can be used to open the map on a specific piece. While creating the markers, there is a piece of code at line 71 that checks to see if the most recently created marker has the ID referred to in the URL.

This code used to work, but I recently added marker clusters to the website and it no longer does. It still pans and zooms to the marker, but the popup does not open. Here is an example.

http://atlantaartmap.com/index.html?piece=40

if (marker.feature.properties.pieceID == pieceID) {
    map.setView(marker.getLatLng(), newZoom());
    marker.openPopup();
}

I'm not sure why, but map.setView() works and marker.openPopup() doesn't.

Any ideas? Thanks in advance.

Upvotes: 0

Views: 932

Answers (1)

iH8
iH8

Reputation: 28628

My guess (am unable to test this) is that your map is still zooming while you call openPopup on the marker. At that time the marker isn't added to the map yet because of your cluster so the popup won't show. You could try to wait untill the setView method has completed by listening to the zoomend event and then open the popup:

if (marker.feature.properties.pieceID == pieceID) {
    map.setView(marker.getLatLng(), newZoom()).once('zoomend', function () {
        marker.openPopup();
    });
}

If that won't work you can try to use a little delay with setTimeout:

if (marker.feature.properties.pieceID == pieceID) {
    map.setView(marker.getLatLng(), newZoom()).once('zoomend', function () {
        setTimeout(function () {
            marker.openPopup();
        }, 500); // Uses millisecs, you might need to fiddle around with it
    });
}

Another option could be to wait for the marker's add event:

if (marker.feature.properties.pieceID == pieceID) {
    marker.once('add', function () {
        marker.openPopup();
    });
    map.setView(marker.getLatLng(), newZoom());
}

Hope that helps, as said am unable to test this due to the complexity of your case so i'm not sure. Good luck!

Upvotes: 2

Related Questions