Small tweaks

Logic/Actors/GeoLocationHandler.ts

@@ -74,6 +74,33 @@ export default class GeoLocationHandler extends UIElement {
         })
     }
 
+    InnerRender(): string {
+        if (this._hasLocation.data) {
+            return Svg.crosshair_blue_img;
+        }
+        if (this._isActive.data) {
+            return Svg.crosshair_blue_center_img;
+        }
+
+        return Svg.crosshair_img;
+    }
+
+    InnerUpdate(htmlElement: HTMLElement) {
+        super.InnerUpdate(htmlElement);
+
+        const self = this;
+        htmlElement.onclick = function () {
+            self.StartGeolocating(19);
+        }
+
+        htmlElement.oncontextmenu = function (e) {
+            self.StartGeolocating(15);
+            e.preventDefault();
+            return false;
+        }
+
+    }
+
     private init() {
         this.ListenTo(this._hasLocation);
         this.ListenTo(this._isActive);
@@ -111,7 +138,12 @@ export default class GeoLocationHandler extends UIElement {
                 );
             }
 
-            const color = getComputedStyle(document.body).getPropertyValue("--catch-detail-color")
+            let color = "#1111cc";
+            try {
+                color = getComputedStyle(document.body).getPropertyValue("--catch-detail-color")
+            } catch (e) {
+                console.error(e)
+            }
             const icon = L.icon(
                 {
                     iconUrl: Img.AsData(Svg.crosshair.replace(/#000000/g, color)),
@@ -128,6 +160,8 @@ export default class GeoLocationHandler extends UIElement {
             self._marker = newMarker;
         });
 
+        try {
+
             navigator?.permissions?.query({name: 'geolocation'})
                 ?.then(function (status) {
                     console.log("Geolocation is already", status)
@@ -140,6 +174,10 @@ export default class GeoLocationHandler extends UIElement {
                     }
                 });
 
+        } catch (e) {
+            console.log(e)
+            self.StartGeolocating()
+        }
         if (this._previousLocationGrant.data === "granted") {
             this._previousLocationGrant.setData("");
             self.StartGeolocating();
@@ -148,39 +186,33 @@ export default class GeoLocationHandler extends UIElement {
         this.HideOnEmpty(true);
     }
 
-    InnerRender(): string {
+    private locate() {
-        if (this._hasLocation.data) {
-            return Svg.crosshair_blue_img;
-        }
-        if (this._isActive.data) {
-            return Svg.crosshair_blue_center_img;
-        }
-
-        return Svg.crosshair_img;
-    }
-
-    InnerUpdate(htmlElement: HTMLElement) {
-        super.InnerUpdate(htmlElement);
-
         const self = this;
-        htmlElement.onclick = function () {
+        const map: any = this._leafletMap.data;
-            self.StartGeolocating(19);
-        }
 
-        htmlElement.oncontextmenu = function (e) {
+        if (navigator.geolocation) {
-            self.StartGeolocating(15);
+            navigator.geolocation.getCurrentPosition(function (position) {
-            e.preventDefault();
+                self._currentGPSLocation.setData({
-            return false;
+                    latlng: [position.coords.latitude, position.coords.longitude],
+                    accuracy: position.coords.accuracy
+                });
+            }, function () {
+                console.warn("Could not get location with navigator.geolocation")
+            });
+            return;
+        } else {
+            map.findAccuratePosition({
+                maxWait: 10000, // defaults to 10000
+                desiredAccuracy: 50 // defaults to 20
+            });
         }
-
     }
 
-   
     private StartGeolocating(zoomlevel = 19, zoomToGPS = true) {
         const self = this;
         console.log("Starting geolocation")
+
         this._lastUserRequest = zoomToGPS ? new Date() : new Date(0);
-        const map: any = this._leafletMap.data;
         if (self._permission.data === "denied") {
             self._previousLocationGrant.setData("");
             return "";
@@ -193,10 +225,7 @@ export default class GeoLocationHandler extends UIElement {
 
 
         console.log("Searching location using GPS")
-        map.findAccuratePosition({
+        this.locate();
-            maxWait: 10000, // defaults to 10000
-            desiredAccuracy: 50 // defaults to 20
-        });
 
 
         if (!self._isActive.data) {
@@ -207,11 +236,7 @@ export default class GeoLocationHandler extends UIElement {
                     console.log("Not starting gps: document not visible")
                     return;
                 }
-
+                this.locate();
-                map.findAccuratePosition({
-                    maxWait: 10000, // defaults to 10000
-                    desiredAccuracy: 50 // defaults to 20
-                });
             })
         }
     }

Models/Constants.ts

@@ -2,7 +2,7 @@ import { Utils } from "../Utils";
 
 export default class Constants {
     
-    public static vNumber = "0.7.2l";
+    public static vNumber = "0.7.2n";
 
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {

Utils.ts

@@ -1,4 +1,5 @@
 import * as colors from "./assets/colors.json"
+
 export class Utils {
 
     /**
@@ -261,23 +262,6 @@ export class Utils {
         return result;
     }
 
-    private static tile2long(x, z) {
-        return (x / Math.pow(2, z) * 360 - 180);
-    }
-
-    private static tile2lat(y, z) {
-        const n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);
-        return (180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))));
-    }
-
-    private static lon2tile(lon, zoom) {
-        return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom)));
-    }
-
-    private static lat2tile(lat, zoom) {
-        return (Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)));
-    }
-
     public static MapRange<T>(tileRange: TileRange, f: (x: number, y: number) => T): T[] {
         const result: T[] = []
         for (let x = tileRange.xstart; x <= tileRange.xend; x++) {
@@ -303,7 +287,6 @@ export class Utils {
         element.click();
     }
 
-    
     public static ColourNameToHex(color: string): string {
         return colors[color.toLowerCase()] ?? color;
     }
@@ -339,6 +322,22 @@ export class Utils {
         }
         return bestColor ?? hex;
     }
+    private static tile2long(x, z) {
+        return (x / Math.pow(2, z) * 360 - 180);
+    }
+
+    private static tile2lat(y, z) {
+        const n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);
+        return (180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))));
+    }
+
+    private static lon2tile(lon, zoom) {
+        return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom)));
+    }
+
+    private static lat2tile(lat, zoom) {
+        return (Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)));
+    }
 
     private static colorDiff(c0: { r: number, g: number, b: number }, c1: { r: number, g: number, b: number }) {
         return Math.abs(c0.r - c1.r) + Math.abs(c0.g - c1.g) + Math.abs(c0.b - c1.b);

assets/themes/speelplekken/speelplekken_temp.json

@@ -24,17 +24,6 @@
   "socialImage": "",
   "defaultBackgroundId": "CartoDB.Positron",
   "layers": [
-    {
-      "id": "shadow",
-      "source": {
-        "geoJson": "https://raw.githubusercontent.com/pietervdvn/MapComplete/master/assets/themes/speelplekken/shadow.geojson",
-        "osmTags": "shadow=yes"
-      },
-      "color": "#444444",
-      "width": {
-        "render": "1"
-      }
-    },
     {
       "builtin": "play_forest",
       "override": {