1

I am trying to create a Leaflet-based map (using folium, but that's a secondary point). The map has a number of markers, each marker with a popup, and the popups may contain links to other popups. Now the challenge is how to open the popup of a specific marker from a link within another popup.

Using the answers from How to open leaflet marker popup from link outside of map? and leaflet open specific marker popup on button click it is possible to open the popups from a link list on the same page as the map. However, the same exact syntax included in the popup does not open the other links.

In other words, the goal is to have a map

  • with N markers
  • each marker with a popup containing additional information and possibly links to other popups
  • and when the user clicks on a link in a popup, the current popup is closed and the linked popup is opened.

The example code below demonstrates this. The links below the map have the same functionality of opening the target popup. The only step missing is to open other popups from a popup.

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
        #map{
            position: relative;
            width: 50.0%;
            height: 50.0%;
            left: 0.0%;
            top: 0.0%;
        }
    </style>
</head>

<body>
    <div class="folium-map" id="map" ></div>
    <a id="Thon" href="#">Thon</a><br>
    <a id="Ziegelstein" href="#">Ziegelstein</a><br>
    <a id="Schnepfenreuth" href="#">Schnepfenreuth</a><br>
</body>

<script>
    var map = L.map('map').setView([49.49, 11.08], 13);
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmLayer = new L.TileLayer(osmUrl, {
        maxZoom: 19,
        attribution: 'Map data © OpenStreetMap contributors'
    });
    map.addLayer(osmLayer);

    var markers = [];
    // is it about escaping the quotation marks? no
    var marker1 = L.marker([49.4784924, 11.0608863],{title:"Thon"}).addTo(map).bindPopup('<b>Thon</b><br><a id=\"Thon\" href=\"#\">Thon</a><br><a id=\"Ziegelstein\" href=\"#\">Ziegelstein</a><br><a id=\"Schnepfenreuth\" href=\"#\">Schnepfenreuth</a><br>');
    var marker2 = L.marker([49.4874712, 11.1054729],{title:"Ziegelstein"}).addTo(map).bindPopup('<b>Ziegelstein</b><br><a id="Thon" href="#">Thon</a><br><a id="Ziegelstein" href="#">Ziegelstein</a><br><a id="Schnepfenreuth" href="#">Schnepfenreuth</a><br>');
    // do other links work?
    var marker3 = L.marker([49.4852016, 11.04941479999999],{title:"Schnepfenreuth"}).addTo(map).bindPopup('<b>Schnepfenreuth</b><br><a id="Thon" href="#">Thon</a><br><a id="Ziegelstein" href="#">Ziegelstein</a><br><a id="Schnepfenreuth" href="#">Schnepfenreuth</a><br><a href="https://www.google.com">Google</a>');

    markers[marker1.options.title] = marker1
    markers[marker2.options.title] = marker2
    markers[marker3.options.title] = marker3
    function markerFunction(id){
        markers[id].openPopup();
    }

    $("a").click(function(){
        markerFunction($(this)[0].id);
    });
</script>
paulus
  • 51
  • 4
  • The jQuery functionality adds event handlers to the elements in the DOM at the time the `$("a").click(...)` is called. The HTML strings in the popups don't get converted into DOM elements until the popup opens. In other words: ensure that you're attaching events to the links inside the popup *after* the popup is being shown. – IvanSanchez Mar 02 '22 at 13:30

1 Answers1

0

@IvanSanchez was correct. A similar issue was mentioned also in Click link inside Leaflet Popup and do Javascript. The solution was to add

map.on('popupopen', function() {
   $("a").click(function(){ markerFunction($(this)[0].id); });
});

that adds the jQuery bindings again each time a popup is opened. Maybe not the most efficient solution, but seems to accomplish the desired result.

paulus
  • 51
  • 4