last little tweak to mobile sizing, style attribution area and add link to readme; update readme with mention of PWA

README.md

@@ -6,6 +6,8 @@
 
 ## usage
 
+__note__: On mobile, for best experience you should "install to home screen" or "create shortcut" from your browser of choice, so that you can use `onyx/scry` as an app without the browser UI getting in the way.
+
 When you launch the application for the first time (and subsequent times if you don't set `home`), it will ask for your current location to set the `home` point. If you deny permission or it can't determinte your location, you can set it later via the menu and the map will zoom out to fit the entire Earth.
 
 Along the bottom is the control bar, containing the following buttons:
@@ -68,4 +70,4 @@ Deploying is simple: just serve the `static` directory.
 
 `onyx/scry` is distributed under the [MIT license](./LICENSE) - basically do whatever you want with it but leave my name on it.
 
-`leaflet` is distributed under a similar [2-clause BSD license](./LEAFLET-LICENSE).
+`leaflet` is distributed under a similar [2-clause BSD license](./LEAFLET-LICENSE).

src/99-onyx-scry.ts

@@ -1,3 +1,5 @@
+const helpLink = "<br><a href='https://nilfm.cc/git/onyx-scry/about'>ONYX/scry manual</a>";
+
 
 function init(): void {
   let overlays: OverlayState = OverlayState.load() ?? new OverlayState(); 
@@ -10,7 +12,7 @@ function init(): void {
       'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
       {
         maxZoom: 19,
-        attribution: "street map data &copy; OpenStreetMap contributors"
+        attribution: "street map data &copy; OpenStreetMap contributors" + helpLink
       }));
       
   const satelliteLayer = TileLayerWrapper.constructLayer(
@@ -19,7 +21,7 @@ function init(): void {
       'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
       {
         maxZoom: 19,
-        attribution: "satellite data &copy; Esri"
+        attribution: "satellite data &copy; Esri" + helpLink
       }));
       
   TileLayerWrapper.enableOnly("streetLayer", map);
@@ -71,7 +73,22 @@ function init(): void {
     const home = <Point>JSON.parse(homeData);
     map.setView(home, 13);
   } else {
-    map.locate({setView: true, maxZoom: 13});
+    const okCancel = modals.okCancel;
+    const okBtn = okCancel.okBtn();
+    if (okBtn) {
+      okBtn.onclick = () => {
+        modals.closeAll();
+        map.locate({setView: true, maxZoom: 13});     
+      }
+    }
+    const cancelBtn = okCancel.cancelBtn();
+    if (cancelBtn) {
+      cancelBtn.onclick = () => {
+        modals.closeAll();
+      }
+    }
+    okCancel.setMsg("Would you like to use location data to set Home?");
+    okCancel.setVisible(true);
   }
 }
 

static/onyx-scry.js

@@ -1169,6 +1169,7 @@ class MapHandler {
     }
 }
 MapHandler.instance = null;
+const helpLink = "<br><a href='https://nilfm.cc/git/onyx-scry/about'>ONYX/scry manual</a>";
 function init() {
     var _a;
     let overlays = (_a = OverlayState.load()) !== null && _a !== void 0 ? _a : new OverlayState();
@@ -1176,11 +1177,11 @@ function init() {
     // 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 data &copy; OpenStreetMap contributors"
+        attribution: "street map data &copy; OpenStreetMap contributors" + helpLink
     }));
     const satelliteLayer = TileLayerWrapper.constructLayer("satelliteLayer", L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
         maxZoom: 19,
-        attribution: "satellite data &copy; Esri"
+        attribution: "satellite data &copy; Esri" + helpLink
     }));
     TileLayerWrapper.enableOnly("streetLayer", map);
     overlays.markers.forEach(m => m.add(map));
@@ -1216,7 +1217,22 @@ function init() {
         map.setView(home, 13);
     }
     else {
-        map.locate({ setView: true, maxZoom: 13 });
+        const okCancel = modals.okCancel;
+        const okBtn = okCancel.okBtn();
+        if (okBtn) {
+            okBtn.onclick = () => {
+                modals.closeAll();
+                map.locate({ setView: true, maxZoom: 13 });
+            };
+        }
+        const cancelBtn = okCancel.cancelBtn();
+        if (cancelBtn) {
+            cancelBtn.onclick = () => {
+                modals.closeAll();
+            };
+        }
+        okCancel.setMsg("Would you like to use location data to set Home?");
+        okCancel.setVisible(true);
     }
 }
 init();

static/style.css

@@ -263,7 +263,7 @@ body {
 
 #cancel-container, #confirm-container, #info-container {
   position: fixed;
-  bottom: min(8vh, 11vw);
+  bottom: min(9vh, 12vw);
   display: none;
   left: 50%;
   transform: translateX(-50%);
@@ -271,8 +271,8 @@ body {
   z-index: 10;
   color: white;
   padding: 0.5em;
-  width: 100%;
+  width: auto;
-  max-width: fit-content;
+  max-width: 100vw;
 }
 
 #info-content, #cancel-msg, #confirm-msg {
@@ -338,7 +338,7 @@ body {
 #overlays-menu-container .multiBtn-container {
   text-align: center;
   grid-row: 2;
-  margin-bottom: 3em;
+  margin-bottom: min(9vh, 12vw);
 }
 
 #overlays-menu-container button {
@@ -416,9 +416,17 @@ body {
   z-index: 2;
   top: 0;
   right: 0;
+  text-align: right;
+  background: rgba(0,0,0,0.8) !important;
+  color: white !important;
 }
-
+.leaflet-control-attribution a {
-@media screen and (max-width: 600px) {
+  color: #1f9b92 !important;
+}
+.leaflet-control-attribution a:hover {
+  color: white !important;
+}
+@media screen and (max-width: 600px), screen and  (max-height: 600px) {
   body {
     font-size: 75%;
   }
@@ -428,4 +436,4 @@ body {
   #info-container {
     font-size: 80%;
   }
-}
+}