[TASK] add geojson support

This commit is contained in:
Martin Geno 2017-05-16 02:27:30 +02:00
parent e2774c3880
commit 2e2142b155
No known key found for this signature in database
GPG Key ID: F0D39A37E925E941
5 changed files with 67 additions and 54 deletions

View File

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

View File

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

View File

@ -4,7 +4,7 @@ var guiMap = {};
var view = guiMap; var view = guiMap;
var container, el; var container, el;
var nodeLayer, clientLayer24, clientLayer5;//, draggingNodeID; var geoJsonLayer, nodeLayer, clientLayer24, clientLayer5;//, draggingNodeID;
function addNode (node){ function addNode (node){
/* /*
@ -74,6 +74,7 @@ var guiMap = {};
} }
function update() { function update() {
geoJsonLayer.refresh();
nodeLayer.clearLayers(); nodeLayer.clearLayers();
var nodes = store.getNodes(); var nodes = store.getNodes();
@ -122,9 +123,13 @@ var guiMap = {};
layerControl = L.control.layers().addTo(map); layerControl = L.control.layers().addTo(map);
geoJsonLayer = L.geoJson.ajax(config.map.geojson.url, config.map.geojson);
nodeLayer = L.layerGroup(); 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(nodeLayer,'Nodes');
layerControl.addOverlay(clientLayer24,'Clients 2.4 Ghz'); layerControl.addOverlay(clientLayer24,'Clients 2.4 Ghz');
layerControl.addOverlay(clientLayer5,'Clients 5 Ghz'); layerControl.addOverlay(clientLayer5,'Clients 5 Ghz');

View File

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

1
webroot/js/leaflet.ajax.min.js vendored Normal file

File diff suppressed because one or more lines are too long