From 090920d3cb061aacf77d402805bbfbdab25b5f64 Mon Sep 17 00:00:00 2001
From: cixio <5869764+cixio@users.noreply.github.com>
Date: Tue, 26 Apr 2022 22:09:14 +0200
Subject: [PATCH] LiveMap updates (#298)

* LiveMap updates

- Update to Leaflet 1.8.0
- Added Topo-Map
- Bugfix: Map only changed after the second click
- better darkmode handling
- changed order of maps: (dark if darkmode enabled) -> white -> topo -> sat -> dark

* Open any MapsApp with geo:// - Link
---
 RX_FSK/data/livemap.html |  4 ++--
 RX_FSK/data/livemap.js   | 50 +++++++++++++++++++++-------------------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/RX_FSK/data/livemap.html b/RX_FSK/data/livemap.html
index cc6b669..5d471af 100644
--- a/RX_FSK/data/livemap.html
+++ b/RX_FSK/data/livemap.html
@@ -5,10 +5,10 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <link rel="stylesheet" type="text/css" href="style.css" />
-  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" />
   <script>var mapcenter=[%MAPCENTER%];</script>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+  <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
   <script src="https://unpkg.com/leaflet.marker.slideto@0.2.0/Leaflet.Marker.SlideTo.js"></script>
   <script src="livemap.js"></script>
 </head>
diff --git a/RX_FSK/data/livemap.js b/RX_FSK/data/livemap.js
index e46f76a..f3992a5 100644
--- a/RX_FSK/data/livemap.js
+++ b/RX_FSK/data/livemap.js
@@ -14,12 +14,9 @@ $(document).ready(function(){
   L.control.scale().addTo(map);
   L.control.attribution({prefix:false}).addTo(map);
   
-  const currentTheme = localStorage.getItem("theme");
-
-  var osmlight = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
-    attribution: '<div><a href="https://leafletjs.com/">Leaflet</a> &middot; Map: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a></div>',
-    minZoom: 1,
-    maxZoom: 19
+  var osmlight = L.tileLayer('https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png', {
+  	maxZoom: 18,
+  	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
   });
 
   var osmdark = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
@@ -27,35 +24,40 @@ $(document).ready(function(){
     minZoom: 1,
     maxZoom: 19
   });
+  
+  var opentopo = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
+  	maxZoom: 17,
+  	attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a><br />Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
+  });
 
   var esri = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
-    attribution: '<div><a href="https://leafletjs.com/">Leaflet</a> &middot; Map: <a href="https://www.esri.com/">Esri</a> &middot; Earthstar Geographics</div>',
-    minZoom: 1,
-    maxZoom: 20
+  	attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye,<br />Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
   });
+  
   var basemap;
-  if (currentTheme == 'dark') {
-    basemap = osmdark;
-
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    map.addLayer(osmdark);
+    basemap='osmdark';
   } else {
-    basemap = osmlight;
-    document.body.classList.toggle("light-theme");
+    map.addLayer(osmlight);
+    basemap='osmlight';
   }
-
-
-  basemap.addTo(map);
-
+  
   basemap_change = function () {
     if (basemap == 'osmlight') {
       map.removeLayer(osmlight);
-      map.addLayer(osmdark);
-      basemap = 'osmdark';
-    } else if (basemap == 'osmdark') {
-      map.removeLayer(osmlight);
+      map.addLayer(opentopo);
+      basemap = 'opentopo';
+    } else if (basemap == 'opentopo') {
+      map.removeLayer(opentopo);
       map.addLayer(esri);
       basemap = 'esri';
-    } else {
+    } else if (basemap == 'esri') {
       map.removeLayer(esri);
+      map.addLayer(osmdark);
+      basemap = 'osmdark';
+    } else {
+      map.removeLayer(osmdark);
       map.addLayer(osmlight);
       basemap = 'osmlight';
     }
@@ -440,7 +442,7 @@ map.addControl(new L.Control.Button([ { position:'topright', text: '⚙️', hre
 
     var add =
     '<br /><b>Position:</b> '+lat+',  '+lon+'<br />'+
-    '<b>Open:</b> <a href="https://www.google.de/maps/?q='+lat+', '+lon+'" target="_blank">GMaps</a> | <a href="https://www.openstreetmap.org/?mlat='+lat+'&mlon='+lon+'&zoom=15" target="_blank">OSM</a> | <a href="mapsme://map?ll='+lat+','+lon+'">Maps.me</a>';
+    '<b>Open:</b> <a href="https://www.google.de/maps/?q='+lat+', '+lon+'" target="_blank">GMaps</a> | <a href="https://www.openstreetmap.org/?mlat='+lat+'&mlon='+lon+'&zoom=15" target="_blank">OSM</a> | <a href="geo://'+lat+','+lon+'">GeoApp</a>';
 
     if (t == 'position') { return '<div class="i_position"><b>🎈 '+i.id+'</b>'+add+'</div>'; }
     if (t == 'burst') { return '<div class="i_burst"><b>💥 Predicted Burst:</b><br />'+fd(i.datetime)+' in '+mr(i.altitude)+'m'+add+'</div>'; }