1

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
);

  • 1
    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. – IvanSanchez Aug 20 at 10:01
  • 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 Aug 20 at 13:06
  • 1
    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? – Brendan Cullen Aug 20 at 18:30
0

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.

  • 1
    In your event listener function, you can pass the event and then call event.stopPropagation() to avoid clicks on the map beneath the button. :) – Stefan Sep 18 at 19:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.