From 02e31069bf70b8f8c69b349b48a41354032dc3cf Mon Sep 17 00:00:00 2001
From: Frank Schubert <fronk@fronk.at>
Date: Wed, 15 Mar 2023 13:05:34 +0100
Subject: [PATCH] Removing old tilelayer from map when switching

---
 Layout/default/Preorder/Index.php | 34 +++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/Layout/default/Preorder/Index.php b/Layout/default/Preorder/Index.php
index e776eafb8..629b80f37 100644
--- a/Layout/default/Preorder/Index.php
+++ b/Layout/default/Preorder/Index.php
@@ -140,7 +140,7 @@
               <div class="row mt-1">
                 <div class="col">
                   <button type="button" class="btn btn-sm btn-outline-secondary" onclick="centerMap()"><i class="far fa-dot-circle fa-fw"></i> Zentrieren</button>
-                  <button type="button" class="btn btn-sm btn-outline-success" onclick="toggleTileset()"><i class="far fa-arrow-right-arrow-left fa-fw"></i> Karte/Satellit</button>
+                  <button type="button" class="btn btn-sm btn-outline-success" onclick="toggleTileset()" title="Zwischen Karte und Satellitenbild umschalten"><i class="far fa-arrow-right-arrow-left fa-fw"></i> Karte/Satellit</button>
                 </div>
               </div>
             </div>
@@ -309,6 +309,8 @@
       var markers = [];
       var markerState = true;
       var mapCenterPos = [<?=TT_PLACEHOLDER_GPS_LAT?>, <?=TT_PLACEHOLDER_GPS_LONG?>];
+      var tileLayers = [];
+      var tilesets = ["mapbox/streets-v12", "mapbox/satellite-streets-v12"];
       var currentTileset = "mapbox/streets-v12";
       
       function toggleTileset() {
@@ -343,16 +345,26 @@
           preorderMap = L.map('preorder-map').setView([<?=TT_PLACEHOLDER_GPS_LAT?>, <?=TT_PLACEHOLDER_GPS_LONG?>], 12);
         }
         
-        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
-          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
-          minZoom: 4,
-          maxZoom: 22,
-          //id: 'mapbox/streets-v12',
-          //id: 'mapbox/satellite-streets-v12',
-          id: currentTileset,
-          accessToken: '<?=TT_MAPBOX_TILE_API_TOKEN?>'
-        }).addTo(preorderMap);
-
+        if(!(currentTileset in tileLayers)) {
+          tileLayers[currentTileset] = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+            minZoom: 6,
+            maxZoom: 22,
+            id: currentTileset,
+            accessToken: '<?=TT_MAPBOX_TILE_API_TOKEN?>'
+          });
+        }
+        
+        
+        tileLayers[currentTileset].addTo(preorderMap);
+        // remove previous tileset from map
+        tilesets.forEach(function(t) {
+          if(t != currentTileset && preorderMap.hasLayer(tileLayers[t])) {
+            // remove all tilesets not currently wanted
+            preorderMap.removeLayer(tileLayers[t]);
+          }
+        });
+        
         L.MakiMarkers.accessToken = '<?=TT_MAPBOX_TILE_API_TOKEN?>';
         
         if(!tilesetChangeOnly) {