[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

@@ -2,53 +2,57 @@ var config = {
   title: 'FreifunkManager - Breminale',
   backend: 'ws://'+location.host+'/websocket',
   map: {
-				view: {bound: [53.07093,  8.79464], zoom: 17},
+    view: {bound: [53.07093,  8.79464], zoom: 17},
-				maxZoom: 20,
+    maxZoom: 20,
-				tileLayer: '//tiles.bremen.freifunk.net/{z}/{x}/{y}.png',
+    tileLayer: '//tiles.bremen.freifunk.net/{z}/{x}/{y}.png',
-				/* heatmap settings
+    /* heatmap settings
-         size: in meters (default: 30km)
+     size: in meters (default: 30km)
-				 opacity: in percent/100 (default: 1)
+     opacity: in percent/100 (default: 1)
-				 gradientTexture: url-to-texture-image (default: false)
+     gradientTexture: url-to-texture-image (default: false)
-				 alphaRange: change transparency in heatmap (default: 1)
+     alphaRange: change transparency in heatmap (default: 1)
-				 autoresize: resize heatmap when map size changes (default: false)
+     autoresize: resize heatmap when map size changes (default: false)
-				 */
+     */
-				heatmap: {
+    heatmap: {
-					wifi24: {size: 230, opacity: 0.5, alphaRange: 1},
+    	wifi24: {size: 230, opacity: 0.5, alphaRange: 1},
-					wifi5: {size: 230, opacity: 0.5, alphaRange: 1}
+    	wifi5: {size: 230, opacity: 0.5, alphaRange: 1}
-				},
+    },
-				icon:{
+    icon:{
-					warn:{wifi24:20,wifi5:20},
+    	warn:{wifi24:20,wifi5:20},
-					crit:{wifi24:30,wifi5:30}
+    	crit:{wifi24:30,wifi5:30}
-				},
+    },
-				geojson: {
+    geojson: {
-					pointToLayer: function (feature, latlng){
+      url: '//events.ffhb.de/data/ground.geojson',
-						feature.properties.radius = 10;
+      pointToLayer: function (feature, latlng){
-						return L.circleMarker(latlng, feature.properties);
+        feature.properties.radius = 10;
-					},
+        return L.circleMarker(latlng, feature.properties);
-					onEachFeature: function(feature, layer) {
+      },
-						if(feature.properties.name.length >0){
+      onEachFeature: function(feature, layer) {
-							layer.bindLabel(feature.properties.name);
+        if(feature.properties.name.length >0){
-						}
+          layer.bindTooltip(feature.properties.name);
-					},
+        }
-					style: function(feature){
+      },
-						if(feature.geometry.type === 'LineString' || feature.geometry.type === 'Polygon'){
+      style: function(feature){
-							return {color: feature.properties.stroke,
+        if(feature.geometry.type === 'LineString' || feature.geometry.type === 'Polygon'){
-								opacity:feature.properties['stroke-opacity'],
+          return {
-								fillColor: feature.properties.fill,
+            color: feature.properties.stroke,
-								fillOpacity:feature.properties['fill-opacity'],
+            opacity:feature.properties['stroke-opacity'],
-								stroke: true,
+            fillColor: feature.properties.fill,
-								weight: feature.properties['stroke-width'],
+            fillOpacity:feature.properties['fill-opacity'],
-								lineCap: 'round',
+            stroke: true,
-								lineJoin: 'round'};
+            weight: feature.properties['stroke-width'],
-						}
+            lineCap: 'round',
-						return {
+            lineJoin: 'round'
-							color: feature.properties['marker-color'],
+          };
-							fillColor: feature.properties['marker-color'],
+        }
-							fillOpacity: 0.2,
+        return {
-							weight: 2,
+          color: feature.properties['marker-color'],
-							stroke: true
+          fillColor: feature.properties['marker-color'],
-						};
+          fillOpacity: 0.2,
-					}
+          weight: 2,
-				}
+          stroke: true
-			}
+        };
+      }
+    }
+  },
+
 };

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){