map: show clients

lib/map.js

@@ -5,6 +5,67 @@ define(["d3", "leaflet", "moment", "locationmarker", "leaflet.label",
                    zoomControl: false
                  }
 
+    var ClientLayer = L.TileLayer.Canvas.extend({
+      setData: function (d) {
+        this.data = d
+        this.redraw()
+      },
+      drawTile: function (canvas, tilePoint) {
+        if (!this.data)
+          return
+
+        var tileSize = this.options.tileSize
+        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
+
+        ctx.beginPath()
+        nodes.forEach(function (d) {
+            var p = project([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude])
+            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
+            if (d.clients === 0)
+              return
+
+            var distance = 12
+            var radius = 3
+            var a = 1.2
+            var startAngle = Math.PI
+            var angle = startAngle
+
+            for (var i = 0; i < clients; i++) {
+              if ((angle - startAngle) > 2 * Math.PI) {
+                angle = startAngle
+                distance += 2 * radius * a
+              }
+
+              var x = p.x + distance * Math.cos(angle)
+              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 = "#294D66"
+          ctx.fill()
+        }
+    })
+
    var AddLayerButton = L.Control.extend({
        options: {
          position: "bottomright"
@@ -216,6 +277,10 @@ define(["d3", "leaflet", "moment", "locationmarker", "leaflet.label",
         layers.forEach(addLayer)
     }
 
+    var clientLayer = new ClientLayer()
+    clientLayer.addTo(map)
+    clientLayer.setZIndex(5)
+
     var nodeDict = {}
     var linkDict = {}
     var highlight
@@ -340,6 +405,8 @@ define(["d3", "leaflet", "moment", "locationmarker", "leaflet.label",
       groupNew = L.featureGroup(markersNew).addTo(map)
       groupLost = L.featureGroup(markersLost).addTo(map)
 
+      clientLayer.setData(data.nodes.all.filter(online).filter(has_location))
+
       updateView(true)
     }