[TASK] add geojson support

webroot/index.html

@@ -10,6 +10,7 @@
     <script src="/js/moment.js"></script>
     <script src="/js/navigo.js"></script>
     <script src="/js/leaflet.js"></script>
+    <script src="/js/leaflet.ajax.min.js"></script>
     <script src="/js/webgl-heatmap.js"></script>
     <script src="/js/leaflet-webgl-heatmap.min.js"></script>
     <script src="/js/config.js"></script>

webroot/js/config.js

@@ -21,25 +21,28 @@ var config = {
     	crit:{wifi24:30,wifi5:30}
     },
     geojson: {
+      url: '//events.ffhb.de/data/ground.geojson',
       pointToLayer: function (feature, latlng){
         feature.properties.radius = 10;
         return L.circleMarker(latlng, feature.properties);
       },
       onEachFeature: function(feature, layer) {
         if(feature.properties.name.length >0){
-							layer.bindLabel(feature.properties.name);
+          layer.bindTooltip(feature.properties.name);
         }
       },
       style: function(feature){
         if(feature.geometry.type === 'LineString' || feature.geometry.type === 'Polygon'){
-							return {color: feature.properties.stroke,
+          return {
+            color: feature.properties.stroke,
             opacity:feature.properties['stroke-opacity'],
             fillColor: feature.properties.fill,
             fillOpacity:feature.properties['fill-opacity'],
             stroke: true,
             weight: feature.properties['stroke-width'],
             lineCap: 'round',
-								lineJoin: 'round'};
+            lineJoin: 'round'
+          };
         }
         return {
           color: feature.properties['marker-color'],
@@ -50,5 +53,6 @@ var config = {
         };
       }
     }
-			}
+  },
+
 };

webroot/js/gui_map.js

@@ -4,7 +4,7 @@ var guiMap = {};
   var view = guiMap;
   var container, el;
 
-  var nodeLayer, clientLayer24, clientLayer5;//, draggingNodeID;
+  var geoJsonLayer, nodeLayer, clientLayer24, clientLayer5;//, draggingNodeID;
 
   function addNode (node){
     /*
@@ -74,6 +74,7 @@ var guiMap = {};
   }
 
   function update() {
+    geoJsonLayer.refresh();
     nodeLayer.clearLayers();
 
     var nodes = store.getNodes();
@@ -122,9 +123,13 @@ var guiMap = {};
 
     layerControl = L.control.layers().addTo(map);
 
+
+    geoJsonLayer = L.geoJson.ajax(config.map.geojson.url, config.map.geojson);
+
     nodeLayer = L.layerGroup();
-    clientLayer24 = new L.webGLHeatmap({size: 230, opacity: 0.5, alphaRange: 1});
+    clientLayer24 = new L.webGLHeatmap(config.map.heatmap.wifi24);
-    clientLayer5 = new L.webGLHeatmap({size: 230, opacity: 0.5, alphaRange: 2});
+    clientLayer5 = new L.webGLHeatmap(config.map.heatmap.wifi5);
+    layerControl.addOverlay(geoJsonLayer,'geojson');
     layerControl.addOverlay(nodeLayer,'Nodes');
     layerControl.addOverlay(clientLayer24,'Clients 2.4 Ghz');
     layerControl.addOverlay(clientLayer5,'Clients 5 Ghz');

webroot/js/gui_node.js

@@ -5,7 +5,7 @@ var guiNode = {};
   var container, el;
 
   var titleName,titleID,ago;
-  var marker,map;
+  var marker, map, geoJsonLayer;
   var btnGPS, editLocationGPS, storePosition;
   var current_node_id, editing = false;
 
@@ -22,6 +22,7 @@ var guiNode = {};
   }
 
   function update(){
+    geoJsonLayer.refresh();
     titleID.innerHTML = current_node_id;
     var node = store.getNode(current_node_id);
     if(node === undefined){
@@ -76,12 +77,13 @@ var guiNode = {};
     ago = domlib.newAt(lastseen,'span');
 
     var mapEl = domlib.newAt(el,'div');
-    mapEl.style.height = '500px';
+    mapEl.style.height = '300px';
     map = L.map(mapEl).setView(config.map.view.bound, config.map.view.zoom);
 
     L.tileLayer(config.map.tileLayer, {
         maxZoom: config.map.maxZoom,
       }).addTo(map);
+    geoJsonLayer = L.geoJson.ajax(config.map.geojson.url, config.map.geojson).addTo(map);
 
     marker = L.marker(config.map.view.bound,{draggable:true,opacity:0.5}).addTo(map);
     marker.on('dragstart', function(e){