[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/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>

View File

@ -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
};
}
}
},
};

View File

@ -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');

View File

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

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

File diff suppressed because one or more lines are too long