Marker position not matching provided lat & lng

It look the break occurs when upgrading Leaflet Map WordPress plugin from version 3.0.2 to 3.1.0 since my test environment don’t have any issue using the same source code for map generation:

https://test.epicside.be/experience/observer-les-manchots-a-boulders-beach/

https://test.epicside.be/experience/rallier-le-pain-de-sucre-en-telepherique/

Any idea?

• This reply was modified 1 year, 10 months ago by matbe81.

I confirm having restored version 3.0.2 of leaflet-map wordpress plugin in place of 3.1.0 on the prod env and everything is back OK.

Issue can still be seen on the dev env. Same url except domain https://dev.epicside.co in place of https://epicside.co

Any idea?

• This reply was modified 1 year, 10 months ago by matbe81.

Did you add some custom code?

Don’t think so. The code was written 2 years ago and never changed. I have made all the updated since that without any issue. Look that only 3.1.0 make issues.

I ask because I have never seen such a code before in the html sources, not in the old versions either:

var marker_options = (function () {
    var _options = {
    ...
    var default_icon = L.Icon.Default.prototype.options;
    if (_options.iconUrl) {...
        ...
    }
    return _options;
....

Please update the leafletjs urls.

I have replicated the prod env to the dev env then have updated the leaflet map plugin to the latest version (3.1.0) on the dev env and and have updated the URL in the leaflet map settings page of the dev env to 1.9.2.

Thanks for having a look.

The content of https://dev.epicside.co/destination/australia/ and https://epicside.co/destination/australia/ is the same? The map is missing on the development page.

Indeed. Look another side effect of the plugin update.

Let’s first concentrate on the map present on those pages:
https://epicside.be/experience/observer-les-manchots-a-boulders-beach/
https://dev.epicside.be/experience/observer-les-manchots-a-boulders-beach/

• This reply was modified 1 year, 10 months ago by matbe81.

You must have a custom code. I don’t find the string from html code var marker_options = (function () { in the sources of Leaflet Map.

Your shortcode seems to be:

[leaflet-map lat=... lng=... zoom=... ...]  //with lat and lng
[leaflet-marker ...]   //without lat and lng

Can you write (or create) the shortcode like:

[leaflet-map ... fitbounds]  //without lat and lng
[leaflet-marker lat=... lng=... ...]   //with lat and lng

or

[leaflet-map lat=... lng=... zoom=... ...]  //with lat and lng
[leaflet-marker lat=... lng=... ...]   //with lat and lng

• This reply was modified 1 year, 10 months ago by hupe13.
• This reply was modified 1 year, 10 months ago by hupe13.

maxBounds

https://leafext.de/extra/maxbounds/

Thank you! But isn’t possible to set that directly in PHP for cleaner integration?

Please note I don’t want to use fitbounds on map layer as I want the experience (boulder beach in the example is always centered.

So I added lat & lng to the experience marker and only require to fix the maxBound setting:

// Map
echo do_shortcode("[leaflet-map lat=". $experience_current['lat']." lng=". $experience_current['lng'] . " zoom=".$experience_current['map_zoom']." detect-retina zoomcontrol dragging !scrollwheel !attribution !touchZoom !keyboard tileurl='https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg']");

// Experience Marker
echo do_shortcode("[leaflet-marker lat=". $experience_current['lat']." lng=". $experience_current['lng'] . " title='".$experience_current['location']."' iconUrl='".$site['markers']['normal']."' iconclass='marker_icon' iconSize='".$site['marker']['icon_size']."' iconAnchor='".$site['marker']['icon_anchor']."' shadowUrl='".$site['markers']['shadow']."' shadowSize='".$site['marker']['shadow_size']."' shadowanchor='".$site['marker']['shadow_anchor']."' maxWidth='150']".$experience_current['location']."[/leaflet-marker]");

Play attention to ‘maxbounds=”. $experience_current[‘lat’].”,”. $experience_current[‘lng’]’.

How should i adapt it to have the correct calculation? It looks to be the only issue as when I completely remove it, the marker are well positioned.

https://dev.epicside.co/experience/observer-les-manchots-a-boulders-beach/

But for your consideration, the incorrect maxBounds setting was present for years so since version 3.1.0, something changes.

Thank you again.

@bozdoz: can you help please? A map with lan, lng, zoom, maxbounds and a marker without lat and lng do not work together. I suspect it is a bug. I have an example. The same effect is in version 3.0.5, I tested it. Thank you.

Please note I don’t want to use fitbounds on map layer as I want the experience (boulder beach in the example is always centered.

You can use lat, lng and zoom. The important thing is the state when the map is “ready”.

As i use wordpress shortcodes, i think it’s automatically send when map is in “ready” state.

Please keep me in touch on the bug resolution which didn’t affect version 3.0.2

It is not a bug, it is a feature. If maxbounds is used, leaflet-marker without lan and lng are in the center of maxbounds. @bozdoz, should that be so?