Added map to Building/Index

Layout/default/Building/Index.php

@@ -90,12 +90,25 @@
                   <button type="submit" class="btn btn-primary">Filter anwenden</button>
                   <a class="btn btn-secondary" href="<?=self::getUrl("Building")?>">Filter zurücksetzen</a>
                 </div>
+                <!--<div class="col">
+                  <button class="btn btn-info" type="button" onclick="refreshMap()"><i class="far fa-map"></i> Auf Karte anzeigen</button>
+                </div>-->
               </div>
             </form>
-            
+
           </div>
         </div>
         
+        <div class="card">
+          <div class="card-body">
+            <div class="row col" id="map-link">
+              <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>
+          </div>
+        </div>
         
         <div class="card">
           <div class="card-body mb-3">
@@ -331,8 +344,8 @@
     </div>
 
 
-
 <script type="text/javascript">
+  
   function toggleBuilding(id) {
     $('#building-detail-' + id).toggle();
     if($('#building-detail-' + id).is(":hidden")) {
@@ -374,12 +387,106 @@
       toggleTerminationControl(id, type);
     },
     'json');
-    
-    
-    
   }
 
+  /*
+   * Globals for map display
+   */
+  
+  var buildingMap;
+  var buildings = [];
+  var markers = [];
+  var markerState = true;
+  var mapCenterPos = [<?=TT_PLACEHOLDER_GPS_LAT?>, <?=TT_PLACEHOLDER_GPS_LONG?>];
+  
+  function refreshMap() {
+    // get buildings and render map
+    $('#map-link').hide();
+    $('#map-row').show();
+    getMapdata();
+  }
+  
+  function renderMap() {
+    if(buildingMap) {
+      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: 12,
+      maxZoom: 22,
+      id: 'mapbox/streets-v11',
+      accessToken: '<?=TT_MAPBOX_TILE_API_TOKEN?>'
+    }).addTo(buildingMap);
+    
+    addMarkers();
+  }
+  
+  function addMarkers() {
+    if(!Array.isArray(buildings) | !buildings.length) {
+      return false;
+    }
+    // draw markers and calculate center position
+    var all_coords = [];
+    buildings.forEach(function(building) {
+      var gps = [building.gps_lat, building.gps_long];
+      all_coords.push(gps);
+      var marker = L.marker(gps).addTo(buildingMap);
+      markers[building.id] = marker;
+    });
+    
+    console.log(all_coords);
+    // calculate center position
+    var center_pos = GetCenterFromDegrees(all_coords);
+    console.log(center_pos);
+    buildingMap.setView(center_pos, 12);
+    
+    return true;
+  }
+  
+  // gets buildings and calls renderMap()
+  function getMapdata() {
+    filter = getFilter();
+    
+    $.post('<?=self::getUrl("Building", "Api")?>', {
+      'do': "findBuildings",
+      filter: filter
+    },function(success) {
+      if(success.status == "OK") {
+        console.log(success);
+        
+        if(Array.isArray(success.result.buildings)) {
+          buildings = success.result.buildings;
+          renderMap();
+        }
+      }
+    },
+    'json'
+    );
+    
+  }
+  
+  function getFilter() {
+    var fields = ['network_id', 'networksection_id', 'status_id', 'code', 'street'];
+    var filter = {};
+    fields.forEach(function(field) {
+      if(!field) {
+        return;
+      }
+      let val = $('#filter_' + field).val();
+      if(val.length) {
+        filter[field] = val;
+      }
+    });
+    
+    return filter;
+  }
+
+  // navigation
   var building;
   var hash = window.location.hash.substr(1);
   var match = hash.match(/building=(\d+)/);
@@ -390,8 +497,11 @@
     //$('body').scrollTop($('#building-' + building).offset() - 50);
   }
   
-
+  <?php if(is_array($filter) && count($filter)): ?>
+    refreshMap();
+  <?php endif; ?>
 </script>
-  
+
+
 
 <?php include(realpath(dirname(__FILE__)."/../")."/footer.php"); ?>