0

EDIT- https://codepen.io/jdog6652/pen/YzNbPQg -Live example uncomment the function call at the bottom of the JS

EDIT2- Thanks to help from you all it seems this is a browser issue, on my version of Safari (13.1.3) the popup does not load, but it seems on other browsers this is not an issue. Is there any way I can get this to work in Safari?

Im having an issue where when I bind a popup to a marker and add it to the map it never appears even when the marker is clicked.

If I bind it to the marker add it to the map then chain a .openPopup() the popup appears on load but after it is closed it is impossible to ever open up again.

Below is the code on how I initialize the map

var map = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
   }).addTo(map);

Below is the for loop of how I add the markers to the map

function populateLeaflet(data){
        let json = JSON.parse(data);
        map.flyTo([json[0]['lat'],json[0]['lng']], 12);
        json.forEach(element =>
            L.marker([element['lat'], element['lng']]).bindPopup(element['title']).addTo(map)
            )
    }

This will successfully fly to the location add the markers to the map but nothing happens when I click on a marker

Switching the order of the bind and add to changes nothing, is the only solution to add even listeners for when a marker is clicked, or am I making some mistake?

Similar questions on here that I have found did not fix this weird issue.

Marc-9
  • 145
  • 1
  • 9
  • 1
    Are you able to reproduce this issue in a codepen/codesandbox? There's nothing obviously wrong with your code – Seth Lutske Apr 28 '21 at 18:42
  • My apologies @SethLutske for getting back so late https://codepen.io/jdog6652/pen/YzNbPQg Here is an example, un comment the part where the function is called and you will see no popup is opened on click – Marc-9 Apr 28 '21 at 19:31
  • 1
    This code works with codepen.io, it goes to the marker, I click, it opens the popup, close it, click again and then it restarts. Works as it should. – Grzegorz T. Apr 28 '21 at 19:37
  • Thank you so much for checking and verifying this for me @GrzegorzT. if possible could you try in Safari? In my browser Safari 13.1.3 this does not work – Marc-9 Apr 28 '21 at 19:47

1 Answers1

0

Thanks to the comments posted I realize now the issue is not with my code but the leaflet code and the browser, and this question seems to be answered Popup does not open when clicking on marker safari

Marc-9
  • 145
  • 1
  • 9