freifunk/hopglass
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

change code style to ffrgb/meshviewer fork

Browse source
This commit is contained in:
Milan Pässler 2017-03-17 03:14:57 +01:00
commit 418b630e02
42 changed files with 3505 additions and 3154 deletions
Download patch file Download diff file Expand all files Collapse all files

89
lib/map/clientlayer.js
View file

@ -1,76 +1,79 @@
define(["leaflet", "jshashes"],
function (L, jsHashes) {
var MD5 = new jsHashes.MD5()
var MD5 = new jsHashes.MD5();
return L.TileLayer.Canvas.extend({
setData: function (d) {
this.data = d
this.data = d;
//pre-calculate start angles
this.data.all().forEach(function (d) {
var hash = MD5.hex(d.node.nodeinfo.node_id)
d.startAngle = (parseInt(hash.substr(0, 2), 16) / 255) * 2 * Math.PI
})
this.redraw()
var hash = MD5.hex(d.node.nodeinfo.node_id);
d.startAngle = (parseInt(hash.substr(0, 2), 16) / 255) * 2 * Math.PI;
});
this.redraw();
},
drawTile: function (canvas, tilePoint) {
function getTileBBox(s, map, tileSize, margin) {
var tl = map.unproject([s.x - margin, s.y - margin])
var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize])
var tl = map.unproject([s.x - margin, s.y - margin]);
var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize]);
return [br.lat, tl.lng, tl.lat, br.lng]
return [br.lat, tl.lng, tl.lat, br.lng];
}
if (!this.data)
return
if (!this.data) {
return;
}
var tileSize = this.options.tileSize
var s = tilePoint.multiplyBy(tileSize)
var map = this._map
var tileSize = this.options.tileSize;
var s = tilePoint.multiplyBy(tileSize);
var map = this._map;
var margin = 50
var bbox = getTileBBox(s, map, tileSize, margin)
var margin = 50;
var bbox = getTileBBox(s, map, tileSize, margin);
var nodes = this.data.search(bbox)
var nodes = this.data.search(bbox);
if (nodes.length === 0)
return
if (nodes.length === 0) {
return;
}
var ctx = canvas.getContext("2d")
var ctx = canvas.getContext("2d");
var radius = 3
var a = 1.2
var startDistance = 12
var radius = 3;
var a = 1.2;
var startDistance = 12;
ctx.beginPath()
ctx.beginPath();
nodes.forEach(function (d) {
var p = map.project([d.node.nodeinfo.location.latitude, d.node.nodeinfo.location.longitude])
var clients = d.node.statistics.clients
var p = map.project([d.node.nodeinfo.location.latitude, d.node.nodeinfo.location.longitude]);
var clients = d.node.statistics.clients;
if (clients === 0)
return
if (clients === 0) {
return;
}
p.x -= s.x
p.y -= s.y
p.x -= s.x;
p.y -= s.y;
for (var orbit = 0, i = 0; i < clients; orbit++) {
var distance = startDistance + orbit * 2 * radius * a
var n = Math.floor((Math.PI * distance) / (a * radius))
var delta = clients - i
var distance = startDistance + orbit * 2 * radius * a;
var n = Math.floor((Math.PI * distance) / (a * radius));
var delta = clients - i;
for (var j = 0; j < Math.min(delta, n); i++, j++) {
var angle = 2 * Math.PI / n * j
var x = p.x + distance * Math.cos(angle + d.startAngle)
var y = p.y + distance * Math.sin(angle + d.startAngle)
var angle = 2 * Math.PI / n * j;
var x = p.x + distance * Math.cos(angle + d.startAngle);
var y = p.y + distance * Math.sin(angle + d.startAngle);
ctx.moveTo(x, y)
ctx.arc(x, y, radius, 0, 2 * Math.PI)
ctx.moveTo(x, y);
ctx.arc(x, y, radius, 0, 2 * Math.PI);
}
}
})
});
ctx.fillStyle = "rgba(220, 0, 103, 0.7)"
ctx.fill()
ctx.fillStyle = "rgba(220, 0, 103, 0.7)";
ctx.fill();
}
})
})
});
});

264
lib/map/labelslayer.js
View file

