Leaflet Js: openPopup won't show

1
votes

i've been reading around for a while and still haven't found a solution to my issue.

I have a GeoJson that I load in a map. I use markers clusters to group all the features. I bind popups to those markers and that works fine: popups show on click, no problem.

I build a custom control area in which I have two inputs, to filter my geojson data regarding their price (min and max); then I load a result list below that works fine also, and when I mouseover a marker, iIcan highlight the result-list's item.

My problem: I want to open the marker's popup in the map when I click on the result-list's item that correspond to it. But the popup doesn't show. Map paning seems ok, as the map is re-centering toward the marker. Even the popup data are loaded (which I can see with a console.log(layer.getPopup())). But still no popup popping.

Here is a jsfiddle http://jsfiddle.net/n3pkzcm7/4/.

The openPopup() call is at line 88 in _getHtmlList function.

tr.onclick = function() {
    console.log(layer.getPopup());
    layer.openPopup();
};

I'll add that if i bind a popupopen event to the map itself like:

map.on('popupopen', function(){
    console.log('open!!');
});

the event is fired, whether i click on a marker or on the sidebar's result list item.

2
javascriptleafletopenstreetmapgeojsonmarkerclusterer
If you ask me, this looks like a bug in Leaflet or (more likely) in the leaflet.markercluster plugin. Have you tried it without clustering? – tyr
Yes i tried it, as i was suspecting also a problem with the markercluster plugin. The problem is the same, even when i remove the clusters. github.com/Leaflet/Leaflet.markercluster/issues/567 – xefiji

2 Answers

2
votes

You have to use leaflet's disableClickPropagation method on your custom leaflet-control-box. Because otherwise mouse event propagate through to the leafet map below it which causes popups to be closed immediately after they have been opened.

Here's a working fiddle: http://jsfiddle.net/vh6do4tm/3/

But note that your solution still doesn't work very well together with the markercluster plugin as currently clustered markers (and markers which are outside the current viewport) don't open the popup: http://jsfiddle.net/vh6do4tm/2/. You would have to work around that in a different way.

0
votes

I had this happen in a similar but different situation (I wanted a click on one element to open another element's popup). The above answer was very helpful in leading me on the right track, but disableClickPropagation wasn't available in the situation.

However, the underlying JavaScript call, event.stopPropagation(), was. So I was able to do something like:

<... onclick="event.stopPropagation(); places.getLayer(1569).openPopup();">

(in which places is a geoJSON layer)

And it worked great.