Leaflet JS - open popup on button click

Question

New to JavaScript, coming from Python background. Created a custom control and have added buttons inside the _div using a for loop and innerHTML.

I want to zoom to and open the popup of a layer of the specific button I click. When I click on the button the function zooms to the marker, but does not open the popup.

The popup is definitely attached, since when I click on the marker the popup opens. When I enter the same command into the web console tool, the map zooms to and then opens the popup. Not sure what I am doing wrong.

What really confuses me is the fact that the function behaves differently when I use the button vs when I use the web console.

//variables
var map_object = L.map('mapid');
var map_tile_object = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var resume_markers = []
var resume_control = L.control();
var resume_control_title = '<h4>Interactive Map</h4>';
var resume_control_description = '<p>Click on item for more information</p>';
//functions
function zoomTo(num) {
 var feature_cord = resumeData[num].geometry.coordinates;
 var markerBounds = L.latLng(feature_cord[1], feature_cord[0]);
 map_object.setView(markerBounds, 18);
 console.log(num);
 resume_markers[num].openPopup();
};
function main(map, tiles, data, resume, title, description){
 map.setView([41.505, -77], 6);
 tiles.addTo(map);
 for (x in data){
 var popup_content = data[x].properties.responsibilities;
 var marker = L.geoJSON(data[x]).bindPopup(popup_content);
 resume_markers.push(marker);
 };
 for (x in resume_markers){
 resume_markers[x].addTo(map);
 };
 resume.onAdd = function(map) {
 this._div = L.DomUtil.create('div', 'resume');
 this._div.innerHTML = title + '<br>' + description;
 return this._div;
 };
 resume.addTo(map);
 for (var i = 0; i < resume_markers.length; ++i){
 resume._div.innerHTML +=
 '<button onclick=zoomTo('+ i + ')>' +
 data[i].properties.position +
 '</button>';
 };
};
//execute
var app = main(
 map_object,
 map_tile_object,
 resumeData,
 resume_control,
 resume_control_title,
 resume_control_description
);

• IvanSanchez: This looks weird. Any chance you could publish a working example including some data? Otherwise, add a debugger statement inside your zoomTo function and see if that helps to debug the problem.
• Brendan Cullen: heres the source: github.com/bren96/Leaflet_WebMap_Resume. Heres the working github page: bren96.github.io/Leaflet_WebMap_Resume. Tried to use a Fiddle but it wasn't working for some reason. If you enter in the console zoomTo(x) (x being any number between 0-5), the function works as expected.
• Brendan Cullen: I believe this issue is that when the button is clicked the click on the map also fires. The popup opens and then once the onclick function is complete the popup closes because the map was clicked. Any idea how to stop the map below the button from firing?

Answer 1

Not a complete solution but setting the map object's closePopupOnClick option to false did the trick. The real issue is that when I click on the button I also click on the map below the button. Good enough of work around for me though.

• StefanBrand_EOX: In your event listener function, you can pass the event and then call event.stopPropagation() to avoid clicks on the map beneath the button. :)

Answer 2

You need to remove the map click listener from your added node.
This should make sure a map click is not recorded when you click the html node you added.

resume.onAdd = function(map) {
 this._div = L.DomUtil.create('div', 'resume');
 this._div.innerHTML = title + '<br>' + description;
# This is your missing row###########################
 L.DomEvent.disableClickPropagation(this._div); 
##############################################
 return this._div;
};

It is recorded in the docs