search

bozdoz / wp-plugin-leaflet-map

Add leaflet maps to Wordpress with shortcodes
https://wordpress.org/plugins/leaflet-map/
GNU General Public License v2.0
140 stars 71 forks source link

Permalink / Open marker text via html link #122

Open theatischbein opened 3 years ago

theatischbein commented 3 years ago

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:

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:

theatischbein commented 3 years ago

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

bozdoz commented 3 years ago

Check out the global JavaScript variable WPLeafletMapPlugin.markers

image

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 commented 3 years ago

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 commented 1 year ago

The problem is: Can we give markers ids?

theatischbein commented 1 year ago

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).