Open popup with an external link generated by html

Question

I have created (via html) a list of links with IDs generated from a database via PHP,

These links are the same data that is generated in the geoJson that is drawn on the map.

var geojson = L.geoJson(geojsonSample, {

            pointToLayer: function(feature, latlng) {
                var smallIcon = new L.Icon({
                     iconSize: [50, 50],
                     iconAnchor: [13, 27],
                     popupAnchor:  [1, -24],
                     autoPanPadding: [30,30],

                     iconUrl: feature.properties.icon.iconUrl


                     });
                return L.marker(latlng, {icon: smallIcon });
            },

        onEachFeature: function(feature, layer) {
            layer._leaflet_id = feature.properties.control;
            var popupText = feature.properties.description 
                layer.bindPopup(popupText)
                layer.bindTooltip(feature.properties.title).openTooltip(); 
                }
                }).addTo(map);


    //  markers.addLayer(geojsonAux);


        var markers = L.markerClusterGroup();
        markers.addLayer(geojson).addTo(map);
                map.fitBounds(geojson.getBounds().pad(Math.sqrt(2) /4));

/// geojson example

var geojsonSample = {

    "type": "FeatureCollection",
    "features": [{"type":"Feature","geometry":{
    "type": "Point",
    "coordinates": [
        -72,
        4
    ]
},"properties":{
    "title": "Espacio Akana",
    "category": "Chile",
    "icon": {
        "iconUrl": "https:\/\/tupale.co\/milfs\/images\/secure\/?file=300\/82afc44d9c358234ebb411f848481ea4.png",
        "iconSize": [
            60
        ]
    },
      "localizacion": "-72 4 15 ",
    "control": "69c90579b5cbccc80b09df24057ff82b",
    "description": "primera descripcion "
}},{"type":"Feature","geometry":{
    "type": "Point",
    "coordinates": [
        -70.3976891,
        -23.64939325
    ]
},"properties":{
    "title": "Teatro Pedro de la Barra",
    "category": "Chile",
    "icon": {
        "iconUrl": "https:\/\/tupale.co\/milfs\/images\/secure\/?file=300\/82afc44d9c358234ebb411f848481ea4.png",
        "iconSize": [
            60
        ]
    },
    "localizacion": "-70.3976891 -23.64939325 16 ",
    "control": "7850c035cc53ee5719aa8677fb805ea7",
    "description": "segunda descripcion "
}} ]};

/// external html link example

<ul class="list-group ">
    <li class="list-group-item"><a id="7850c035cc53ee5719aa8677fb805ea7" href="#" >   Teatro Pedro de la Barra</a> </li>
    <li class="list-group-item"><a id="69c90579b5cbccc80b09df24057ff82b" href="#" >   Espacio Akana</a> </li>   
</ul>

How can I make the popup open by calling it from the onclik event of each link? demo in https://jsfiddle.net/humano/s56fz1u9/53/

Pretty much the same question from 2 days ago - https://stackoverflow.com/questions/57286300/show-leaflet-marker-popup-from-outside-of-map-dynamically — peeebeee, Aug 01 '19 at 11:00
In that question the links are dynamically generated from leaflet, in mine the links are generated from php, outside the leaflet javascript. — humano, Aug 01 '19 at 11:03

Babis.amas · Answer 1 · 2019-08-04T21:52:57.453

0

If I'm right you want to open the marker popup based on the id of the clicked <a> tag's id. You could achieve this either by adding a class to all of your <a> tags and bindind the below function there or by binding the function dynamicaly to each <a> tag when you create them. I've done this and it worked perfect but please note that I haven't tested the below code and some adjustments may be needed.

function openMarkerPopup(e){
    const markerID = e.id;
    const marker = markers.getLayer(markerID);
    marker.openPopup();
}

edited Aug 04 '19 at 21:52

answered Aug 02 '19 at 09:31

Babis.amas

469
2
16

I've tried it here and it doesn't work https://jsfiddle.net/humano/s56fz1u9/53/ "Uncaught TypeError: Cannot read property 'openPopup' of undefined" – humano Aug 02 '19 at 15:01
If you use the onclick like your example at the jsfiddle you have to do it like this `onclick="openMarkerPopup(this)` and change the function like I edited above. – Babis.amas Aug 04 '19 at 21:52
1

This still won't work because in the fiddle you are using a different geoJson than the one you provided in your question, in which the properties.control is undefined, thus this like is not assigning the correct value `layer._leaflet_id = feature.properties.control;` – Babis.amas Aug 04 '19 at 21:58
Correct, the geojson was wrong, I already corrected it and edited the code but it still doesn't work, Now I have the doubt: can the layer._leaflet_id be a non-numerical value? – humano Aug 06 '19 at 00:46
Hello @ivansanchez , Could you help us review this? – humano Aug 06 '19 at 16:22

Open popup with an external link generated by html

1 Answers1