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.
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.