Addon Open Street Map shows icon on wrong position

the screenshot is here:
https://prnt.sc/kPYTTo9jgAqo

The website is:
https://water-for-africa.org/en/fields-of-activity.html
Just scroll down to the end. Then you will see it.

Hi,

In the post https://www.joomshaper.com/forum/question/12923#qa-answer-62802 I pointed out that the icons are displayed distorted. Your colleague suggested the CSS code shown in the post.
The icons no longer appear distorted, but in the wrong place.
See:
https://prnt.sc/kPYTTo9jgAqo
https://water-for-africa.org/en/fields-of-activity.html (at the bottom of the page)

Since our website is trilingual, it also has 3 templates.
In the German template I have now deleted the CSS code of your colleague from the post https://www.joomshaper.com/forum/question/12923#qa-answer-62802.
The icons now appear distorted, but in the right place:
https://prnt.sc/amBpPgFbat-J
https://water-for-africa.org/de/arbeitsfelder.html (at the bottom of the page)

Probably the CSS code of the post https://www.joomshaper.com/forum/question/12923#qa-answer-62802 must be adapted. Anyway.

Thanks a lot.

Juergen

Hello,

Just to confirm, I have the same exact issue as Juergen.

The CSS below does fix the icon size, but as Juergen said, they now appear in the wrong place on the map.

.leaflet-marker-icon {
    height: auto !important;
}

Kind regards,
John

Hello,

It looks like the inline styles are causing the issue. There's an inline style for height that is 95px, if that is changed to match the 38px width, then the issue is resolved.

<img src="/images/markers/pins/style4/map-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="" tabindex="0" style="margin-left: -22px; margin-top: -94px; width: 38px; height: 95px; transform: translate3d(1025px, 341px, 0px); z-index: 341;">

However, I'm not sure what is injecting the the height and width for the icons.

Kind regards,
John

Ok, this would not be the recommended solution since it's modifying a core SP Page Buider JS file, but it gets the job done if you are looking for an immediate solution.

Need edit this file components/com_sppagebuilder/assets/js/leaflet-provider.js (file is minified, so you'll need to look for this line:

{for(var c=L.Icon.extend({options:{iconSize:[38,95],iconAnchor:[22,94]

And change the 95 to 38 and the 94 to 37.

Hopefully, Joomshaper has a more permenant fix coming. Just thought I'd share what I did to get the page looking nice while we wait.

Kind regards,
John

@conshelf: Your code works :-)

@Joomshaper support: please update your file as conshelf has suugested. Otherwise we have to change the file after every SP PageBuilder Update. That is not a good solution. Thanks.

Hello,

Just updated the latest version of SP Page Builder and the map issue still exists.

This really needs to be addressed.

Kind regards,
John

Wy after all these years this si still not fixed??