ffhb/freifunkmanager
ffhb
/
freifunkmanager
mirror of https://github.com/FreifunkBremen/freifunkmanager.git
1
0
Fork 0
Code Issues Releases Wiki Activity

add heatmap

This commit is contained in:
Martin Geno 2016-07-14 16:13:57 +02:00
parent bf85758ba3
commit c3aea99df5
4 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@ -236,7 +236,7 @@ module.exports = function (grunt) {
},
{
expand: true,
cwd: 'public/bower_components/leaflet-draw/dist/images',
cwd: 'public/bower_components/leaflet/dist/images',
dest: 'build/app/images',
src: [
'*.*'

6
public/app/index.js
View File

@ -31,10 +31,10 @@ angular.module('ffhb')
templateUrl: 'app/changes.html',
controller: 'ChangesCtrl'
})
.state('app.mapwithNodeid',{
url:'/map/:nodeid',
.state('app.mapedit',{
url:'/map/edit',
templateUrl: 'app/map/index.html',
controller: 'MapCtrl'
controller: 'MapEditCtrl'
})
.state('app.map',{
url:'/map',

23
public/app/map/index.js
View File

@ -5,7 +5,7 @@ angular.module('ffhb')
if($stateParams.nodeid){
$scope.nodeid = $stateParams.nodeid.toLowerCase();
}
var layerControl,nodeLayer,geoLayer;
var layerControl,geoLayer,nodeLayer,client24Layer,client5Layer;
leafletData.getMap('globalmap').then(function(map) {
layerControl = L.control.layers().addTo(map);
map.setView([config.map.view.lat, config.map.view.lng],16);
@ -22,15 +22,30 @@ angular.module('ffhb')
leafletData.getMap('globalmap').then(function(map) {
if(nodeLayer!==undefined){
layerControl.removeLayer(nodeLayer);
nodeLayer.clearLayers();
}
if(client24Layer!==undefined){
layerControl.removeLayer(client24Layer);
client24Layer.clearLayers();
}
if(client5Layer!==undefined){
layerControl.removeLayer(client5Layer);
client5Layer.clearLayers();
}
nodeLayer = L.markerClusterGroup({maxClusterRadius:20});
client24Layer = L.heatLayer([],{max:30});
client5Layer = L.heatLayer([],{max:30});
Object.keys(data.merged).map(function(nodeid){
var node = data.merged[nodeid];
if(node.nodeinfo.location !== undefined && node.nodeinfo.location.latitude !== undefined && node.nodeinfo.location.longitude !== undefined){
var className = 'node';
if(node.flags && !node.flags.online){
className += ' offline';
}
var wifi24='-',wifi5='-',ch24='-',ch5='-',tx24='-',tx5='-';
if(node.statistics && node.statistics.clients){
wifi24 = node.statistics.clients.wifi24;
if(wifi24 < config.map.icon.warn.wifi24 && wifi24 > 0){
className += ' client24';
} else if(wifi24 < config.map.icon.crit.wifi24 && wifi24 >= config.map.icon.warn.wifi24){
@ -49,6 +64,8 @@ angular.module('ffhb')
}
}
var nodemarker = L.marker([node.nodeinfo.location.latitude, node.nodeinfo.location.longitude],{icon: L.divIcon({className: className})});
client24Layer.addLatLng([node.nodeinfo.location.latitude, node.nodeinfo.location.longitude, wifi24]);
client5Layer.addLatLng([node.nodeinfo.location.latitude, node.nodeinfo.location.longitude, wifi5]);
nodemarker.bindLabel(node.nodeinfo.hostname+' <div class=\'nodeicon-label\'>('+nodeid+')'+
'<table><tr><th></th><th>Cl</th><th>Ch</th><th>Tx</th></tr>'+
'<tr><td>2.4G</td><td>'+wifi24+'</td><td>'+ch24+'</td><td>'+tx24+'</td></tr>'+
@ -63,6 +80,10 @@ angular.module('ffhb')
}
});
layerControl.addOverlay(nodeLayer,'Nodes');
layerControl.addOverlay(client24Layer,'2.4 Ghz Clients');
layerControl.addOverlay(client5Layer,'5 Ghz Clients');
client24Layer.addTo(map);
client5Layer.addTo(map);
nodeLayer.addTo(map);
});
});

4
public/index.html
View File

@ -58,8 +58,7 @@
<script src="bower_components/leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<!-- endbower -->
<script src="bower_components/Leaflet.label/dist/leaflet.label.js"></script>
<script src="bower_components/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="leaflet-heatmap.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,public}) app/app.js -->
<script src="app/app.js"></script>
@ -67,6 +66,7 @@
<script src="app/changes.js"></script>
<script src="app/index.js"></script>
<script src="app/main.js"></script>
<script src="app/map/edit.js"></script>
<script src="app/map/index.js"></script>
<script src="app/node.js"></script>
<script src="app/nodes/nodes.js"></script>