Open leaflet marker popups from a link outside the map?

Question

hope that someone with more experience can help me. i have the following map

var map = L.map( 'map', {
  center: [48.865633, 2.321236],
  minZoom: 2,
  zoom: 13
});

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

L.control.zoom({
    position: 'bottomright'
}).addTo(map);

var myURL = jQuery( 'script[src$="leaflet_openstreetmap_func.js"]' ).attr( 'src' ).replace( 'leaflet_openstreetmap_func.js', '' );

var myIcon = L.icon({
  iconUrl: myURL + '../img/pins/Marker.png',
  iconRetinaUrl: myURL + '../img/pins/Marker.png',
  iconSize: [30, 42],
  iconAnchor: [9, 21],
  popupAnchor: [7, -15]
});

var markerClusters = L.markerClusterGroup({
    polygonOptions: {
      opacity: 0,
      fillOpacity: 0
    }
});

for ( var i = 0; i < markers.length; ++i )
{
  var popup =
        '<span>'+ 
          '<em>'+ markers[i].type_point +'</em>' +
          '<h3>'+ markers[i].name_point +'</h3>' +
        '<form action="http://maps.google.com/maps" method="get" target="_blank"><input name="saddr" value="'+ markers[i].get_directions_start_address +'" type="hidden"><input type="hidden" name="daddr" value="'+ markers[i].location_latitude +',' + markers[i].location_longitude +'"><button type="submit" value="Get directions" class="btn_infobox_get_directions">Get directions</button></form>';


  var m = L.marker( [markers[i].location_latitude, markers[i].location_longitude], {icon: myIcon} )
                  .bindPopup( popup );



  markerClusters.addLayer( m );
}

map.addLayer( markerClusters );

the data of each marker comes from another js like below

var markers = [
  {
    "name_point":"Name point",
    "type_point":"Type point",
    "location_latitude":48.870587,
    "location_longitude":2.318943
  }
];

i would like to open each popup from an external link,by id or name for example

<a href="#0" id="marker_1">click</a>

could some one help me please?

Answer 1

Add a id parameter to your data:

  var markers = [
  {
    "id":1,
    "name_point":"Name point",
    "type_point":"Type point",
    "location_latitude":51.509,
    "location_longitude":-0.08
  },

You can get the id from a url.

//www.xyz.com?markerid=3
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    const regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var POPUP_MARKER_ID = getParameterByName('markerid');

and then after adding the marker to the layer, you can open the popup, if it's the same id:

  var m = L.marker( [markers[i].location_latitude, markers[i].location_longitude],{icon: myIcon})
                  .bindPopup( popup );
   markerClusters.addLayer( m );

    if(POPUP_MARKER_ID === markers[i].id){
       m.openPopup();
    }

OR

if you want to open the popup from a link field on the same site you can loop through the layers.

Working with all html elements:

<a class="openpopuplink" data-id="1" href="#">Marker 1</a>
<span class="openpopuplink" data-id="2">Marker 2</span>

//Link on the same page
var classname = document.getElementsByClassName("openpopuplink");

var openMarkerPopup = function() {
    var id = this.getAttribute("data-id");    
    markerClusters.eachLayer(function(layer){
        if(layer.options.id && layer.options.id == id){
        layer.openPopup();
      }
    });    
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', openMarkerPopup, false);
}

And on creating the markers you have to add the option id : var m = L.marker( [markers[i].location_latitude, markers[i].location_longitude],{id: markers[i].id,icon: myIcon}).bindPopup( popup );

Example: https://jsfiddle.net/falkedesign/2uofevbq/

Update

To show Popup in a MarkerclusterGroup, spiderfy the group and then show the popup;

if(layer.options.id && layer.options.id == id){
        if(!layer._icon) layer.__parent.spiderfy();
        layer.openPopup();
      }

if(POPUP_MARKER_ID === markers[i].id){
       m.__parent.spiderfy();
    }