Cant open popup programmatically

leaflet, mapbox

Solution

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.

Problem

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'); }; ```

Original source