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