meshviewer/lib/map.js

define(["d3", "leaflet", "moment", "locationmarker", "leaflet.label",
        "leaflet.providers"],
  function (d3, L, moment, LocationMarker) {
   var options = { worldCopyJump: true,
                   zoomControl: false
                 }

   var AddLayerButton = L.Control.extend({
       options: {
         position: "bottomright"
       },

       initialize: function (f, options) {
         L.Util.setOptions(this, options)
         this.f = f
       },

       onAdd: function () {
         var button = L.DomUtil.create("button", "add-layer")

         L.DomEvent.disableClickPropagation(button)
         L.DomEvent.addListener(button, "click", this.f, this)

         this.button = button

         return button
       }
   })

   var LocateButton = L.Control.extend({
       options: {
         position: "bottomright"
       },

       active: false,
       button: undefined,

       initialize: function (f, options) {
         L.Util.setOptions(this, options)
         this.f = f
       },

       onAdd: function () {
         var button = L.DomUtil.create("button", "locate-user")

         L.DomEvent.disableClickPropagation(button)
         L.DomEvent.addListener(button, "click", this.onClick, this)

         this.button = button

         return button
       },

       update: function() {
         this.button.classList.toggle("active", this.active)
       },

       set: function(v) {
         this.active = v
         this.update()
       },

       onClick: function () {
         this.f(!this.active)
       }
   })

   function mkMarker(dict, iconFunc, router) {
     return function (d) {
       var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], iconFunc(d))

       m.resetStyle = function () {
         m.setStyle(iconFunc(d))
       }

       m.on("click", router.node(d))
       m.bindLabel(d.nodeinfo.hostname)

       dict[d.nodeinfo.node_id] = m

       return m
     }
   }

   function addLinksToMap(dict, linkScale, graph, router) {
     graph = graph.filter( function (d) {
       return "distance" in d && !d.vpn
     })

     var lines = graph.map( function (d) {
       var opts = { color: linkScale(d.tq).hex(),
                    weight: 4,
                    opacity: 0.5,
                    dashArray: "none"
                  }

       var line = L.polyline(d.latlngs, opts)

       line.resetStyle = function () {
         line.setStyle(opts)
       }

       line.bindLabel(d.source.node.nodeinfo.hostname + " – " + d.target.node.nodeinfo.hostname + "<br><strong>" + showDistance(d) + " / " + showTq(d) + "</strong>")
       line.on("click", router.link(d))

       dict[d.id] = line

       return line
     })

     return lines
   }

   var iconOnline  = { color: "#1566A9", fillColor: "#1566A9", radius: 6, fillOpacity: 0.5, opacity: 0.5, weight: 2, className: "stroke-first" }
   var iconOffline = { color: "#D43E2A", fillColor: "#D43E2A", radius: 3, fillOpacity: 0.5, opacity: 0.5, weight: 1, className: "stroke-first" }
   var iconLost    = { color: "#D43E2A", fillColor: "#D43E2A", radius: 6, fillOpacity: 0.8, opacity: 0.8, weight: 1, className: "stroke-first" }
   var iconAlert   = { color: "#D43E2A", fillColor: "#D43E2A", radius: 6, fillOpacity: 0.8, opacity: 0.8, weight: 2, className: "stroke-first node-alert" }
   var iconNew     = { color: "#1566A9", fillColor: "#93E929", radius: 6, fillOpacity: 1.0, opacity: 0.5, weight: 2 }

   return function (config, linkScale, sidebar, router) {
    var self = this
    var barycenter
    var groupOnline, groupOffline, groupNew, groupLost, groupLines

    var map, userLocation
    var layerControl
    var customLayers = new Set()

    var locateUserButton = new LocateButton(function (d) {
      if (d)
        enableTracking()
      else
        disableTracking()
    })

    function enableTracking() {
      map.locate({watch: true,
                  enableHighAccuracy: true,
                  setView: true
                 })
      locateUserButton.set(true)
    }

    function disableTracking() {
      map.stopLocate()
      locationError()
      locateUserButton.set(false)
    }

    function locationFound(e) {
      if (!userLocation)
        userLocation = new LocationMarker(e.latlng).addTo(map)

      userLocation.setLatLng(e.latlng)
      userLocation.setAccuracy(e.accuracy)
    }

    function locationError() {
      if (userLocation) {
        map.removeLayer(userLocation)
        userLocation = null
      }
    }

    function addLayer(layerName) {
      if (customLayers.has(layerName))
        return

      try {
        var layer = L.tileLayer.provider(layerName)
        layerControl.addBaseLayer(layer, layerName)
        customLayers.add(layerName)

        if (!layerControl.added) {
          layerControl.addTo(map)
          layerControl.added = true
        }

        if (localStorageTest())
          localStorage.setItem("map/customLayers", JSON.stringify(Array.from(customLayers)))
      } catch (e) {
        return
      }
    }

    var el = document.createElement("div")
    el.classList.add("map")
    self.div = el

    map = L.map(el, options)

    var baseLayer = L.tileLayer("https://otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg", {
                                  subdomains: "1234",
                                  type: "osm",
                                  attribution: "Tiles &copy; <a href=\"https://www.mapquest.com/\" target=\"_blank\">MapQuest</a>, Data CC-BY-SA OpenStreetMap",
                                  maxZoom: 18
                                }).addTo(map)

    map.on("locationfound", locationFound)
    map.on("locationerror", locationError)

    map.addControl(locateUserButton)

    map.addControl(new AddLayerButton(function () {
      /*eslint no-alert:0*/
      var layerName = prompt("Leaflet Provider:")
      addLayer(layerName)
    }))

    layerControl = L.control.layers({"MapQuest": baseLayer}, [], {position: "bottomright"})

    if (localStorageTest()) {
      var layers = JSON.parse(localStorage.getItem("map/customLayers"))

      if (layers)
        layers.forEach(addLayer)
    }

    var nodeDict = {}
    var linkDict = {}
    var highlight

    function resetMarkerStyles(nodes, links) {
      Object.keys(nodes).forEach( function (d) {
        nodes[d].resetStyle()
      })

      Object.keys(links).forEach( function (d) {
        links[d].resetStyle()
      })
    }

    function setView(bounds) {
      map.fitBounds(bounds, {paddingTopLeft: [sidebar.getWidth(), 0]})
    }

    function resetZoom() {
      setView(barycenter.getBounds())
    }

    function goto(m) {
      var bounds

      if ("getBounds" in m)
        bounds = m.getBounds()
      else
        bounds = L.latLngBounds([m.getLatLng()])

      setView(bounds)

      return m
    }

    function updateView(nopanzoom) {
      resetMarkerStyles(nodeDict, linkDict)
      var m

      if (highlight !== undefined)
        if (highlight.type === "node") {
          m = nodeDict[highlight.o.nodeinfo.node_id]

          if (m)
            m.setStyle({ color: "orange", weight: 20, fillOpacity: 1, opacity: 0.7, className: "stroke-first" })
        } else if (highlight.type === "link") {
          m = linkDict[highlight.o.id]

          if (m)
            m.setStyle({ weight: 7, opacity: 1, dashArray: "10, 10" })
        }

      if (!nopanzoom)
        if (m)
          goto(m)
        else
          resetZoom()
    }

    function calcBarycenter(nodes) {
      nodes = nodes.map(function (d) { return d.nodeinfo.location })
      var lats = nodes.map(function (d) { return d.latitude })
      var lngs = nodes.map(function (d) { return d.longitude })

      var barycenter = L.latLng(d3.median(lats), d3.median(lngs))
      var barycenterDev = [d3.deviation(lats), d3.deviation(lngs)]

      var barycenterCircle = L.latLng(barycenter.lat + barycenterDev[0],
                                      barycenter.lng + barycenterDev[1])

      var r = barycenter.distanceTo(barycenterCircle)

      return L.circle(barycenter, r * config.mapSigmaScale)
    }

    self.setData = function (data) {
      nodeDict = {}
      linkDict = {}

      if (groupOffline)
        groupOffline.clearLayers()

      if (groupOnline)
        groupOnline.clearLayers()

      if (groupNew)
        groupNew.clearLayers()

      if (groupLost)
        groupLost.clearLayers()

      if (groupLines)
        groupLines.clearLayers()

      var lines = addLinksToMap(linkDict, linkScale, data.graph.links, router)
      groupLines = L.featureGroup(lines).addTo(map)

      barycenter = calcBarycenter(data.nodes.all.filter(has_location))

      var nodesOnline = subtract(data.nodes.all.filter(online), data.nodes.new)
      var nodesOffline = subtract(data.nodes.all.filter(offline), data.nodes.lost)

      var markersOnline = nodesOnline.filter(has_location)
        .map(mkMarker(nodeDict, function () { return iconOnline }, router))

      var markersOffline = nodesOffline.filter(has_location)
        .map(mkMarker(nodeDict, function () { return iconOffline }, router))

      var markersNew = data.nodes.new.filter(has_location)
        .map(mkMarker(nodeDict, function () { return iconNew }, router))

      var markersLost = data.nodes.lost.filter(has_location)
        .map(mkMarker(nodeDict, function (d) {
          if (d.lastseen.isAfter(moment(data.now).subtract(3, "days")))
            return iconAlert

          return iconLost
        }, router))

      groupOffline = L.featureGroup(markersOffline).addTo(map)
      groupOnline = L.featureGroup(markersOnline).addTo(map)
      groupNew = L.featureGroup(markersNew).addTo(map)
      groupLost = L.featureGroup(markersLost).addTo(map)

      updateView(true)
    }

    self.resetView = function () {
      disableTracking()
      highlight = undefined
      updateView()
    }

    self.gotoNode = function (d) {
      disableTracking()
      highlight = {type: "node", o: d}
      updateView()
    }

    self.gotoLink = function (d) {
      disableTracking()
      highlight = {type: "link", o: d}
      updateView()
    }

    self.destroy = function () {
      map.remove()
    }

    return self
  }
})