Use external links to open popup windows on leaflet map in drupal

Question

Ok, here is my situation. I am using the leaflet map module with drupal. I have the map integrated on my website with views. I have nodes that contain content that I want to be displayed via a popup window. When I click each individual marker, the popup works exactly as I want. however, I want to be able to click an external link to be able to also open the popup. I have viewed and implemented this code from another question:

var markers = [];
var marker1 = L.marker([51.497, -0.09],{title:"marker_1"}).addTo(map).bindPopup("Marker 1");
markers.push(marker1);
var marker2 = L.marker([51.495, -0.083],{title:"marker_2"}).addTo(map).bindPopup("Marker 2");
markers.push(marker2);
var marker3 = L.marker([51.49, -0.097],{title:"marker_3"}).addTo(map).bindPopup("Marker 3");
markers.push(marker3);

function markerFunction(id){
    for (var i in markers){
        var markerID = markers[i].options.title;
        if (markerID == id){
            markers[i].openPopup();
        };
    }
}

$("a").click(function(){
    markerFunction($(this)[0].id);
});

by user abenrob, but that doesn't work with markers generated by drupal.

My question has 2 parts, as I can see it.

1: How do I access the map inside my different block? I have set up the links from my menu block to call my function that contains the aforementioned code, and they call it correctly. However, when my Javascript needs to speak to the map, I get nothing. Currently I have "var map = document.getElementById('leaflet-map');", but that seems to be pulling the div, not the map contained inside the div.

2: How do I access the list of markers generated by my map in drupal. Currently, as a test, I am just generating a marker manually and using the bindPopup function to bind the div containing the popup on the page, but I can't add it to the map (see part 1). Ideally I would not want to recreate the markers in javascript if they are already created in Drupal, but we don't always live in an ideal world, but it seems that if I get the map to connect, I could at least work with that.

Answer 1

In case anyone else stumbles across this with the same question, I figured out the first question. I accessed the map created by Drupal through the Leaflet module by utilizing the following code:

// This accesses the leaflet map created by drupal and sets the map variables so that they can be used with the functions

var map;

$(document).bind('leaflet.map', function(e, settingsLeaflet, lMap)
{
    map = lMap;
}); 

I am still working on the second question. When I figure it out, I will add another update.

Edit: I was able to access the markers in the second question by using the following code:

var markers = {};
var markersList = [];

// This accesses the leaflet map features and pulls the marker variables so that they can be used with the functions
$(document).bind('leaflet.feature', function(e, lFeature, feature)
{
markers[feature.feature_id] = lFeature;
markersList.push(lFeature);
}); 

from there it was as easy as looping through the markers list, as such:

// This function takes the variable id, which is passed from the HTML call of this function. It then loops through the marker list and compares the id with the value of the title of each marker. If it finds a match, then it opens the popup bound to that specific marker.
function markerPopups(id)
{

    // Loops through the markers list
    for (var i = 0; i < markersList.length; i++)
    {
        // Sets a variable to get the title of the marker, which
        var markerID = markersList[i].options.title.replace(/[^a-zA-Z0-9]/g, '_');

        // Compares the variable passed through the function to the title of the marker. If there is a match, it opens the popup for that marker.
        if(markerID == id)
        {
            markersList[i].openPopup();
        }
    }
} 

Also, it wasn't needed to access the map once you accessed the pre-made markers, so you can ignore the first part, unless you need to use the map for anything else.