[GIS] Leaflet.locate: permission error on different browsers

browsergeolocationleaflet

I inserted a simple button for geolocation into a Leaflet-generated map by adding

L.control.locate().addTo(map);

into my HTML file.

In Chrome and Firefox it works great, Safari and Internet Expolorer are rejecting the function by showing following error:

english: "geolocation error: This website does not have permission to use the Geolocation API"

german: "geolocation error: Diese Website verfügt nicht über die Berechtigung zur Verwendung der Geolocation-API"

Do you have any idea, where this issue can come from?
I've tried to use the functionality on different browsers on different devices (desktop and mobile), all with the same error. I've checked the location permissions on the devices as well.

Best Answer

In Firefox you can give the geolocation permission per website:

I assume that it is the same for other browsers. So while the browser itself can have permission to access the Geolocation API, it could be blocked for your specific application.

PS.: I wonder if Internet Explorer even supports the Geolocation API. For Safari, this support article could help.

Related Solutions

[GIS] Leaflet features work on some browsers, but not all

Loading the map in Chrome gives the following error (Press F12 to see the errors in your local browser):

Mixed Content: The page at 'https://samdotson1992.github.io/KY_beer/' was loaded over HTTPS, but requested an insecure script 'http://www.domoritz.de/leaflet-locatecontrol/dist/L.Control.Locate.min.js'. This request has been blocked; the content must be served over HTTPS.

Despite using a https link for including the locatecontrol plugin, it obviously redirects to a non-https site of the developer shown in the error message. While Chrome is more strict about not loading the content, e.g. Edge just shows a warning message in the developer console but still loads the files.

As a result the functions from this plugin are not available in Chrome, which results in a broken map.

You can fix that by including the plugin via e.g. the JsDelivr CDN (which actually is the preferred way mentioned on the github page of the plugin). You need to adapt just the lines 22 and 24 in your index.html like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.62.0/dist/L.Control.Locate.min.css" />
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.62.0/src/L.Control.Locate.min.js" charset="utf-8"></script>

[GIS] Displaying markers within viewport for different country in google map

add this --> var bounds = new google.maps.LatLngBounds();

before this line --> for (var i = 0; i < locations.length; i++) {

add this --> bounds.extend(marker.position);

before this line --> bounds.extend(marker.position);

add this --> map.fitBounds(bounds);

at end } of --> function initialize(response) {

Best Answer

Related Solutions

[GIS] Leaflet features work on some browsers, but not all

[GIS] Displaying markers within viewport for different country in google map

Related Question