map: locate user and show marker

lib/map.js

@@ -1,7 +1,47 @@
-define(["d3", "leaflet", "moment", "leaflet.label"], function (d3, L, moment) {
-  var options = { worldCopyJump: true,
-                  zoomControl: false
-                }
+define(["d3", "leaflet", "moment", "locationmarker", "leaflet.label"],
+  function (d3, L, moment, LocationMarker) {
+   var options = { worldCopyJump: true,
+                   zoomControl: false
+                 }
+
+   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))
@@ -59,11 +99,49 @@ define(["d3", "leaflet", "moment", "leaflet.label"], function (d3, L, moment) {
     var barycenter
     var groupOnline, groupOffline, groupNew, groupLost, groupLines
 
+    var map, userLocation
+
+    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
+      }
+    }
+
     var el = document.createElement("div")
     el.classList.add("map")
     self.div = el
 
-    var map = L.map(el, options)
+    map = L.map(el, options)
 
     L.tileLayer("https://otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg", {
       subdomains: "1234",
@@ -72,6 +150,11 @@ define(["d3", "leaflet", "moment", "leaflet.label"], function (d3, L, moment) {
       maxZoom: 18
     }).addTo(map)
 
+    map.on("locationfound", locationFound)
+    map.on("locationerror", locationError)
+
+    map.addControl(locateUserButton)
+
     var nodeDict = {}
     var linkDict = {}
     var highlight
@@ -200,16 +283,19 @@ define(["d3", "leaflet", "moment", "leaflet.label"], function (d3, L, moment) {
     }
 
     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()
     }