all repos — onyx @ d42b5fcd3da322a63c8525b0b462426517bb5670

minimal map annotation and location data sharing tool

detect location if home not set and offer to set home, add go-home button
Iris Lightshard nilix@nilfm.cc
PGP Signature 
-----BEGIN PGP SIGNATURE-----

iQIzBAABCAAdFiEEkFh6dA+k/6CXFXU4O3+8IhROY5gFAmL5y48ACgkQO3+8IhRO
Y5iPhA/9HDuVWDrc16cviA8TmUxRXVL162fLSpv8DV2lUExqNhU5S5slq+zsGJkq
6XwSKNrKlu38aT7SxXmooRgpHld8pIdQ3UfN0niVvgewfp0sE1EwO9MYI35igAMw
VBqAxR6NrTWZuuUok6VY0xBkqIEWZJrg9+0Pt6QmrI0b+Zki0sbb1i4M75rT3BRV
fv6nb1BuTc60UPrjANxuwlzJtShHnvlsfS3bPbPHj3a6LrTu70En4yTgycITjqpB
qirM+aW9ujzS/LOB7qnH4+nj+fiJpy2KILytQOToSvgk0TycIn/bLNhd2E3itzHc
UsQ0Ka4Towvdv8id6d+xWl3+MgNIXcVuSAQMtUCpC3P5HAyssSQg+VR2EwR7TlnH
nHaQrA83iCWZjsWum5k36hE83tRzFpphfkrDzJJbAOvYf3toyux1LgPx2c2UsVuu
zpe/oWjzORvwG31LYVQ0l5x7X45jAZQSNZA5zoz+d101iPkkejtcBGdmIZDscOi5
JbxZFmcumvzFKEkc7dQZQ/T2/cCF527n99mTQXoAVylqCE+DjUERJsJlRnImICQO
qTuhzN13y1Urou7kxfQuuTgsmmQglj88MtDEXm24M9VAcSWT0x/IctuMc+swnq6E
Cms863wHccREKXuWaR2vVzm8au+YReFlKGIeKzqUUBX7DHITYiQ=
=U1Mk
-----END PGP SIGNATURE-----
commit

d42b5fcd3da322a63c8525b0b462426517bb5670

parent

3f399947f13876b0533979e56e9368bce0d73e36

4 files changed, 111 insertions(+), 4 deletions(-)

jump to
M src/40-handlers.ts → src/40-handlers.ts 
@@ -309,4 +309,24 @@ TileLayerWrapper.enableOnly("satelliteLayer", self.map);
       }
     }
   }
+  
+  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);
+        }
+      }
+    }
+  }
 }
M src/99-onyx-scry.ts → 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 @@ 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);

@@ -43,8 +45,41 @@ 
   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();
M static/index.html → static/index.html 
@@ -18,11 +18,12 @@ </noscript>
 <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>
M static/onyx-scry.js → static/onyx-scry.js 
@@ -692,12 +692,31 @@ TileLayerWrapper.enableOnly("satelliteLayer", self.map);
             }
         }
     }
+    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 &copy; OpenStreetMap"

@@ -713,12 +732,44 @@ overlays.polygons.forEach(m => m.add(map));
     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();