diff --git a/webroot/index.html b/webroot/index.html index 925320e..d8d63c5 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -10,6 +10,7 @@ + diff --git a/webroot/js/config.js b/webroot/js/config.js index e4371ea..e21ef24 100644 --- a/webroot/js/config.js +++ b/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}, - maxZoom: 20, - tileLayer: '//tiles.bremen.freifunk.net/{z}/{x}/{y}.png', - /* heatmap settings - size: in meters (default: 30km) - opacity: in percent/100 (default: 1) - gradientTexture: url-to-texture-image (default: false) - alphaRange: change transparency in heatmap (default: 1) - autoresize: resize heatmap when map size changes (default: false) - */ - heatmap: { - wifi24: {size: 230, opacity: 0.5, alphaRange: 1}, - wifi5: {size: 230, opacity: 0.5, alphaRange: 1} - }, - icon:{ - warn:{wifi24:20,wifi5:20}, - crit:{wifi24:30,wifi5:30} - }, - 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); - } - }, - style: function(feature){ - if(feature.geometry.type === 'LineString' || feature.geometry.type === 'Polygon'){ - 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'}; - } - return { - color: feature.properties['marker-color'], - fillColor: feature.properties['marker-color'], - fillOpacity: 0.2, - weight: 2, - stroke: true - }; - } - } - } + view: {bound: [53.07093, 8.79464], zoom: 17}, + maxZoom: 20, + tileLayer: '//tiles.bremen.freifunk.net/{z}/{x}/{y}.png', + /* heatmap settings + size: in meters (default: 30km) + opacity: in percent/100 (default: 1) + gradientTexture: url-to-texture-image (default: false) + alphaRange: change transparency in heatmap (default: 1) + autoresize: resize heatmap when map size changes (default: false) + */ + heatmap: { + wifi24: {size: 230, opacity: 0.5, alphaRange: 1}, + wifi5: {size: 230, opacity: 0.5, alphaRange: 1} + }, + icon:{ + warn:{wifi24:20,wifi5:20}, + 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.bindTooltip(feature.properties.name); + } + }, + style: function(feature){ + if(feature.geometry.type === 'LineString' || feature.geometry.type === 'Polygon'){ + 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' + }; + } + return { + color: feature.properties['marker-color'], + fillColor: feature.properties['marker-color'], + fillOpacity: 0.2, + weight: 2, + stroke: true + }; + } + } + }, + }; diff --git a/webroot/js/gui_map.js b/webroot/js/gui_map.js index 3ec7be0..2ac5232 100644 --- a/webroot/js/gui_map.js +++ b/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}); - clientLayer5 = new L.webGLHeatmap({size: 230, opacity: 0.5, alphaRange: 2}); + clientLayer24 = new L.webGLHeatmap(config.map.heatmap.wifi24); + 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'); diff --git a/webroot/js/gui_node.js b/webroot/js/gui_node.js index 28136e1..8a5b5be 100644 --- a/webroot/js/gui_node.js +++ b/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){ diff --git a/webroot/js/leaflet.ajax.min.js b/webroot/js/leaflet.ajax.min.js new file mode 100644 index 0000000..a3e7d47 --- /dev/null +++ b/webroot/js/leaflet.ajax.min.js @@ -0,0 +1 @@ +!function(){function a(b,c,d){var e=a.resolve(b);if(null==e){d=d||b,c=c||"root";var f=new Error('Failed to require "'+d+'" from "'+c+'"');throw f.path=d,f.parent=c,f.require=!0,f}var g=a.modules[e];return g.exports||(g.exports={},g.client=g.component=!0,g.call(this,g.exports,a.relative(e),g)),g.exports}a.modules={},a.aliases={},a.resolve=function(b){"/"===b.charAt(0)&&(b=b.slice(1));for(var c=[b,b+".js",b+".json",b+"/index.js",b+"/index.json"],d=0;d1&&"function"==typeof a&&(c=Array.prototype.slice.call(arguments,1),c.unshift(void 0),a=a.bind.apply(a,c)),1===(b=g.push(a))&&e(d),b};h.clear=function(a){return a<=g.length&&(g[a-1]=function(){}),this},c.exports=h}),a.register("calvinmetcalf-setImmediate/lib/nextTick.js",function(a){"use strict";a.test=function(){return"object"==typeof process&&"[object process]"===Object.prototype.toString.call(process)},a.install=function(){return process.nextTick}}),a.register("calvinmetcalf-setImmediate/lib/postMessage.js",function(a,b){"use strict";var c=b("./global");a.test=function(){if(!c.postMessage||c.importScripts)return!1;var a=!0,b=c.onmessage;return c.onmessage=function(){a=!1},c.postMessage("","*"),c.onmessage=b,a},a.install=function(a){function b(b){b.source===c&&b.data===d&&a()}var d="com.calvinmetcalf.setImmediate"+Math.random();return c.addEventListener?c.addEventListener("message",b,!1):c.attachEvent("onmessage",b),function(){c.postMessage(d,"*")}}}),a.register("calvinmetcalf-setImmediate/lib/messageChannel.js",function(a,b){"use strict";var c=b("./global");a.test=function(){return!!c.MessageChannel},a.install=function(a){var b=new c.MessageChannel;return b.port1.onmessage=a,function(){b.port2.postMessage(0)}}}),a.register("calvinmetcalf-setImmediate/lib/stateChange.js",function(a,b){"use strict";var c=b("./global");a.test=function(){return"document"in c&&"onreadystatechange"in c.document.createElement("script")},a.install=function(a){return function(){var b=c.document.createElement("script");return b.onreadystatechange=function(){a(),b.onreadystatechange=null,b.parentNode.removeChild(b),b=null},c.document.documentElement.appendChild(b),a}}}),a.register("calvinmetcalf-setImmediate/lib/timeout.js",function(a){"use strict";a.test=function(){return!0},a.install=function(a){return function(){setTimeout(a,0)}}}),a.register("calvinmetcalf-setImmediate/lib/global.js",function(a,b,c){c.exports="object"==typeof global&&global?global:this}),a.register("calvinmetcalf-setImmediate/lib/mutation.js",function(a,b){"use strict";var c=b("./global"),d=c.MutationObserver||c.WebKitMutationObserver;a.test=function(){return d},a.install=function(a){var b=new d(a),e=c.document.createElement("div");return b.observe(e,{attributes:!0}),c.addEventListener("unload",function(){b.disconnect(),b=null},!1),function(){e.setAttribute("drainQueue","drainQueue")}}}),a.register("lie/lie.js",function(a,b,c){function d(a){function b(a,b){return d(function(c,d){k.push({resolve:a,reject:b,resolver:c,rejecter:d})})}function c(a,c){return l?l(a,c):b(a,c)}function h(a,b){for(var d,h,i=a?"resolve":"reject",j=0,m=k.length;m>j;j++)d=k[j],h=d[i],"function"==typeof h?g(f,h,b,d.resolver,d.rejecter):a?d.resolver(b):d.rejecter(b);l=e(c,b,a)}function i(a){l||h(!0,a)}function j(a){l||h(!1,a)}if(!(this instanceof d))return new d(a);var k=[],l=!1;this.then=c;try{a(function(a){a&&"function"==typeof a.then?a.then(i,j):i(a)},j)}catch(m){j(m)}}function e(a,b,c){return function(e,h){var i=c?e:h;return"function"!=typeof i?d(function(b,c){a(b,c)}):d(function(a,c){g(f,i,b,a,c)})}}function f(a,b,c,d){try{var e=a(b);e&&"function"==typeof e.then?e.then(c,d):c(e)}catch(f){d(f)}}var g=b("immediate");c.exports=d}),a.alias("calvinmetcalf-setImmediate/lib/index.js","lie/deps/immediate/lib/index.js"),a.alias("calvinmetcalf-setImmediate/lib/nextTick.js","lie/deps/immediate/lib/nextTick.js"),a.alias("calvinmetcalf-setImmediate/lib/postMessage.js","lie/deps/immediate/lib/postMessage.js"),a.alias("calvinmetcalf-setImmediate/lib/messageChannel.js","lie/deps/immediate/lib/messageChannel.js"),a.alias("calvinmetcalf-setImmediate/lib/stateChange.js","lie/deps/immediate/lib/stateChange.js"),a.alias("calvinmetcalf-setImmediate/lib/timeout.js","lie/deps/immediate/lib/timeout.js"),a.alias("calvinmetcalf-setImmediate/lib/global.js","lie/deps/immediate/lib/global.js"),a.alias("calvinmetcalf-setImmediate/lib/mutation.js","lie/deps/immediate/lib/mutation.js"),a.alias("calvinmetcalf-setImmediate/lib/index.js","lie/deps/immediate/index.js"),a.alias("calvinmetcalf-setImmediate/lib/index.js","immediate/index.js"),a.alias("calvinmetcalf-setImmediate/lib/index.js","calvinmetcalf-setImmediate/index.js"),a.alias("lie/lie.js","lie/index.js"),L.Util.Promise=a("lie")}(),L.Util.ajax=function(url,options){"use strict";if(options=options||{},options.jsonp)return L.Util.ajax.jsonp(url,options);var request,cancel,out=L.Util.Promise(function(resolve,reject){var Ajax;cancel=reject,Ajax=void 0===window.XMLHttpRequest?function(){try{return new ActiveXObject("Microsoft.XMLHTTP.6.0")}catch(a){try{return new ActiveXObject("Microsoft.XMLHTTP.3.0")}catch(b){reject("XMLHttpRequest is not supported")}}}:window.XMLHttpRequest;var response;request=new Ajax,request.open("GET",url),request.onreadystatechange=function(){4===request.readyState&&(request.status<400&&options.local||200===request.status?(window.JSON?response=JSON.parse(request.responseText):options.evil&&(response=eval("("+request.responseText+")")),resolve(response)):request.status?reject(request.statusText):reject("Attempted cross origin request without CORS enabled"))},request.send()});return out.then(null,function(a){return request.abort(),a}),out.abort=cancel,out},L.Util.jsonp=function(a,b){b=b||{};var c,d,e,f,g=document.getElementsByTagName("head")[0],h=L.DomUtil.create("script","",g),i=L.Util.Promise(function(i,j){f=j;var k=b.cbParam||"callback";b.callbackName?c=b.callbackName:(e="_"+(""+Math.random()).slice(2),c="L.Util.jsonp.cb."+e),h.type="text/javascript",e&&(L.Util.jsonp.cb[e]=function(a){g.removeChild(h),delete L.Util.jsonp.cb[e],i(a)}),d=-1===a.indexOf("?")?a+"?"+k+"="+c:a+"&"+k+"="+c,h.src=d}).then(null,function(a){return g.removeChild(h),delete L.Util.ajax.cb[e],a});return i.abort=f,i},L.Util.jsonp.cb={},L.GeoJSON.AJAX=L.GeoJSON.extend({defaultAJAXparams:{dataType:"json",callbackParam:"callback",local:!1,middleware:function(a){return a}},initialize:function(a,b){this.urls=[],a&&("string"==typeof a?this.urls.push(a):"function"==typeof a.pop?this.urls=this.urls.concat(a):(b=a,a=void 0));var c=L.Util.extend({},this.defaultAJAXparams);for(var d in b)this.defaultAJAXparams.hasOwnProperty(d)&&(c[d]=b[d]);this.ajaxParams=c,this._layers={},L.Util.setOptions(this,b),this.on("data:loaded",function(){this.filter&&this.refilter(this.filter)},this);var e=this;this.urls.length>0&&L.Util.Promise(function(a){a()}).then(function(){e.addUrl()})},clearLayers:function(){return this.urls=[],L.GeoJSON.prototype.clearLayers.call(this),this},addUrl:function(a){var b=this;a&&("string"==typeof a?b.urls.push(a):"function"==typeof a.pop&&(b.urls=b.urls.concat(a)));var c=b.urls.length,d=0;b.fire("data:loading"),b.urls.forEach(function(a){"json"===b.ajaxParams.dataType.toLowerCase()?L.Util.ajax(a,b.ajaxParams).then(function(a){var c=b.ajaxParams.middleware(a);b.addData(c),b.fire("data:progress",c)},function(a){b.fire("data:progress",{error:a})}):"jsonp"===b.ajaxParams.dataType.toLowerCase()&&L.Util.jsonp(a,b.ajaxParams).then(function(a){var c=b.ajaxParams.middleware(a);b.addData(c),b.fire("data:progress",c)},function(a){b.fire("data:progress",{error:a})})}),b.on("data:progress",function(){++d===c&&b.fire("data:loaded")})},refresh:function(a){a=a||this.urls,this.clearLayers(),this.addUrl(a)},refilter:function(a){"function"!=typeof a?(this.filter=!1,this.eachLayer(function(a){a.setStyle({stroke:!0,clickable:!0})})):(this.filter=a,this.eachLayer(function(b){a(b.feature)?b.setStyle({stroke:!0,clickable:!0}):b.setStyle({stroke:!1,clickable:!1})}))}}),L.geoJson.ajax=function(a,b){return new L.GeoJSON.AJAX(a,b)}; \ No newline at end of file