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

map: draw only labels present on map using rtrees

Browse source
This commit is contained in:
Nils Schneider 2015-04-19 12:22:09 +02:00
parent 9d2318dce1
commit 22b49c1a55
5 changed files with 100 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app.js
View file

@ -12,6 +12,7 @@ require.config({
"numeral": "../bower_components/numeraljs/min/numeral.min", "numeral": "../bower_components/numeraljs/min/numeral.min",
"numeral-intl": "../bower_components/numeraljs/min/languages.min", "numeral-intl": "../bower_components/numeraljs/min/languages.min",
"virtual-dom": "../bower_components/virtual-dom/dist/virtual-dom", "virtual-dom": "../bower_components/virtual-dom/dist/virtual-dom",
"rbush": "../bower_components/rbush/rbush",
"helper": "../helper" "helper": "../helper"
}, },
shim: { shim: {

3
bower.json
View file

@ -23,7 +23,8 @@
"numeraljs": "~1.5.3", "numeraljs": "~1.5.3",
"roboto-fontface": "~0.3.0", "roboto-fontface": "~0.3.0",
"virtual-dom": "~2.0.1", "virtual-dom": "~2.0.1",
"leaflet-providers": "~1.0.27" "leaflet-providers": "~1.0.27",
"rbush": "https://github.com/mourner/rbush.git#~1.3.5"
}, },
"authors": [ "authors": [
"Nils Schneider <nils@nilsschneider.net>" "Nils Schneider <nils@nilsschneider.net>"

35
lib/map.js
View file

@ -1,7 +1,7 @@
define(["map/clientlayer", "map/labelslayer", define(["map/clientlayer", "map/labelslayer",
"d3", "leaflet", "moment", "locationmarker", "d3", "leaflet", "moment", "locationmarker", "rbush",
"leaflet.label", "leaflet.providers"], "leaflet.label", "leaflet.providers"],
function (ClientLayer, LabelsLayer, d3, L, moment, LocationMarker) { function (ClientLayer, LabelsLayer, d3, L, moment, LocationMarker, rbush) {
var options = { worldCopyJump: true, var options = { worldCopyJump: true,
zoomControl: false zoomControl: false
} }
@ -300,6 +300,15 @@ define(["map/clientlayer", "map/labelslayer",
return L.circle(barycenter, r * config.mapSigmaScale) return L.circle(barycenter, r * config.mapSigmaScale)
} }
function mapRTree(d) {
var o = [ d.nodeinfo.location.latitude, d.nodeinfo.location.longitude,
d.nodeinfo.location.latitude, d.nodeinfo.location.longitude]
o.node = d
return o
}
self.setData = function (data) { self.setData = function (data) {
nodeDict = {} nodeDict = {}
linkDict = {} linkDict = {}
@ -349,11 +358,23 @@ define(["map/clientlayer", "map/labelslayer",
groupNew = L.featureGroup(markersNew).addTo(map) groupNew = L.featureGroup(markersNew).addTo(map)
groupLost = L.featureGroup(markersLost).addTo(map) groupLost = L.featureGroup(markersLost).addTo(map)
clientLayer.setData(data.nodes.all.filter(online).filter(has_location)) var rtreeOnlineAll = rbush(9)
labelsLayer.setData({online: nodesOnline.filter(has_location), var rtreeOnline = rbush(9)
offline: nodesOffline.filter(has_location), var rtreeOffline = rbush(9)
new: data.nodes.new.filter(has_location), var rtreeNew = rbush(9)
lost: data.nodes.lost.filter(has_location) var rtreeLost = rbush(9)
rtreeOnlineAll.load(data.nodes.all.filter(online).filter(has_location).map(mapRTree))
rtreeOnline.load(nodesOnline.filter(has_location).map(mapRTree))
rtreeOffline.load(nodesOffline.filter(has_location).map(mapRTree))
rtreeNew.load(data.nodes.new.filter(has_location).map(mapRTree))
rtreeLost.load(data.nodes.lost.filter(has_location).map(mapRTree))
clientLayer.setData(rtreeOnlineAll)
labelsLayer.setData({online: rtreeOnline,
offline: rtreeOffline,
new: rtreeNew,
lost: rtreeLost
}) })
updateView(true) updateView(true)

82
lib/map/clientlayer.js
View file

@ -6,6 +6,13 @@ define(["leaflet"],
this.redraw() this.redraw()
}, },
drawTile: function (canvas, tilePoint) { 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])
return [br.lat, tl.lng, tl.lat, br.lng]
}
if (!this.data) if (!this.data)
return return
@ -13,51 +20,54 @@ define(["leaflet"],
var s = tilePoint.multiplyBy(tileSize) var s = tilePoint.multiplyBy(tileSize)
var map = this._map var map = this._map
function project(coords) {
var p = map.project(new L.LatLng(coords[0], coords[1]))
return {x: p.x - s.x, y: p.y - s.y}
}
var nodes = this.data
var ctx = canvas.getContext("2d")
var margin = 50 var margin = 50
var bbox = getTileBBox(s, map, tileSize, margin)
var nodes = this.data.search(bbox)
if (nodes.length === 0)
return
var ctx = canvas.getContext("2d")
var distance = 12
var radius = 3
var a = 1.2
var startAngle = Math.PI
ctx.beginPath() ctx.beginPath()
nodes.forEach(function (d) { nodes.forEach(function (d) {
var p = project([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude]) var p = map.project([d.node.nodeinfo.location.latitude, d.node.nodeinfo.location.longitude])
if (p.x + margin < 0 || p.y + margin < 0 || p.x - tileSize - margin > 0 || p.y - tileSize - margin > 0) var clients = d.node.statistics.clients
return
var clients = d.statistics.clients if (clients === 0)
if (d.clients === 0) return
return
var distance = 12 p.x -= s.x
var radius = 3 p.y -= s.y
var a = 1.2
var startAngle = Math.PI
var angle = startAngle
for (var i = 0; i < clients; i++) { var angle = startAngle
if ((angle - startAngle) > 2 * Math.PI) {
angle = startAngle
distance += 2 * radius * a
}
var x = p.x + distance * Math.cos(angle) for (var i = 0; i < clients; i++) {
var y = p.y + distance * Math.sin(angle) if ((angle - startAngle) > 2 * Math.PI) {
angle = startAngle
ctx.moveTo(x, y) distance += 2 * radius * a
ctx.arc(x, y, radius, 0, 2 * Math.PI)
var n = Math.floor((Math.PI * distance) / (a * radius))
var angleDelta = 2 * Math.PI / n
angle += angleDelta
} }
})
ctx.fillStyle = "rgba(153, 118, 16, 0.5)" var x = p.x + distance * Math.cos(angle)
ctx.fill() var y = p.y + distance * Math.sin(angle)
}
ctx.moveTo(x, y)
ctx.arc(x, y, radius, 0, 2 * Math.PI)
var n = Math.floor((Math.PI * distance) / (a * radius))
var angleDelta = 2 * Math.PI / n
angle += angleDelta
}
})
ctx.fillStyle = "rgba(153, 118, 16, 0.5)"
ctx.fill()
}
}) })
}) })

