Expanded Preorder Export csv

Layout/default/Building/Index.php

@@ -110,9 +110,12 @@
               <a href="#" class="btn btn-success" onclick="refreshMap()"><i class="far fa-map"></i> Übersichtskarte einblenden</a>
             </div>
             <div class="row hidden" id="map-row">
-              <div id="building-map" style="height:50vh; width: 100%"></div>
-              <div class="mt-1">
-                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="centerMap()"><i class="far fa-dot-circle"></i> Zentrieren</button>
+              <div id="building-map" style="height:70vh; width: 100%"></div>
+              <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()" title="Zwischen Karte und Satellitenbild umschalten"><i class="far fa-arrow-right-arrow-left fa-fw"></i> Karte/Satellit</button>
+                </div>
               </div>
             </div>
           </div>
@@ -359,34 +362,66 @@
   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() {
+    if(currentTileset == "mapbox/streets-v12") {
+      currentTileset = "mapbox/satellite-streets-v12";
+    } else {
+      currentTileset = "mapbox/streets-v12";
+    }
+
+    console.log("renderMap");
+    renderMap(true);
+  }
   
   function refreshMap() {
     // get buildings and render map
     $('#map-link').hide();
     $('#map-row').show();
     getMapdata();
+    $([document.documentElement, document.body]).animate({
+      scrollTop: $("#building-map").offset().top - 150
+    }, 500);
   }
   
-  function renderMap() {
+  function renderMap(tilesetChangeOnly = false) {
     if(buildingMap) {
-      markers.forEach(function(m) {
-        buildingMap.removeLayer(m);
-      });
+      if(!tilesetChangeOnly) {
+        markers.forEach(function(m) {
+          buildingMap.removeLayer(m);
+        });
+      }
     } else {
       buildingMap = L.map('building-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-v11',
-      accessToken: '<?=TT_MAPBOX_TILE_API_TOKEN?>'
-    }).addTo(buildingMap);
+    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(buildingMap);
+    // remove all tilesets not currently wanted
+    tilesets.forEach(function(t) {
+      if(t != currentTileset && buildingMap.hasLayer(tileLayers[t])) {
+        buildingMap.removeLayer(tileLayers[t]); 
+      }
+    });
     
     L.MakiMarkers.accessToken = '<?=TT_MAPBOX_TILE_API_TOKEN?>';
     
-    addMarkers();
+    if(!tilesetChangeOnly) {
+      addMarkers();
+    }
   }
   
   
@@ -404,13 +439,13 @@
       var gps = [building.gps_lat, building.gps_long];
       all_coords.push(gps);
       
-      var icon_color = "#CB2B3E";
+      var icon_color = "#ec98a2";
       var icon_name = "home";
       
       if(building.status == "connected") {
-        icon_color = "#2AAD27";
+        icon_color = "#acf0ab";
       } else if(building.status == "pipework-done") {
-        icon_color = "#CB8427";
+        icon_color = "#ffcd8b";
       }
       
       if(building.type.match(/^(Zwei)/i)) {