Use navigator.watchPosition instead of a timed loop

Author: carlnewton

assets/view_map.js

@@ -2,6 +2,7 @@ require('leaflet');
 
 if (document.getElementById('map') !== null) {
     var location;
+    var watchPosition;
     var myLocationEnabled = false;
     var myLocationRefresh = false;
     var relativeDistanceControl;
@@ -33,6 +34,7 @@ if (document.getElementById('map') !== null) {
             viewLocationButton.id = 'view-location-btn';
             viewLocationButton.innerHTML = '<i class="bi bi-compass"></i>';
             viewLocationButton.title = document.getElementById('map').dataset.showcurrentlocation;
+            viewLocationButton.setAttribute('data-test', 'current-location-btn')
 
             return viewLocationButton;
         },
@@ -62,15 +64,10 @@ if (document.getElementById('map') !== null) {
         if (myLocationEnabled) {
             viewLocationButton.title = document.getElementById('map').dataset.hidecurrentlocation;
             document.getElementById('view-location-btn').classList.add('leaflet-btn-active');
-            navigator.geolocation.getCurrentPosition(setCurrentPosition);
+            watchPosition = navigator.geolocation.watchPosition(setCurrentPosition, failCurrentPosition);
         } else {
-            viewLocationButton.title = document.getElementById('map').dataset.showcurrentlocation;
-            document.getElementById('view-location-btn').classList.remove('leaflet-btn-active');
-
-            relativeDistanceControl.remove();
-            relativeDistanceControl = undefined;
-            myLocationRefresh = false;
-            centerOnMarker();
+            navigator.geolocation.clearWatch(watchPosition);
+            disableCurrentLocation();
         }
     }
 
@@ -87,6 +84,30 @@ if (document.getElementById('map') !== null) {
         map.panTo(latLng);
     }
 
+    function failCurrentPosition(err) {
+        switch (err.code) {
+            case 1:
+                alert(document.getElementById('map').dataset.error);
+                break;
+            default:
+                alert(err.message);
+        }
+
+        disableCurrentLocation();
+    }
+
+    function disableCurrentLocation() {
+        viewLocationButton.title = document.getElementById('map').dataset.showcurrentlocation;
+        document.getElementById('view-location-btn').classList.remove('leaflet-btn-active');
+
+        if (relativeDistanceControl !== undefined) {
+            relativeDistanceControl.remove();
+            relativeDistanceControl = undefined;
+        }
+        myLocationRefresh = false;
+        centerOnMarker();
+    }
+
     function setCurrentPosition(position) {
         if (!myLocationEnabled) {
             return;
@@ -127,6 +148,7 @@ if (document.getElementById('map') !== null) {
                     distanceIndicator.id = 'distanceIndicator';
                     distanceIndicator.title = document.getElementById('map').dataset.showcurrentlocation;
                     distanceIndicator.innerHTML = printDistance(map.distance(currentLatLng, latLng));
+                    distanceIndicator.setAttribute('data-test', 'distance-indicator')
 
                     return distanceIndicator;
                 },
@@ -145,10 +167,6 @@ if (document.getElementById('map') !== null) {
 
         line = L.polyline([latLng, currentLatLng], { color: 'white', weight: 6, dashArray: '10,14', className: 'location-path' });
         line.addTo(map);
-
-        setTimeout(function() {
-            navigator.geolocation.getCurrentPosition(setCurrentPosition);
-        }, 5000);
     }
 
     function printDistance(meters) {

templates/view_post.html.twig

@@ -95,6 +95,7 @@
                         data-measurementtype="{{ setting('locationMeasurement') }}"
                         data-measurement="{{ (setting('locationMeasurement') == 'km') ? 'measurement_units.kilometers.label.short' | trans : 'measurement_units.miles.label' | trans }}"
                         data-away="{{ 'measurement_units.away' | trans }}"
+                        data-error="{{ 'map.validations.location_disabled' | trans }}"
                     ></div>
                 </div>
             </div>

translations/messages.en.yaml

@@ -322,6 +322,7 @@ map:
     invalid_location: "You must choose a valid location"
     invalid_location_size: "You must choose a valid location size"
     out_of_bounds: "The location can only be set inside the bounds of this Habitat"
+    location_disabled: "You need to enable access to your location to do that"
 
 user_settings:
   title: "Settings"

translations/messages.it.yaml

@@ -322,6 +322,7 @@ map:
     invalid_location: "Devi scegliere una posizione valida"
     invalid_location_size: "Devi scegliere una dimensione della posizione valida"
     out_of_bounds: "La posizione può essere impostata solo all'interno dei confini di questo Habitat"
+    location_disabled: "Devi abilitare l'accesso alla tua posizione per farlo"
 
 user_settings:
   title: "Impostazioni"