From 297f1943489667ea63c555a85d83a06b9bb226f1 Mon Sep 17 00:00:00 2001
From: jperon <cataclop@hotmail.com>
Date: Fri, 15 Mar 2024 00:09:40 +0100
Subject: [PATCH] Make map source configurable

---
 map/index.html | 11 +++++++++++
 map/page.js    | 18 +++++++++++++++---
 map/screen.css |  3 +++
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/map/index.html b/map/index.html
index 3eda7da..2e6600a 100755
--- a/map/index.html
+++ b/map/index.html
@@ -22,6 +22,17 @@
         <input type="checkbox" id="cbxMode">
         <span id="lblText">All locations</span>
       </label>
+      <br/>
+      <table>
+        <tr>
+          <td> <label id="lblSource" for="mapSource"> Source </label> </td>
+          <td> <input id="mapSource"> </td>
+        </tr>
+        <tr>
+          <td> <label id="lblCopyright" for="mapCopyright"> Copyright </label> </td>
+          <td> <input id="mapCopyright"> </td>
+        </tr>
+      </table>
     </div>
   </body>
 </html>
diff --git a/map/page.js b/map/page.js
index 07d3265..df8d29f 100755
--- a/map/page.js
+++ b/map/page.js
@@ -8,6 +8,8 @@ let selectedTableId = null;
 let selectedRowId = null;
 let selectedRecords = null;
 let mode = 'multi';
+let mapSource = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';
+let mapCopyright = 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012';
 // Required, Label value
 const Name = "Name";
 // Required
@@ -214,9 +216,7 @@ function updateMap(data) {
   //    Old source was natgeo world map, but that only has data up to zoom 16
   //    (can't zoom in tighter than about 10 city blocks across)
   //
-  const tiles = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
-  attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
-  });
+  const tiles = L.tileLayer(mapSource, { attribution: mapCopyright });
 
   const error = document.querySelector('.error');
   if (error) { error.remove(); }
@@ -430,6 +430,12 @@ function onEditOptions() {
       updateMode();
     }
   }
+  [ "mapSource", "mapCopyright" ].forEach((opt) => {
+    const ipt = document.getElementById(opt)
+    ipt.onchange = async (e) => {
+      await grist.setOption(opt, e.target.value);
+    }
+  })
 }
 
 const optional = true;
@@ -453,4 +459,10 @@ grist.onOptions((options, interaction) => {
   if (newMode != mode && lastRecords) {
     updateMode();
   }
+  const newSource = options?.mapSource ?? mapSource;
+  mapSource = newSource;
+  document.getElementById("mapSource").value = mapSource;
+  const newCopyright = options?.mapCopyright ?? mapCopyright;
+  mapCopyright = newCopyright
+  document.getElementById("mapCopyright").value = mapCopyright;
 });
diff --git a/map/screen.css b/map/screen.css
index d925c04..e83eb3f 100644
--- a/map/screen.css
+++ b/map/screen.css
@@ -35,6 +35,9 @@ html, body, #map {
   display: none;
   background: white;
 }
+#settings > * {
+  color: black;
+}
 #btnClose {
   font-size: small;
   margin-bottom: 5px;