map: draw only labels present on map using rtrees

app.js

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

bower.json

@@ -23,7 +23,8 @@
     "numeraljs": "~1.5.3",
     "roboto-fontface": "~0.3.0",
     "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": [
     "Nils Schneider <nils@nilsschneider.net>"

lib/map.js

@@ -1,7 +1,7 @@
 define(["map/clientlayer", "map/labelslayer",
-        "d3", "leaflet", "moment", "locationmarker",
+        "d3", "leaflet", "moment", "locationmarker", "rbush",
         "leaflet.label", "leaflet.providers"],
-  function (ClientLayer, LabelsLayer, d3, L, moment, LocationMarker) {
+  function (ClientLayer, LabelsLayer, d3, L, moment, LocationMarker, rbush) {
     var options = { worldCopyJump: true,
                     zoomControl: false
                   }
@@ -300,6 +300,15 @@ define(["map/clientlayer", "map/labelslayer",
         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) {
         nodeDict = {}
         linkDict = {}
@@ -349,11 +358,23 @@ define(["map/clientlayer", "map/labelslayer",
         groupNew = L.featureGroup(markersNew).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)

lib/map/clientlayer.js

@@ -6,6 +6,13 @@ define(["leaflet"],
         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])
+
+          return [br.lat, tl.lng, tl.lat, br.lng]
+        }
+
         if (!this.data)
           return
 
@@ -13,29 +20,32 @@ define(["leaflet"],
         var s = tilePoint.multiplyBy(tileSize)
         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 bbox = getTileBBox(s, map, tileSize, margin)
 
-        ctx.beginPath()
+        var nodes = this.data.search(bbox)
-        nodes.forEach(function (d) {
+
-            var p = project([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude])
+        if (nodes.length === 0)
-            if (p.x + margin < 0 || p.y + margin < 0 || p.x - tileSize - margin > 0 || p.y - tileSize - margin > 0)
           return
 
-            var clients = d.statistics.clients
+        var ctx = canvas.getContext("2d")
-            if (d.clients === 0)
-              return
 
         var distance = 12
         var radius = 3
         var a = 1.2
         var startAngle = Math.PI
+
+        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
+
+          if (clients === 0)
+            return
+
+          p.x -= s.x
+          p.y -= s.y
+
           var angle = startAngle
 
           for (var i = 0; i < clients; i++) {

lib/map/labelslayer.js

@@ -6,6 +6,13 @@ define(["leaflet"],
         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])
+
+          return [br.lat, tl.lng, tl.lat, br.lng]
+        }
+
         if (!this.data)
           return
 
@@ -13,38 +20,31 @@ define(["leaflet"],
         var s = tilePoint.multiplyBy(tileSize)
         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) {
-          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 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.textBaseline = "middle"
         ctx.textAlign = "left"
         ctx.lineWidth = 2.5
 
+        var distance = 10
         function drawLabel(d) {
           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)