Permalink / Open marker text via html link

[theatischbein]

Hi there,
for my page it would be great to open a markers text box via a link on the page.
E.g. something like <a href="#marker-1234">Open Marker 1234</a> alternatively via javascript.

I noticed that my marker do not get any identifier.

<div class="leaflet-pane leaflet-marker-pane">
    <img src="https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(-216px, -112px, 0px); z-index: -112;" alt="" tabindex="0">
    <img src="https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(-190px, -106px, 0px); z-index: -106;" alt="" tabindex="0">
    <img src="https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(-290px, -137px, 0px); z-index: -137;" alt="" tabindex="0">
    <img src="https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(-288px, -134px, 0px); z-index: -134;" alt="" tabindex="0">
    ...
</div>

Another test I did was:

• given a marker a temporary ID <img id="test" src="https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" ...>
• do in js console document.getElementById("test").click();

In my case the corresponding marker text opened.

My question now: Did I miss an implemented way of doing this ? If not what is your opinion on that ?

Setup:

• Leaflet Plugin Version 2.22.1
• Wordpress 5.6
• jquery 3.3.2

[theatischbein]

I also found this related question https://wordpress.org/support/topic/ajaxjquery-to-show-more-information/

[bozdoz]

Check out the global JavaScript variable WPLeafletMapPlugin.markers

You ought to be able to loop through those to discover how to open a popup. I'm not exactly sure how to do it though. I would guess there's an answer on leafletjs.com

[theatischbein]

You are right that this is a leafletjs problem itself. (See e.g. https://stackoverflow.com/a/31032786)

Thanks for the hint with the markers array. Than of course I can toggle them with WPLeafletMapPlugin.markers[0].togglePopup(), but even looping over them is quite unpretty because the information for filtering the array would be the marker text or the coordinates, which both might not be unique.

What I thought of is, changing the markes array into dictionary or a list of class with the attributes idand marker object and add idas an input for the shortcode but generate if none is given.

Another idea would be using the internal leaflet_id each marker has but they are not known at time of creating. After the map is created, you could do something like (tested):
WPLeafletMapPlugin.markers.find(function(elem){ return elem._leaflet_id == 44}).togglePopup()
Since we can alter the leaflet_id it would be doable to use id as a shortcode input and overwrite the leaflet_id. The disadvantage is, that we might create a collision if we do not set IDs for all marker..

Additionally I would propose functions like getMarkerByID(id) or getMarkersByTitle(title) or getMarkersByLatLng(lat, lng)

What do you think ?

Edit:
As a workaround I used the fact, that the markers are sorted by order of shortcode apperance, meaning the first marker shortcode ends up at WPLeafletMapPlugin.markers[0], the second shortcode marker at WPLeafletMapPlugin.markers[1] and so on.

[bozdoz]

The problem is: Can we give markers ids?

[theatischbein]

I don't see a reason why we can not. We generating HTML code and every tag is allowed to have an unique identifier (see the HTML standard).

It may be reasonable to make it optional and add an additional marker option for setting the id value. Alternatively it may be a good idea to convert the option title into an expected id format (like removing whitespaces and lower the string).