Marker position not matching provided lat & lng

There is an error in your code: There isn’t an option maxbounds, delete it. And the values for the marker “Boulders Beach” are utopic. I have an example about iconsize, iconAnchor, popupAnchor, tooltipAnchor.

Very strange as the code was working fine some months ago. DId some updates break it?

maxBounds: When this option is set, the map restricts the view to the given geographical bounds, bouncing the user back if the user tries to pan outside the view. To set the restriction dynamically, use setMaxBounds method.

Source: https://leafletjs.com/reference.html

Sorry, I was wrong.

maxbounds=-22.91101370,-43.20937270

It should be like maxbounds="46.22, -59.61; 51.72+, -52.36", lat and lngs of two opposite corners.

I’m sorry for answering only now, I did not get the mail.

@hupe13 Thank you but i don’t think the maxbounds parameter is impacting the position (and misalignment) of the marker on the map.

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

The Format of maxbounds=-22.91101370,-43.20937270 is false, see above.

zoom=4 lat=-22.91101370 lng=-43.20937270 you should use fitbounds

I tested the code: https://leafext.de/extra/test/

Thank you for investigation furter.

But sorry, on your test page, “Boulder Beach” seems to be located in Canada while it’s in South Africa…

Also, the maxbound feature that make the map to automatically re-center don’t work in your example while it work on my page:

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

Only the Boulder Beach marker position is wrong. Everything else is OK.

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

“Boulder Beach” has lat=-34.19809 lng=18.45217

Indeed. It’s correct on Google maps:

34°11’53.1″S 18°27’07.8″E
https://maps.app.goo.gl/2Lgw2bYH1wKReoqa9?g_st=ic

but it show another location on leaflet map as you can see.

I see the correct place. The Google Maps URL in your first post shows Rio de Janeiro. I changed lat and lng on my test page, both markers are in South Africa.

[leaflet-map lat=-28.729 lng=25.049 zoom=4 maxbounds="-15.687,11.470; -34.416, 43.923" detect-retina zoomcontrol dragging  !scrollwheel !attribution !touchZoom !keyboard ]
[leaflet-marker lat=-34.19809  lng=18.45217 title='Boulders Beach' iconUrl='/php/leafext/tmp/epicside_icon_location_frontcolor_backwhite_framed_marker.svg' iconclass='marker_icon' iconSize='45.55,50' iconAnchor='21.195,50' shadowUrl='/php/leafext/tmp/epicside_icon_location_frontcolor_backwhite_framed_marker_shadow.svg' shadowSize='120.36,33.84' shadowanchor='10.466,33.536' maxWidth='150']Boulders Beach[/leaflet-marker]
[leaflet-marker lat=-34.19809  lng=18.45217  title='default marker Boulders Beach']Boulders Beach[/leaflet-marker]
[leaflet-marker title='Afrique du Sud' lat=-28.81662360 lng=24.99163900 iconUrl='/php/leafext/tmp/za.svg' iconSize='50,34' iconAnchor='25,17']Afrique du Sud[/leaflet-marker]
[leaflet-marker title='default marker Afrique du Sud' lat=-28.81662360 lng=24.99163900 ]Afrique du Sud[/leaflet-marker]

Check your lats and lngs again.

I recommend to use Openstreetmap, then you do not need to convert the format of coordinates.

Thank you. let & lng where missing in the marker code.

Now I indeed have to fix the maxBounds but as the map’s code is generic for differents locations stores in a database, how should I calculate the value of mapBound based on the lat & lng values please?

Thank you. let & lng where missing in the marker code.

But you set lat and lng in the leaflet-map shortcode: [leaflet-map zoom=4 lat=-22.91101370 lng=-43.20937270 Then the leaflet-marker without lan and lng takes this.

Now I indeed have to fix the maxBounds but as the map’s code is generic for differents locations stores in a database, how should I calculate the value of mapBound based on the lat & lng values please?

That is a good question. The map fits on the markers with [leaflet-map fitbounds ...]. I don’t have any idea how to automate maxbounds yet. Do you know php?

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

I know PHP but not the calculation to be applied to the lat & lng parameters to get correct maxBound 4-arguments values

Then I would calculate the 2 opposite corners of all markers on the map from the largest and smallest lat and lng and add or subtract a little.
Maybe this could be done more elegant with Javascript. But the algorithm would be the same.

I have to admit I’m completely lost for such things. Which i don’t understand, i that everything was working perfect for months. Something changed at leaflet-map and break all my maps…

Similar issue for this page:

https://epicside.be/destination/australia/

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

You are using a very old leafletjs version. Change in the settings of Leaflet Map the JavaScript URL and CSS URL to

https://unpkg.com/[email protected]/dist/leaflet.js
https://unpkg.com/[email protected]/dist/leaflet.css

Or the Yoast SEO plugin is the cause.

Maybe this could be done more elegant with Javascript.

If you be patient, I try it.