detect location if home not set and offer to set home, add go-home button

src/40-handlers.ts

@@ -309,4 +309,24 @@ class MapHandler {
       }
     }
   }
+  
+  static setHome(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      localStorage.setItem("home", JSON.stringify(self.map.getCenter()));
+    }
+  }
+  
+  static goHome(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      const homeData = localStorage.getItem("home");
+      if (homeData) {
+        const home = <Point>JSON.parse(homeData);
+        if (home) {
+          self.map.setView(home, 13);
+        }
+      }
+    }
+  }
 }

src/99-onyx-scry.ts

@@ -1,8 +1,9 @@
 
 function init(): void {
   let overlays: OverlayState = OverlayState.load() ?? new OverlayState(); 
-  const map = L.map('map').setView([35.6653, -105.9507], 13);
+  const map = L.map('map').fitWorld();
-
+  // old default zoom was 13
+  
   const streetLayer = TileLayerWrapper.constructLayer(
     "streetLayer",
     L.tileLayer(
@@ -36,6 +37,7 @@ function init(): void {
 
   MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);
   
+  MapHandler.setButtonClick("home-btn", MapHandler.goHome);
   MapHandler.setButtonClick("addPoint-btn", MapHandler.markerCollect);
   MapHandler.setButtonClick("addCircle-btn", MapHandler.circleCollect);
   MapHandler.setButtonClick("addPolygon-btn", MapHandler.polygonCollect);
@@ -43,8 +45,41 @@ function init(): void {
   MapHandler.setButtonClick("save-btn", MapHandler.overlaySave);
   MapHandler.setButtonClick("clear-btn", MapHandler.overlayClear);
   MapHandler.setButtonClick("restore-btn", MapHandler.overlayReset);
+  MapHandler.setButtonClick("menu-btn", ()=>{});
   
   MapHandler.setButtonClick("tiles-btn", MapHandler.swapTiles);
+  
+  map.on("locationfound", ()=> {
+    const okCancel = modals.okCancel;
+    okCancel.setMsg("Set Home to current location?");
+    const okBtn = okCancel.okBtn();
+    if (okBtn) {
+      okBtn.onclick = (e: any) => {
+        okCancel.setVisible(false);
+        MapHandler.setHome(null);
+      }
+    }
+    const cancelBtn = okCancel.cancelBtn();
+    if (cancelBtn) {
+      cancelBtn.onclick = () => {
+        okCancel.setVisible(false);
+      }
+    }
+  });
+  
+  map.on("locationerror", ()=> {
+    const info = modals.info;
+    info.setMsg("Could not get location data");
+    info.setVisible(true);
+  });
+  
+  const homeData = localStorage.getItem("home");
+  if (homeData) {
+    const home = <Point>JSON.parse(homeData);
+    map.setView(home, 13);
+  } else {
+    map.locate({setView: true, maxZoom: 13});
+  }
 }
 
 init();

static/index.html

@@ -18,11 +18,12 @@
 <div id="map"></div>
 
 <div id="mapControls">
+  <button id="home-btn">&#8962;</button>
   <button id="addPoint-btn">&middot;</button>
   <button id="addCircle-btn">&compfn;</button>
   <button id="addPolygon-btn">&diamond;</button>
   <div id="subControls">
-    <button id="tiles-btn">&Colon;</button>
+    <button id="tiles-btn">&#10070;</button>
   <button id="save-btn">&darr;</button>
   <button id="clear-btn">x</button>
   <button id="restore-btn">&olarr;</button>

static/onyx-scry.js

@@ -692,12 +692,31 @@ class MapHandler {
             }
         }
     }
+    static setHome(e) {
+        const self = MapHandler.instance;
+        if (self) {
+            localStorage.setItem("home", JSON.stringify(self.map.getCenter()));
+        }
+    }
+    static goHome(e) {
+        const self = MapHandler.instance;
+        if (self) {
+            const homeData = localStorage.getItem("home");
+            if (homeData) {
+                const home = JSON.parse(homeData);
+                if (home) {
+                    self.map.setView(home, 13);
+                }
+            }
+        }
+    }
 }
 MapHandler.instance = null;
 function init() {
     var _a;
     let overlays = (_a = OverlayState.load()) !== null && _a !== void 0 ? _a : new OverlayState();
-    const map = L.map('map').setView([35.6653, -105.9507], 13);
+    const map = L.map('map').fitWorld();
+    // old default zoom was 13
     const streetLayer = TileLayerWrapper.constructLayer("streetLayer", L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 19,
         attribution: "street map tiles © OpenStreetMap"
@@ -713,12 +732,44 @@ function init() {
     overlays.polyline.add(map);
     const modals = new ModalCollection(new CreateOverlayModal(), new CancelModal(), new OKCancelModal(), new InfoModal());
     MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);
+    MapHandler.setButtonClick("home-btn", MapHandler.goHome);
     MapHandler.setButtonClick("addPoint-btn", MapHandler.markerCollect);
     MapHandler.setButtonClick("addCircle-btn", MapHandler.circleCollect);
     MapHandler.setButtonClick("addPolygon-btn", MapHandler.polygonCollect);
     MapHandler.setButtonClick("save-btn", MapHandler.overlaySave);
     MapHandler.setButtonClick("clear-btn", MapHandler.overlayClear);
     MapHandler.setButtonClick("restore-btn", MapHandler.overlayReset);
+    MapHandler.setButtonClick("menu-btn", () => { });
     MapHandler.setButtonClick("tiles-btn", MapHandler.swapTiles);
+    map.on("locationfound", () => {
+        const okCancel = modals.okCancel;
+        okCancel.setMsg("Set Home to current location?");
+        const okBtn = okCancel.okBtn();
+        if (okBtn) {
+            okBtn.onclick = (e) => {
+                okCancel.setVisible(false);
+                MapHandler.setHome(null);
+            };
+        }
+        const cancelBtn = okCancel.cancelBtn();
+        if (cancelBtn) {
+            cancelBtn.onclick = () => {
+                okCancel.setVisible(false);
+            };
+        }
+    });
+    map.on("locationerror", () => {
+        const info = modals.info;
+        info.setMsg("Could not get location data");
+        info.setVisible(true);
+    });
+    const homeData = localStorage.getItem("home");
+    if (homeData) {
+        const home = JSON.parse(homeData);
+        map.setView(home, 13);
+    }
+    else {
+        map.locate({ setView: true, maxZoom: 13 });
+    }
 }
 init();