Geolocation

Resolved

(@killiansantos)

Hello,
I would like to add the following plugin https://github.com/domoritz/leaflet-locatecontrol to allow users to be geolocated on the map.

I tried to start from the FAQ which would give something like this?

functions.php

add_action('leaflet_map_loaded', 'fs_leaflet_loaded');
function fs_leaflet_loaded() {
  wp_enqueue_script('locate_leaflet', 'https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.74.0/dist/L.Control.Locate.min.js', Array('wp_leaflet_map'), '1.0', true);
  wp_enqueue_style('locate_leaflet_styles', 'https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.74.0/dist/L.Control.Locate.min.css');
}

on the pages

<script>
L.control.locate({
    strings: {
        title: "Show me where I am, yo!"
    }
}).addTo(map);
</script>

Am I missing something?

Thanks for your help.

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Contributor hupe13
(@hupe13)

11 months, 1 week ago
Yes, some more custom js:
```
<script>
window.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];
window.WPLeafletMapPlugin.push(function () {
  var map = window.WPLeafletMapPlugin.getCurrentMap();
  L.control.locate({
    strings: {
      title: "Show me where I am, yo!"
    }
  }).addTo(map);
});
</script>
```
(not tested)
- This reply was modified 11 months, 1 week ago by hupe13.
Thread Starter killiansantos
(@killiansantos)

11 months, 1 week ago

Hello @hupe13,

Thank you for your help.

I tried to add the code you kindly suggested. I get the following error in the console: “TypeError: L.control.locate is not a function” with the following file as reference: /wp-content/plugins/leaflet-map/scripts/construct-leaflet-map.min.js?ver=3.0.4

Any idea ?

Plugin Contributor hupe13
(@hupe13)

11 months, 1 week ago

Open the Developer Console and look at any errors.

Plugin Contributor hupe13
(@hupe13)

11 months, 1 week ago

I tested it now, it works for me principally, but not perfect. Do you have an URL to your testpage?

Thread Starter killiansantos
(@killiansantos)

11 months, 1 week ago

Thank you very much for your help @hupe13. Back in front of my computer, here is a test url: https://url.dev/ZXtVfSL/

The map concerned is the main map (not the small ones).

Thread Starter killiansantos
(@killiansantos)

11 months, 1 week ago

I found the source of the problem. By disabling the multiple small cards, the button appeared… it works fine.

I thank you again for your precious help @hupe13 🙂

nonopinspins
(@nonopinspins)

6 months ago

Hello,
Sorry to come back to this topic, but I can’t add geolocation to my map.
Can you explain which codes should be added where please? My skills in this area very weak, and I need to be guided.
Thanks !
Thread Starter killiansantos
(@killiansantos)

6 months ago
Hello @nonopinspins,

Simply add this code to the functions.php file of your theme:
```
add_action('leaflet_map_loaded', 'fs_leaflet_loaded');
function fs_leaflet_loaded() {
  wp_enqueue_script('locate_leaflet', 'https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.74.0/dist/L.Control.Locate.min.js', Array('wp_leaflet_map'), '1.0', true);
  wp_enqueue_style('locate_leaflet_styles', 'https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.74.0/dist/L.Control.Locate.min.css');
}
```
And this one on the page where you want to load your map under the shortcode [leaflet-map] :
```
<script>
window.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];
window.WPLeafletMapPlugin.push(function () {
  var map = window.WPLeafletMapPlugin.getCurrentMap();
  L.control.locate({
    strings: {
      title: "Me géolocaliser sur la carte"
    }
  }).addTo(map);
});
</script>
```
I hope this helps!
nonopinspins
(@nonopinspins)

6 months ago

It works ! Thank very much @killiansantos.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Geolocation’ is closed to new replies.

Views