wilmart

Thank you dear Camille for your reply.

I tried unsiccessfull to add the Leaflet.Locate pluguin:

1. I copied the L.Control.Locate.css and L.Control.Locate.mapbox.css files to the css folder in the wordpress theme I’m using (OnePress). (I changed the file extension from .scss to .css)

2. I copied the L.Control.Locate.js file to the js folder in the wordpress theme.

3. I copied and pasted this code in the head tag of the header.php from the wordpress theme:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@[VERSION]/dist/L.Control.Locate.min.css" />

<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@[VERSION]/dist/L.Control.Locate.min.js" charset="utf-8"></script>

(But I removed the @[VERSION]

4. I copied and pasted this code in a <script> tag just before the end of the html </body> tag in the footer.php file of my theme:

<script>
// Listen for the event.
document.addEventListener('cttm_map_loaded', function (e) {
  // cttm_map is an array of all the maps included in the page, so we loop through each.
  for (var i = 0; i < cttm_map.length; i++) {
    //We add a locate control (button) on each of our maps in the page.
    L.control.locate({keepCurrentZoomLevel:true}).addTo(cttm_map[i]);
  }
}, false);
</script>

And it is not working, I can’t even see the icon in the map

ALSO:
This is not related with the locate functin: The zoom controls (+/-) are at the “very top” of my theme, even overlaping other elements like popup window and even the header of my site.

Please, can you help me with this things? Thank you so much!!!