11

I am showing position from django model like marker with popup:

my view file

<script>
        const MAP_KEY = "{{ MAP_KEY }}";
        const added_place_json = JSON.parse('{{ added_place_json | escapejs}}');
</script>

my js file

for (const place of added_place_json){
L.marker([place.fields.lat, place.fields.long]).bindPopup(
    `<div class="card" style="width: 15rem;">\n` +
    ` <h6 class="card-header">Name place:<br>${place.fields.name}</h6>\n` +
    `  <div class="card-body">\n` +
    `    <p class="card-text" style="overflow: scroll">Place comment:<br>${place.fields.comment}</p>\n` +
    `  </div>\n` +
    `</div>`
).addTo(map)

};

This works well on google chrome, but it doesn't work on safari. When I click on the marker in safari nothing happens

Sh VavilenT
  • 337
  • 2
  • 9

2 Answers2

14

This is a bug of Leaflet 1.7.1, see Leaflet #7255

In the newest master version of leaflet it is working, see Issue Comment

So I recommand to change your leaflet-src from the Leaflet Release 1.7.1 to the master branch on Github

Falke Design
  • 10,635
  • 3
  • 15
  • 30
  • I have problem: marker-icon-2x.png:1 GET http://localhost:8000/static/place_remember/leaflet/leaflet.css/images/marker-icon-2x.png 404 (Not Found) – Sh VavilenT Dec 19 '20 at 12:03
  • Look into https://stackoverflow.com/questions/47313165/how-to-reference-static-assets-within-vue-javascript – Falke Design Dec 19 '20 at 12:06
  • 1
    The issue is almost 9 months old and still in the production build. No idea how to handle that in package.json (the git branch contains no dist JS, it's only in the zip file). I like leaflet but that's a showstopper. – wortwart May 28 '21 at 14:59
  • 1
    The answer by @hvsp is actually most helpful. Until v1.8 is released, you can simply initialise the map with option ```tap: false```. The fix for issue #7255 (among other things) changes the default-value of the ```tap```-option from ```true``` to ```false``` . – Karsten Jan 12 '22 at 10:17
5

If for some reason you have to stick to 1.7.1 and you do not need to handle the 'taphold' event, initiating the map with tap: false might solve this issue for you. (As suggested here https://github.com/Leaflet/Leaflet/issues/7331#issuecomment-742454380)

hvsp
  • 327
  • 4
  • 12
  • This fix also worked for [my issue](https://stackoverflow.com/questions/67661235/leaflet-marker-not-detecting-touch-location-correctly?noredirect=1#comment119594025_67661235), where the popup did appear only for a split-second, and only worked correctly when clicking slightly to the right of the marker. – TiltedBlock May 23 '21 at 15:21