M README.md → README.md

@@ -6,6 +6,8 @@ `onyx/scry` is a lightweight map annotation and location data management and sharing tool built using [leaflet](https://leafletjs.com) and [typescript](https://typescriptlang.org). It is intended as a standalone tool to generate, manage, and share simple location data in the form of points, circles, and polygons. All of these have associated titles and descriptions and can be easily imported from or exported to JSON format for easy sharing. All data is saved locally via the `localStorage` API, and the only network calls are those to retrieve either the streetmap or satellite tile data (and of course geolocation if you opt in).
 
 ## 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 @@ ## license
 
 `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).

M src/99-onyx-scry.ts → 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 @@ 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(
@@ -19,7 +21,7 @@ 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);
@@ -71,7 +73,22 @@ if (homeData) {
     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);
   }
 }
 

M static/onyx-scry.js → static/onyx-scry.js

@@ -1169,6 +1169,7 @@ }
     }
 }
 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 @@ 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 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 @@ const home = 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);
     }
 }
 init();

M static/style.css → static/style.css

@@ -263,7 +263,7 @@ }
 
 #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 @@ background: black;
   z-index: 10;
   color: white;
   padding: 0.5em;
-  width: 100%;
-  max-width: fit-content;
+  width: auto;
+  max-width: 100vw;
 }
 
 #info-content, #cancel-msg, #confirm-msg {
@@ -338,7 +338,7 @@ 
 #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 @@ position: fixed;
   z-index: 2;
   top: 0;
   right: 0;
+  text-align: right;
+  background: rgba(0,0,0,0.8) !important;
+  color: white !important;
 }
-
-@media screen and (max-width: 600px) {
+.leaflet-control-attribution a {
+  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 @@ #confirm-container,
   #info-container {
     font-size: 80%;
   }
-}+}