@ -1,88 +1,93 @@
define(["leaflet", "rbush"],
function (L, rbush) {
var labelLocations = [["left", "middle", 0 / 8],
["center", "top", 6 / 8],
["right", "middle", 4 / 8],
["left", "top", 7 / 8],
["left", "ideographic", 1 / 8],
["right", "top", 5 / 8],
["center", "ideographic", 2 / 8],
["right", "ideographic", 3 / 8]]
var labelLocations = [["left", "middle", 0 / 8],
["center", "top", 6 / 8],
["right", "middle", 4 / 8],
["left", "top", 7 / 8],
["left", "ideographic", 1 / 8],
["right", "top", 5 / 8],
["center", "ideographic", 2 / 8],
["right", "ideographic", 3 / 8]];
var fontFamily = "Roboto"
var nodeRadius = 4
var fontFamily = "Roboto";
var nodeRadius = 4;
var ctx = document.createElement("canvas").getContext("2d")
var ctx = document.createElement("canvas").getContext("2d");
function measureText(font, text) {
ctx.font = font
return ctx.measureText(text)
ctx.font = font;
return ctx.measureText(text);
}
function mapRTree(d) {
var o = [d.position.lat, d.position.lng, d.position.lat, d.position.lng]
var o = [d.position.lat, d.position.lng, d.position.lat, d.position.lng];
o.label = d
o.label = d;
return o
return o;
}
function prepareLabel(fillStyle, fontSize, offset, stroke, minZoom) {
return function (d) {
var font = fontSize + "px " + fontFamily
return { position: L.latLng(d.nodeinfo.location.latitude, d.nodeinfo.location.longitude),
label: d.nodeinfo.hostname,
offset: offset,
fillStyle: fillStyle,
height: fontSize * 1.2,
font: font,
stroke: stroke,
minZoom: minZoom,
width: measureText(font, d.nodeinfo.hostname).width
}
}
var font = fontSize + "px " + fontFamily;
return {
position: L.latLng(d.nodeinfo.location.latitude, d.nodeinfo.location.longitude),
label: d.nodeinfo.hostname,
offset: offset,
fillStyle: fillStyle,
height: fontSize * 1.2,
font: font,
stroke: stroke,
minZoom: minZoom,
width: measureText(font, d.nodeinfo.hostname).width
};
};
}
function calcOffset(offset, loc) {
return [ offset * Math.cos(loc[2] * 2 * Math.PI),
-offset * Math.sin(loc[2] * 2 * Math.PI)]
return [offset * Math.cos(loc[2] * 2 * Math.PI),
-offset * Math.sin(loc[2] * 2 * Math.PI)];
}
function labelRect(p, offset, anchor, label, minZoom, maxZoom, z) {
var margin = 1 + 1.41 * (1 - (z - minZoom) / (maxZoom - minZoom))
var margin = 1 + 1.41 * (1 - (z - minZoom) / (maxZoom - minZoom));
var width = label.width * margin
var height = label.height * margin
var width = label.width * margin;
var height = label.height * margin;
var dx = { left: 0,
right: -width,
center: -width / 2
}
var dx = {
left: 0,
right: -width,
center: -width / 2
};
var dy = { top: 0,
ideographic: -height,
middle: -height / 2
}
var dy = {
top: 0,
ideographic: -height,
middle: -height / 2
};
var x = p.x + offset[0] + dx[anchor[0]]
var y = p.y + offset[1] + dy[anchor[1]]
var x = p.x + offset[0] + dx[anchor[0]];
var y = p.y + offset[1] + dy[anchor[1]];
return [x, y, x + width, y + height]
return [x, y, x + width, y + height];
}
var c = L.TileLayer.Canvas.extend({
onAdd: function (map) {
L.TileLayer.Canvas.prototype.onAdd.call(this, map)
if (this.data)
this.prepareLabels()
L.TileLayer.Canvas.prototype.onAdd.call(this, map);
if (this.data) {
this.prepareLabels();
}
},
setData: function (d) {
this.data = d
if (this._map)
this.prepareLabels()
this.data = d;
if (this._map) {
this.prepareLabels();
}
},
prepareLabels: function () {
var d = this.data
var d = this.data;
// label:
// - position (WGS84 coords)
@ -92,137 +97,144 @@ define(["leaflet", "rbush"],
// - label (string)
// - color (string)
var labelsOnline = d.online.map(prepareLabel("rgba(0, 0, 0, 0.9)", 10, 8, true, 13))
var labelsOffline = d.offline.map(prepareLabel("rgba(212, 62, 42, 0.9)", 9, 5, false, 16))
var labelsNew = d.new.map(prepareLabel("rgba(48, 99, 20, 0.9)", 11, 8, true, 0))
var labelsLost = d.lost.map(prepareLabel("rgba(212, 62, 42, 0.9)", 11, 8, true, 0))
var labelsOnline = d.online.map(prepareLabel("rgba(0, 0, 0, 0.9)", 10, 8, true, 13));
var labelsOffline = d.offline.map(prepareLabel("rgba(212, 62, 42, 0.9)", 9, 5, false, 16));
var labelsNew = d.new.map(prepareLabel("rgba(48, 99, 20, 0.9)", 11, 8, true, 0));
var labelsLost = d.lost.map(prepareLabel("rgba(212, 62, 42, 0.9)", 11, 8, true, 0));
var labels = []
.concat(labelsNew)
.concat(labelsLost)
.concat(labelsOnline)
.concat(labelsOffline)
.concat(labelsNew)
.concat(labelsLost)
.concat(labelsOnline)
.concat(labelsOffline);
var minZoom = this.options.minZoom
var maxZoom = this.options.maxZoom
var minZoom = this.options.minZoom;
var maxZoom = this.options.maxZoom;
var trees = []
var trees = [];
var map = this._map
var map = this._map;
function nodeToRect(z) {
return function (d) {
var p = map.project(d.position, z)
var p = map.project(d.position, z);
return [p.x - nodeRadius, p.y - nodeRadius,
p.x + nodeRadius, p.y + nodeRadius]
}
p.x + nodeRadius, p.y + nodeRadius];
};
}
for (var z = minZoom; z <= maxZoom; z++) {
trees[z] = rbush(9)
trees[z].load(labels.map(nodeToRect(z)))
trees[z] = rbush(9);
trees[z].load(labels.map(nodeToRect(z)));
}
labels = labels.map(function (d) {
var best = labelLocations.map(function (loc) {
var offset = calcOffset(d.offset, loc)
var z
var offset = calcOffset(d.offset, loc);
var z;
for (z = maxZoom; z >= d.minZoom; z--) {
var p = map.project(d.position, z)
var rect = labelRect(p, offset, loc, d, minZoom, maxZoom, z)
var candidates = trees[z].search(rect)
var p = map.project(d.position, z);
var rect = labelRect(p, offset, loc, d, minZoom, maxZoom, z);
var candidates = trees[z].search(rect);
if (candidates.length > 0)
break
if (candidates.length > 0) {
break;
}
}
return {loc: loc, z: z + 1}
return {loc: loc, z: z + 1};
}).filter(function (d) {
return d.z <= maxZoom
return d.z <= maxZoom;
}).sort(function (a, b) {
return a.z - b.z
})[0]
return a.z - b.z;
})[0];
if (best !== undefined) {
d.offset = calcOffset(d.offset, best.loc)
d.minZoom = best.z
d.anchor = best.loc
d.offset = calcOffset(d.offset, best.loc);
d.minZoom = best.z;
d.anchor = best.loc;
for (var z = maxZoom; z >= best.z; z--) {
var p = map.project(d.position, z)
var rect = labelRect(p, d.offset, best.loc, d, minZoom, maxZoom, z)
trees[z].insert(rect)
var p = map.project(d.position, z);
var rect = labelRect(p, d.offset, best.loc, d, minZoom, maxZoom, z);
trees[z].insert(rect);
}
return d
} else
return undefined
}).filter(function (d) { return d !== undefined })
return d;
} else {
return undefined;
}
}).filter(function (d) {
return d !== undefined;
});
this.margin = 16
this.margin = 16;
if (labels.length > 0)
if (labels.length > 0) {
this.margin += labels.map(function (d) {
return d.width
}).sort().reverse()[0]
return d.width;
}).sort().reverse()[0];
}
this.labels = rbush(9)
this.labels.load(labels.map(mapRTree))
this.labels = rbush(9);
this.labels.load(labels.map(mapRTree));
this.redraw()
this.redraw();
},
drawTile: function (canvas, tilePoint, zoom) {
function getTileBBox(s, map, tileSize, margin) {
var tl = map.unproject([s.x - margin, s.y - margin])
var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize])
var tl = map.unproject([s.x - margin, s.y - margin]);
var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize]);
return [br.lat, tl.lng, tl.lat, br.lng]
return [br.lat, tl.lng, tl.lat, br.lng];
}
if (!this.labels)
return
if (!this.labels) {
return;
}
var tileSize = this.options.tileSize
var s = tilePoint.multiplyBy(tileSize)
var map = this._map
var tileSize = this.options.tileSize;
var s = tilePoint.multiplyBy(tileSize);
var map = this._map;
function projectNodes(d) {
var p = map.project(d.label.position)
var p = map.project(d.label.position);
p.x -= s.x
p.y -= s.y
p.x -= s.x;
p.y -= s.y;
return {p: p, label: d.label}
return {p: p, label: d.label};
}
var bbox = getTileBBox(s, map, tileSize, this.margin)
var bbox = getTileBBox(s, map, tileSize, this.margin);
var labels = this.labels.search(bbox).map(projectNodes)
var labels = this.labels.search(bbox).map(projectNodes);
var ctx = canvas.getContext("2d")
var ctx = canvas.getContext("2d");
ctx.lineWidth = 5
ctx.strokeStyle = "rgba(255, 255, 255, 0.8)"
ctx.miterLimit = 2
ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(255, 255, 255, 0.8)";
ctx.miterLimit = 2;
function drawLabel(d) {
ctx.font = d.label.font
ctx.textAlign = d.label.anchor[0]
ctx.textBaseline = d.label.anchor[1]
ctx.fillStyle = d.label.fillStyle
ctx.font = d.label.font;
ctx.textAlign = d.label.anchor[0];
ctx.textBaseline = d.label.anchor[1];
ctx.fillStyle = d.label.fillStyle;
if (d.label.stroke)
ctx.strokeText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1])
if (d.label.stroke) {
ctx.strokeText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1]);
}
ctx.fillText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1])
ctx.fillText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1]);
}
labels.filter(function (d) {
return zoom >= d.label.minZoom
}).forEach(drawLabel)
return zoom >= d.label.minZoom;
}).forEach(drawLabel);
}
})
});
return c
})
return c;
});