labelslayer.js

define(["leaflet"],
  function (L) {
    return L.TileLayer.Canvas.extend({
      setData: function (d) {
        this.data = d
        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

        var tileSize = this.options.tileSize
        var s = tilePoint.multiplyBy(tileSize)
        var map = this._map

        function projectNodes(d) {
          var p = map.project([d.node.nodeinfo.location.latitude, d.node.nodeinfo.location.longitude])

          p.x -= s.x
          p.y -= s.y

          return {p: p, o: d.node}
        }

        var margin = 256
        var bbox = getTileBBox(s, map, tileSize, margin)

        var nodesOnline = this.data.online.search(bbox).map(projectNodes)
        var nodesOffline = this.data.offline.search(bbox).map(projectNodes)
        var nodesNew = this.data.new.search(bbox).map(projectNodes)
        var nodesLost = this.data.lost.search(bbox).map(projectNodes)

        var ctx = canvas.getContext("2d")

        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)
        }

        ctx.fillStyle = "rgba(212, 62, 42, 0.6)"
        ctx.strokeStyle = "rgba(255, 255, 255, 0.6)"
        nodesOffline.forEach(drawLabel)

        ctx.fillStyle = "rgba(0, 0, 0, 0.6)"
        ctx.strokeStyle = "rgba(255, 255, 255, 0.9)"
        nodesOnline.forEach(drawLabel)

        ctx.fillStyle = "rgba(212, 62, 42, 0.6)"
        ctx.strokeStyle = "rgba(255, 255, 255, 0.9)"
        nodesLost.forEach(drawLabel)

        ctx.fillStyle = "rgba(0, 0, 0, 0.6)"
        ctx.strokeStyle = "rgba(255, 255, 255, 1.0)"
        nodesNew.forEach(drawLabel)
      }
    })
})