46
lib/map/labelslayer.js
View file

@ -6,6 +6,13 @@ define(["leaflet"],
this.redraw() this.redraw()
}, },
drawTile: function (canvas, tilePoint) { 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])
return [br.lat, tl.lng, tl.lat, br.lng]
}
if (!this.data) if (!this.data)
return return
@ -13,41 +20,34 @@ define(["leaflet"],
var s = tilePoint.multiplyBy(tileSize) var s = tilePoint.multiplyBy(tileSize)
var map = this._map var map = this._map
function project(coords) {
var p = map.project(new L.LatLng(coords[0], coords[1]))
return {x: p.x - s.x, y: p.y - s.y}
}
function projectNodes(d) { function projectNodes(d) {
return { p: project([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude]), var p = map.project([d.node.nodeinfo.location.latitude, d.node.nodeinfo.location.longitude])
o: d
} p.x -= s.x
p.y -= s.y
return {p: p, o: d.node}
} }
var margin = 150 var margin = 256
function onTile(d) { var bbox = getTileBBox(s, map, tileSize, margin)
return d.p.x + margin > 0 ||
d.p.y + margin > 0 || var nodesOnline = this.data.online.search(bbox).map(projectNodes)
d.p.x - tileSize - margin < 0 || var nodesOffline = this.data.offline.search(bbox).map(projectNodes)
d.p.y - tileSize - margin < 0 var nodesNew = this.data.new.search(bbox).map(projectNodes)
} var nodesLost = this.data.lost.search(bbox).map(projectNodes)
var ctx = canvas.getContext("2d") var ctx = canvas.getContext("2d")
var nodesOnline = this.data.online.map(projectNodes).filter(onTile)
var nodesOffline = this.data.offline.map(projectNodes).filter(onTile)
var nodesNew = this.data.new.map(projectNodes).filter(onTile)
var nodesLost = this.data.lost.map(projectNodes).filter(onTile)
var distance = 10
ctx.font = "12px Roboto" ctx.font = "12px Roboto"
ctx.textBaseline = "middle" ctx.textBaseline = "middle"
ctx.textAlign = "left" ctx.textAlign = "left"
ctx.lineWidth = 2.5 ctx.lineWidth = 2.5
var distance = 10
function drawLabel(d) { function drawLabel(d) {
ctx.strokeText(d.o.nodeinfo.hostname, d.p.x + distance, d.p.y) ctx.strokeText(d.o.nodeinfo.hostname, d.p.x + distance, d.p.y)
ctx.fillText(d.o.nodeinfo.hostname, d.p.x + distance, d.p.y) ctx.fillText(d.o.nodeinfo.hostname, d.p.x + distance, d.p.y)
} }
ctx.fillStyle = "rgba(212, 62, 42, 0.6)" ctx.fillStyle = "rgba(212, 62, 42, 0.6)"