Cant open popup programmatically

Question

I have a map on which im loading the markers with geoJSON.

When the map loads i run a function buildVisibleSys which is responsible to build a list of currently visible systems on the map.

That function looks like this:

buildVisibleSys = function() {
  var bounds, visibleSys;
  visibleSys = [];
  bounds = map.getBounds();
  return systemLocations.eachLayer(function(marker) {
    var link;
    link = onScreenEl.appendChild(document.createElement('a'));
    link.href = '#';
    link.id = "marker" + marker._leaflet_id;
    link.innerHTML = marker.options.title;
    link.onclick = function() {
      marker.openPopup();
      map.panTo(marker.getLatLng());
    };
  });
};
map.on('load', buildVisibleSys);

In this function, for each layer im getting some data and building a html block with the names of each marker. Each of those names, associated to the link var, have a onclick event attached that will center the map on the correspondent marker. This all works except for the marker.openPopup() call i also have on that onclick event.

Any idea of what am I missing here?

I've also made a demo of the code available here: http://jsfiddle.net/lmartins/z8wBW/

UPDATE: Even more confusing to me is that with mouseover the same method works without a problem, that is, in the function above the following code do open the popup:

   link.onmouseover = function(ev) {
      marker.openPopup();
      marker._icon.classList.add('is-active');
    };

tmcw tmcw · Accepted Answer · 2014-06-09T04:10:07

Change your link handler to

link.onclick = function(e) {
  marker.openPopup();
  map.panTo(marker.getLatLng());
  e.stopPropagation();
  e.preventDefault();
};

The click of the link to open the popup is bubbling down to the map and closing the popup right after it's opened.

Cant open popup programmatically

1 Answers