Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[TASK] Configuable zoom for label and client layers

Browse Source
This commit is contained in:
Xaver Maierhofer 2017-02-08 20:51:10 +01:00 committed by Geno
parent 56a6617b7e
commit 10f7183c5b
4 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -108,6 +108,14 @@ Lost will be splitted in alert and lost.
Max level to be applied by clicking a node or open a node. With value `18` near by buildings and streets should be visible. Max level to be applied by clicking a node or open a node. With value `18` near by buildings and streets should be visible.
Interesting if one of configured map provider has zoom-level under `18`. Interesting if one of configured map provider has zoom-level under `18`.
## labelZoom (integer)
Min. level for node labels shown on the map. Labels aren't shown in first zoom levels and need performance.
## clientZoom (integer)
Min. level to set starting layer for client dots on map.
## nodeInfobox ## nodeInfobox
#### contact (bool) #### contact (bool)

2
config.json
View File

@ -30,6 +30,8 @@
"maxAge": 14, "maxAge": 14,
"maxAgeAlert": 3, "maxAgeAlert": 3,
"nodeZoom": 18, "nodeZoom": 18,
"labelZoom": 13,
"clientZoom": 15,
"nodeInfobox": { "nodeInfobox": {
"contact": false, "contact": false,
"hardwareUsage": true "hardwareUsage": true

4
lib/map.js
View File

@ -297,11 +297,11 @@ define(['map/clientlayer', 'map/labelslayer',
layerControl = L.control.layers(baseLayers, [], { position: 'bottomright' }); layerControl = L.control.layers(baseLayers, [], { position: 'bottomright' });
layerControl.addTo(map); layerControl.addTo(map);
var clientLayer = new ClientLayer({ minZoom: 15 }); var clientLayer = new ClientLayer({ minZoom: config.clientZoom });
clientLayer.addTo(map); clientLayer.addTo(map);
clientLayer.setZIndex(5); clientLayer.setZIndex(5);
var labelsLayer = new LabelsLayer({}); var labelsLayer = new LabelsLayer({ minZoom: config.labelZoom });
labelsLayer.addTo(map); labelsLayer.addTo(map);
labelsLayer.setZIndex(6); labelsLayer.setZIndex(6);

15
lib/map/labelslayer.js
View File

@ -29,7 +29,7 @@ define(['leaflet', 'rbush', 'helper'],
return o; return o;
} }
function prepareLabel(fillStyle, fontSize, offset, stroke, minZoom) { function prepareLabel(fillStyle, fontSize, offset, stroke) {
return function (d) { return function (d) {
var font = fontSize + 'px ' + bodyStyle.fontFamily; var font = fontSize + 'px ' + bodyStyle.fontFamily;
return { return {
@ -40,7 +40,6 @@ define(['leaflet', 'rbush', 'helper'],
height: fontSize * 1.2, height: fontSize * 1.2,
font: font, font: font,
stroke: stroke, stroke: stroke,
minZoom: minZoom,
width: measureText(font, d.nodeinfo.hostname).width width: measureText(font, d.nodeinfo.hostname).width
}; };
}; };
@ -102,10 +101,10 @@ define(['leaflet', 'rbush', 'helper'],
// - label (string) // - label (string)
// - color (string) // - color (string)
var labelsOnline = d.online.map(prepareLabel(bodyStyle.color, 11, 8, true, 13)); var labelsOnline = d.online.map(prepareLabel(bodyStyle.color, 11, 8, true));
var labelsOffline = d.offline.map(prepareLabel('rgba(212, 62, 42, 0.9)', 9, 5, false, 16)); var labelsOffline = d.offline.map(prepareLabel('rgba(212, 62, 42, 0.9)', 9, 5, false));
var labelsNew = d.new.map(prepareLabel('rgba(48, 99, 20, 0.9)', 11, 8, true, 0)); var labelsNew = d.new.map(prepareLabel('rgba(48, 99, 20, 0.9)', 11, 8, true));
var labelsLost = d.lost.map(prepareLabel('rgba(212, 62, 42, 0.9)', 11, 8, true, 0)); var labelsLost = d.lost.map(prepareLabel('rgba(212, 62, 42, 0.9)', 11, 8, true));
labelShadow = bodyStyle.backgroundColor.replace(/rgb/i, 'rgba').replace(/\)/i, ',0.7)'); labelShadow = bodyStyle.backgroundColor.replace(/rgb/i, 'rgba').replace(/\)/i, ',0.7)');
var labels = [] var labels = []
@ -138,7 +137,7 @@ define(['leaflet', 'rbush', 'helper'],
var offset = calcOffset(n.offset, loc); var offset = calcOffset(n.offset, loc);
var i; var i;
for (i = maxZoom; i >= n.minZoom; i--) { for (i = maxZoom; i >= minZoom; i--) {
var p = map.project(n.position, i); var p = map.project(n.position, i);
var rect = labelRect(p, offset, loc, n, minZoom, maxZoom, i); var rect = labelRect(p, offset, loc, n, minZoom, maxZoom, i);
var candidates = trees[i].search(rect); var candidates = trees[i].search(rect);
@ -187,7 +186,7 @@ define(['leaflet', 'rbush', 'helper'],
this.redraw(); this.redraw();
}, },
drawTile: function (canvas, tilePoint, zoom) { drawTile: function (canvas, tilePoint, zoom) {
if (!this.labels) { if (!this.labels && zoom >= this.options.minZoom) {
return; return;
} }