Doubts about creating a new map

You can use any map that you can configure in the settings. Extensions for Leaflet Map provides a shortcode for using Leaflet-Providers.

If you want to get a map with an address you can use like this example:

[leaflet-map address="Oslo, Norway"]

And here is an example how to use leaflet-geosearch.

Hello @hupe13,

I have read your indications, and I have the following code:

[leaflet-map zoom=15 lat=42.1380799 lng=-0.4101852 height="500" zoomcontrol scrollwheel mapid="OSM"]

[layerswitch mapids="MapTilesAPI,WorldImagery" providers="OSMEspagnol,Esri"]

But I am not able to see the layer switch, I get some errors (f.e. “L.tileLayer.provider is not a function”).

In addition, I have tested to add popup message on clicking marker, but I don’t see it, code:

[leaflet-marker lat=42.1371271 lng=-0.4163034 iconSize="50" iconAnchor="43"] TEST [/leaflet-marker]

Regards, Iggy.

For the marker try the following code:

[leaflet-map lat=42.1371271 lng=-0.4163034 zoom=15]
[leaflet-marker lat=42.1371271 lng=-0.4163034] TEST [/leaflet-marker]

One icon on a map needs lat, lng and zoom. If you have more elements on a map, you need fitbounds in shortcode leaflet-map. And iconsize and iconanchor depend from the icon. Bozdoz wrote a documentation.

Do you have an URL so that I can help you with layerswitch?

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

Hello,

I think that I have solved problems with layerswitch, I don’t know if it was solved by importing some cs and js files. Now my code starts with:

[leaflet-map mapid="Mapa" fitbounds zoom="15" max_zoom="19" lat=42.1380799 lng=-0.4101852 height="600" zoomcontrol scrollwheel]

[layerswitch mapids="Satélite" providers="Esri.WorldImagery"]

But I have more problems:

1. Markers aren’t located in right ubication (you can see it in https://imgur.com/Gtn3G1F)
2. On click in marker: popup is opened far of the marker.
3. Is it possible to zoom when you click on a marker?

• This reply was modified 1 year, 4 months ago by CehWeb.

I don’t know why, now image is showed with background (they are PNG).

PNG has an option for transparency. Maybe, you created the icon not right.

Markers aren’t located in right ubication (you can see it in https://imgur.com/Gtn3G1F) On click in marker: popup is opened far of the marker.

I have an example how to use iconsize, iconAnchor, popupAnchor, tooltipAnchor.

Is it possible to zoom when you click on a marker?

No, it isn’t. But if you have many markers then it is possible to cluster the markers.

Is it possible to zoom when you click on a marker?

I’ll put it on the wish list.

Hello,

thank you, so I will test modifying these parameters and adjustying them to fix in the right location on the map.

Another question, I think that with “scrollwheel” you can zoom with the mouse, right? It worked me when I created the map, but now I have to press Ctrl + wheel. Why?

Regards.

And another doubt, with the following code:

[leaflet-marker lat=42.1395738 lng=-0.4047718 iconUrl="https://test.cabreroehijos.es/wp-content/uploads/2023/07/iconAldi.png" iconsize="45,38" iconanchor="20,50"]
<h4>Test Title</h4>
Test Street, 1
Phone: <a href="tel:123456789">123456789</a>
Schedule: Monday - Friday 09:00h - 21:00h.
[/leaflet-marker]

I get: https://imgur.com/fbfM1ol

How can I style that? With custom CSS?

In HTML I see an empty paragraph, some br’s…:

<div class="leaflet-popup-content" style="width: 270px;"><p></p><br><h4>Test Title</h4><br><p>Test Street, 1<br><br>Phone: <a href="tel:123456789">123456789</a><br><br>Schedule: Monday – Friday 09:00h – 21:00h.</p></div>

but now I have to press Ctrl + wheel.

You have Gesture Handling enabled, see https://your-domain.tld/wp-admin/admin.php?page=extensions-leaflet-map&tab=gesture

In HTML I see an empty paragraph, some br’s…:

I tested it in my testing environment (default editor) without some newlines:

[leaflet-marker lat=42.1395738 lng=-0.4047718]<h4>Test Title</h4>Test Street, 1
Phone: <a href="tel:123456789">123456789</a>
Schedule: Monday - Friday 09:00h - 21:00h.[/leaflet-marker]

The popup shows correct. I guess your editor (Elementor?) is interfering.

Hello,

I can’t access to the page that you entered, I have “scrollwheel” enabled I think. How can I disable Gesture handling? Code:

[leaflet-map mapid="Mapa" fitbounds zoom="15" max_zoom="19" lat=42.1380799 lng=-0.4101852 width="800" height="600" zoomcontrol scrollwheel]

On the other hand, I have tried to edit it with Elementor and Avada Builder, but I am not able to style as I want, I will continue doing some tests.

Thank you.

I can’t access to the page that you entered

Replace your-domain.tld with yours.

Have the editors a shortcode block? Try to use this.

Hello,

ok, problem with scrollwheel solved.

Now I have another problem, with my Avada theme, because I can’t edit pages on live with Leaflet code, and I received from support the next message: “Problem is due to the Leaflet shortcode, It is loading some scripts which are breaking Avada’s live builder.”

I use a “Code Block”, i didn’t see a shortcode block.

• This reply was modified 1 year, 4 months ago by CehWeb.

I’m sorry, I can’t help you with Avada theme, because it is not free.

Okay, and how can I adjust marker in right location?

With latitude and longitude I can’t see it good located, I tried modifying “iconanchor” values but I continue seeing it wrong.

Do you have an URL to a test page?