-
Posts
-
I want to display custom markers on an Openstreet map. I do not use the Enfold element, but add the map via a shortcode.
I looked up the original marker, which is in Enfold -> config-leaflet-maps -> assets -> leafletjs -> images
I also created these last 4 folders within the Child theme, and then placed my own marker, provided with the original name ‘marker-icon-2x.png’, in them.
Still, this marker inside does not load, and I get an ‘image not found’ error message.
How can I fix this?
Many Thanks, Ita
Hey Frans,
Thank you for the inquiry.
Are you using the actual theme shortcode for the OSM builder element? If so, unfortunately, you won’t be able to override the marker by creating the same folder structure in your child theme and adding different images. However, there is an alternative solution. You can adjust the icon_upload or icon_url parameters of the default OSM shortcode to change the marker icon.
You can add the filename of your desired custom marker image as values of the said parameters. This allows you to use your own custom marker instead of the default one provided by the theme. Remember to upload your custom marker image to your WordPress media library or provide the complete URL to the image file if it’s hosted elsewhere.
If you have any further questions or need additional assistance, please let us know.
Best regards,
IsmaelHey Ismael,
Thank you for your reply!
I use Loops & Logic, where I include the Leaflet map via the shortcode:
[leaflet-map address=”Fortuna 22, Arnhem, The Netherlands” height=”800px” fitbounds dragging scrollwheel]
The markers can then be placed via the shortcode:
[leaflet-marker fitbounds address=”street, city, country”]
[/leaflet-marker]If I don’t want the default marker, but my own then I can add the following parameter to this:
iconUrl=”/wp-content/uploads/2023/05/drop-left-top.webp”The shortcode will then be:
[leaflet-marker iconUrl=”/wp-content/uploads/2023/05/drop-left-top.webp” fitbounds address=”street, city, country”]
[/leaflet-marker]But this marker is then placed at the bottom right of the location, so it looks very inaccurate on the map.
If I replace the marker in the Enfold -> config-leaflet-maps -> assets -> leafletjs -> images folder, it does look accurate. However, what happens with future updates? Then the original icon will be placed there again? Hence I would like to replace via Child-theme, but apparently that is not possible?
Thanks,
ItaHi,
Thank you for the update.
But this marker is then placed at the bottom right of the location, so it looks very inaccurate on the map.
What is the size of your custom marker? Please make sure that the custom marker has the same size as the default markers. You can also define the width and height of the icon by using the ‘icon_width’ and ‘icon_height’ parameters.
Best regards,
IsmaelHey Ismael,
Even if the icon is 50×82 pixels, the same as the original, the position is at the bottom right of the location.
‘icon_width’ and ‘icon_height’ don’t work…
Best regards,
ItaHi,
The size of the default icon (marker-icon.png) is 25x41px. The larger one (50x82px) is for retina displays.
Best regards,
IsmaelHi Ismael,
The size is not the problem.
The problem is that the parameters you mentioned appear to be wrong. It should be iconsize=”25,41″ and iconanchor=”25,41″ (or other values, if you wish).
Enjoy your weekend!
Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Custom-marker in Childtheme?’ is closed to new replies.