hopglass/lib/map.js

551 lines
15 KiB
JavaScript
Raw Normal View History

2015-04-17 23:54:19 +02:00
define(["map/clientlayer", "map/labelslayer",
"d3", "leaflet", "moment", "locationmarker", "rbush",
2015-04-17 22:27:24 +02:00
"leaflet.label", "leaflet.providers"],
function (ClientLayer, LabelsLayer, d3, L, moment, LocationMarker, rbush) {
2015-04-17 22:10:47 +02:00
var options = { worldCopyJump: true,
zoomControl: false
}
2015-04-04 19:08:28 +02:00
2015-04-17 22:10:47 +02:00
var AddLayerButton = L.Control.extend({
options: {
position: "bottomright"
},
2015-04-12 03:24:46 +02:00
2015-04-17 22:10:47 +02:00
initialize: function (f, options) {
L.Util.setOptions(this, options)
this.f = f
},
2015-04-12 03:24:46 +02:00
2015-04-17 22:10:47 +02:00
onAdd: function () {
var button = L.DomUtil.create("button", "add-layer")
button.textContent = "\uF2C7"
2015-04-12 03:24:46 +02:00
// L.DomEvent.disableClickPropagation(button)
// Click propagation isn't disabled as this causes problems with the
// location picking mode; instead propagation is stopped in onClick().
2015-04-17 22:10:47 +02:00
L.DomEvent.addListener(button, "click", this.f, this)
2015-04-12 03:24:46 +02:00
2015-04-17 22:10:47 +02:00
this.button = button
2015-04-12 03:24:46 +02:00
2015-04-17 22:10:47 +02:00
return button
}
})
2015-04-12 03:24:46 +02:00
2015-04-17 22:10:47 +02:00
var LocateButton = L.Control.extend({
options: {
position: "bottomright"
},
2015-04-04 19:08:28 +02:00
2015-04-17 22:10:47 +02:00
active: false,
button: undefined,
2015-04-04 19:08:28 +02:00
2015-04-17 22:10:47 +02:00
initialize: function (f, options) {
L.Util.setOptions(this, options)
this.f = f
},
2015-04-04 19:08:28 +02:00
2015-04-17 22:10:47 +02:00
onAdd: function () {
var button = L.DomUtil.create("button", "locate-user")
button.textContent = "\uF2E9"
2015-04-04 19:08:28 +02:00
2015-04-17 22:10:47 +02:00
L.DomEvent.disableClickPropagation(button)
L.DomEvent.addListener(button, "click", this.onClick, this)
2015-04-04 19:08:28 +02:00
2015-04-17 22:10:47 +02:00
this.button = button
2015-04-04 19:08:28 +02:00
2015-04-17 22:10:47 +02:00
return button
},
2015-04-04 19:08:28 +02:00
2015-04-17 22:10:47 +02:00
update: function() {
this.button.classList.toggle("active", this.active)
},
2015-04-04 19:08:28 +02:00
2015-04-17 22:10:47 +02:00
set: function(v) {
this.active = v
this.update()
},
2015-04-04 19:08:28 +02:00
2015-04-17 22:10:47 +02:00
onClick: function () {
this.f(!this.active)
}
})
2015-04-04 19:08:28 +02:00
2015-11-09 10:01:20 +01:00
var CoordsPickerButton = 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", "coord-picker")
button.textContent = "\uF2A6"
2015-11-09 10:01:20 +01:00
2015-12-30 08:21:46 +01:00
// Click propagation isn't disabled as this causes problems with the
// location picking mode; instead propagation is stopped in onClick().
2015-11-09 10:01:20 +01:00
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()
},
2015-12-30 08:21:46 +01:00
onClick: function (e) {
L.DomEvent.stopPropagation(e)
2015-11-09 10:01:20 +01:00
this.f(!this.active)
}
})
2015-04-17 22:10:47 +02:00
function mkMarker(dict, iconFunc, router) {
return function (d) {
var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], iconFunc(d))
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
m.resetStyle = function () {
m.setStyle(iconFunc(d))
}
2015-03-25 02:15:17 +01:00
2015-04-17 22:10:47 +02:00
m.on("click", router.node(d))
m.bindLabel(d.nodeinfo.hostname)
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
dict[d.nodeinfo.node_id] = m
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
return m
}
}
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
function addLinksToMap(dict, linkScale, graph, router) {
graph = graph.filter( function (d) {
2016-02-18 21:47:02 +01:00
return "distance" in d && d.type !== "VPN"
2015-04-17 22:10:47 +02:00
})
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
var lines = graph.map( function (d) {
2016-02-18 21:47:02 +01:00
var opts = { color: d.type === "Kabel" ? "#50B0F0" : linkScale(d.tq).hex(),
2015-04-17 22:10:47 +02:00
weight: 4,
opacity: 0.5,
dashArray: "none"
}
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
var line = L.polyline(d.latlngs, opts)
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
line.resetStyle = function () {
line.setStyle(opts)
}
2015-03-25 02:15:17 +01:00
2015-04-17 22:10:47 +02:00
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))
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
dict[d.id] = line
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
return line
})
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
return lines
}
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
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 }
2015-03-25 00:54:00 +01:00
return function (config, linkScale, sidebar, router, buttons) {
2015-04-17 22:10:47 +02:00
var self = this
var barycenter
var groupOnline, groupOffline, groupNew, groupLost, groupLines
var savedView
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
var map, userLocation
var layerControl
var customLayers = {}
2015-07-07 16:36:19 +02:00
var baseLayers = {}
2015-04-04 19:08:28 +02:00
2015-04-17 22:10:47 +02:00
var locateUserButton = new LocateButton(function (d) {
if (d)
enableTracking()
else
disableTracking()
})
2015-04-04 19:08:28 +02:00
var mybuttons = []
function addButton(button) {
var el = button.onAdd()
mybuttons.push(el)
buttons.appendChild(el)
}
function clearButtons() {
mybuttons.forEach( function (d) {
buttons.removeChild(d)
})
}
2015-11-09 10:01:20 +01:00
var showCoordsPickerButton = new CoordsPickerButton(function (d) {
if (d)
enableCoords()
else
disableCoords()
})
function saveView() {
savedView = {center: map.getCenter(),
zoom: map.getZoom()}
}
2015-04-17 22:10:47 +02:00
function enableTracking() {
map.locate({watch: true,
enableHighAccuracy: true,
setView: true
})
locateUserButton.set(true)
}
2015-04-04 19:08:28 +02:00
2015-04-17 22:10:47 +02:00
function disableTracking() {
map.stopLocate()
locationError()
locateUserButton.set(false)
}
2015-04-04 19:08:28 +02:00
2015-11-09 10:01:20 +01:00
function enableCoords() {
map.getContainer().classList.add("pick-coordinates")
map.on("click", showCoordinates)
showCoordsPickerButton.set(true)
}
function disableCoords() {
map.getContainer().classList.remove("pick-coordinates")
map.off("click", showCoordinates)
showCoordsPickerButton.set(false)
}
function showCoordinates(e) {
router.gotoLocation(e.latlng)
// window.prompt("Koordinaten (Lat, Lng)", e.latlng.lat.toFixed(9) + ", " + e.latlng.lng.toFixed(9))
2015-11-09 10:01:20 +01:00
disableCoords()
}
2015-04-17 22:10:47 +02:00
function locationFound(e) {
if (!userLocation)
userLocation = new LocationMarker(e.latlng).addTo(map)
2015-04-04 19:08:28 +02:00
2015-04-17 22:10:47 +02:00
userLocation.setLatLng(e.latlng)
userLocation.setAccuracy(e.accuracy)
}
2015-04-04 19:08:28 +02:00
2015-04-17 22:10:47 +02:00
function locationError() {
if (userLocation) {
map.removeLayer(userLocation)
userLocation = null
}
2015-04-04 19:08:28 +02:00
}
2015-04-17 22:10:47 +02:00
function addLayer(layerName) {
2015-07-07 16:36:19 +02:00
if (layerName in baseLayers)
return
if (layerName in customLayers)
2015-04-17 22:10:47 +02:00
return
2015-04-15 22:25:22 +02:00
2015-04-17 22:10:47 +02:00
try {
var layer = L.tileLayer.provider(layerName)
layerControl.addBaseLayer(layer, layerName)
customLayers[layerName] = layer
2015-04-15 22:25:22 +02:00
2015-04-17 22:10:47 +02:00
if (localStorageTest())
localStorage.setItem("map/customLayers", JSON.stringify(Object.keys(customLayers)))
2015-04-17 22:10:47 +02:00
} catch (e) {
return
}
2015-04-15 22:25:22 +02:00
}
function contextMenuGotoLocation(e) {
router.gotoLocation(e.latlng)
}
2015-04-17 22:10:47 +02:00
var el = document.createElement("div")
el.classList.add("map")
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
map = L.map(el, options)
2015-03-25 00:54:00 +01:00
2015-07-07 16:36:19 +02:00
var layers = config.mapLayers.map( function (d) {
return {
"name": d.name,
"layer": "url" in d ? L.tileLayer(d.url, d.config) : L.tileLayer.provider(d.name)
}
})
var maxLayerZoom = Math.max.apply(Math, config.mapLayers.map(
function(d) {
return (typeof d.config !== "undefined" && typeof d.config.maxZoom !== "undefined") ? d.config.maxZoom : 18
}))
2015-07-07 16:36:19 +02:00
layers[0].layer.addTo(map)
layers.forEach( function (d) {
baseLayers[d.name] = d.layer
})
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
map.on("locationfound", locationFound)
map.on("locationerror", locationError)
map.on("dragend", saveView)
map.on("contextmenu", contextMenuGotoLocation)
2015-04-04 19:08:28 +02:00
addButton(locateUserButton)
2015-11-09 10:01:20 +01:00
addButton(showCoordsPickerButton)
2015-04-04 19:08:28 +02:00
addButton(new AddLayerButton(function () {
2015-04-17 22:10:47 +02:00
/*eslint no-alert:0*/
var layerName = prompt("Leaflet Provider:")
addLayer(layerName)
}))
2015-04-12 03:24:46 +02:00
2015-07-07 16:36:19 +02:00
layerControl = L.control.layers(baseLayers, [], {position: "bottomright"})
2015-07-07 21:42:55 +02:00
layerControl.addTo(map)
2015-04-15 22:25:22 +02:00
2015-04-17 22:10:47 +02:00
if (localStorageTest()) {
2015-07-07 16:36:19 +02:00
var d = JSON.parse(localStorage.getItem("map/customLayers"))
2015-04-15 22:25:22 +02:00
2015-07-07 16:36:19 +02:00
if (d)
d.forEach(addLayer)
d = JSON.parse(localStorage.getItem("map/selectedLayer"))
d = d && d.name in baseLayers ? baseLayers[d.name] : d && d.name in customLayers ? customLayers[d.name] : false
if (d) {
map.removeLayer(layers[0].layer)
map.addLayer(d)
}
2015-04-17 22:10:47 +02:00
}
2015-04-15 22:25:22 +02:00
map.on("baselayerchange", function(e) {
if (localStorageTest())
localStorage.setItem("map/selectedLayer", JSON.stringify({name: e.name}))
})
var clientLayer = new ClientLayer({minZoom: 15, maxZoom: maxLayerZoom})
2015-04-17 22:10:47 +02:00
clientLayer.addTo(map)
clientLayer.setZIndex(5)
2015-04-17 01:02:56 +02:00
var labelsLayer = new LabelsLayer({maxZoom: maxLayerZoom})
2015-04-17 23:54:19 +02:00
labelsLayer.addTo(map)
labelsLayer.setZIndex(6)
2015-04-17 22:10:47 +02:00
var nodeDict = {}
var linkDict = {}
var highlight
2015-04-17 22:10:47 +02:00
function resetMarkerStyles(nodes, links) {
Object.keys(nodes).forEach( function (d) {
nodes[d].resetStyle()
})
2015-04-17 22:10:47 +02:00
Object.keys(links).forEach( function (d) {
links[d].resetStyle()
})
}
2015-04-17 22:10:47 +02:00
function setView(bounds) {
map.fitBounds(bounds, {paddingTopLeft: [sidebar(), 0]})
2015-04-17 22:10:47 +02:00
}
2015-04-17 22:10:47 +02:00
function resetZoom() {
2015-07-07 21:42:55 +02:00
if (barycenter)
setView(barycenter.getBounds())
2015-04-17 22:10:47 +02:00
}
2015-04-17 22:10:47 +02:00
function goto(m) {
var bounds
2015-04-17 22:10:47 +02:00
if ("getBounds" in m)
bounds = m.getBounds()
else
bounds = L.latLngBounds([m.getLatLng()])
2015-04-17 22:10:47 +02:00
setView(bounds)
2015-04-17 22:10:47 +02:00
return m
}
2015-04-17 22:10:47 +02:00
function updateView(nopanzoom) {
resetMarkerStyles(nodeDict, linkDict)
var m
2015-04-17 22:10:47 +02:00
if (highlight !== undefined)
if (highlight.type === "node") {
m = nodeDict[highlight.o.nodeinfo.node_id]
2015-04-17 22:10:47 +02:00
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]
2015-04-17 22:10:47 +02:00
if (m)
m.setStyle({ weight: 7, opacity: 1, dashArray: "10, 10" })
}
if (!nopanzoom)
if (m)
2015-04-17 22:10:47 +02:00
goto(m)
else if (savedView)
map.setView(savedView.center, savedView.zoom)
2015-04-17 22:10:47 +02:00
else
resetZoom()
}
2015-04-17 22:10:47 +02:00
function calcBarycenter(nodes) {
nodes = nodes.map(function (d) { return d.nodeinfo.location })
2015-07-07 21:42:55 +02:00
if (nodes.length === 0)
return undefined
2015-04-17 22:10:47 +02:00
var lats = nodes.map(function (d) { return d.latitude })
var lngs = nodes.map(function (d) { return d.longitude })
2015-03-25 01:16:15 +01:00
2015-04-17 22:10:47 +02:00
var barycenter = L.latLng(d3.median(lats), d3.median(lngs))
var barycenterDev = [d3.deviation(lats), d3.deviation(lngs)]
2015-07-07 21:28:44 +02:00
if (barycenterDev[0] === undefined)
barycenterDev[0] = 0
if (barycenterDev[1] === undefined)
barycenterDev[1] = 0
2015-04-17 22:10:47 +02:00
var barycenterCircle = L.latLng(barycenter.lat + barycenterDev[0],
barycenter.lng + barycenterDev[1])
2015-04-17 22:10:47 +02:00
var r = barycenter.distanceTo(barycenterCircle)
2015-04-17 22:10:47 +02:00
return L.circle(barycenter, r * config.mapSigmaScale)
}
function mapRTree(d) {
var o = [ d.nodeinfo.location.latitude, d.nodeinfo.location.longitude,
d.nodeinfo.location.latitude, d.nodeinfo.location.longitude]
o.node = d
return o
}
2015-04-17 22:10:47 +02:00
self.setData = function (data) {
nodeDict = {}
linkDict = {}
2015-04-17 22:10:47 +02:00
if (groupOffline)
groupOffline.clearLayers()
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
if (groupOnline)
groupOnline.clearLayers()
2015-04-03 00:02:00 +02:00
2015-04-17 22:10:47 +02:00
if (groupNew)
groupNew.clearLayers()
2015-04-03 00:02:00 +02:00
2015-04-17 22:10:47 +02:00
if (groupLost)
groupLost.clearLayers()
2015-04-03 00:02:00 +02:00
2015-04-17 22:10:47 +02:00
if (groupLines)
groupLines.clearLayers()
2015-04-03 00:02:00 +02:00
2015-04-17 22:10:47 +02:00
var lines = addLinksToMap(linkDict, linkScale, data.graph.links, router)
groupLines = L.featureGroup(lines).addTo(map)
2015-04-03 00:02:00 +02:00
if (typeof config.fixedCenter === "undefined")
barycenter = calcBarycenter(data.nodes.all.filter(has_location))
else
barycenter = L.circle(L.latLng(new L.LatLng(config.fixedCenter.lat, config.fixedCenter.lng)), config.fixedCenter.radius * 1000)
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
var nodesOnline = subtract(data.nodes.all.filter(online), data.nodes.new)
var nodesOffline = subtract(data.nodes.all.filter(offline), data.nodes.lost)
2015-04-17 22:10:47 +02:00
var markersOnline = nodesOnline.filter(has_location)
.map(mkMarker(nodeDict, function () { return iconOnline }, router))
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
var markersOffline = nodesOffline.filter(has_location)
.map(mkMarker(nodeDict, function () { return iconOffline }, router))
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
var markersNew = data.nodes.new.filter(has_location)
.map(mkMarker(nodeDict, function () { return iconNew }, router))
2015-03-25 10:29:41 +01:00
2015-04-17 22:10:47 +02:00
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
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
return iconLost
}, router))
2015-04-17 22:10:47 +02:00
groupOffline = L.featureGroup(markersOffline).addTo(map)
groupOnline = L.featureGroup(markersOnline).addTo(map)
groupLost = L.featureGroup(markersLost).addTo(map)
groupNew = L.featureGroup(markersNew).addTo(map)
var rtreeOnlineAll = rbush(9)
rtreeOnlineAll.load(data.nodes.all.filter(online).filter(has_location).map(mapRTree))
clientLayer.setData(rtreeOnlineAll)
2015-04-20 02:51:27 +02:00
labelsLayer.setData({online: nodesOnline.filter(has_location),
offline: nodesOffline.filter(has_location),
new: data.nodes.new.filter(has_location),
lost: data.nodes.lost.filter(has_location)
2015-04-17 23:54:19 +02:00
})
2015-03-29 16:14:10 +02:00
2015-04-17 22:10:47 +02:00
updateView(true)
}
2015-04-17 01:02:56 +02:00
2015-04-17 22:10:47 +02:00
self.resetView = function () {
disableTracking()
highlight = undefined
updateView()
}
2015-03-29 16:14:10 +02:00
2015-04-17 22:10:47 +02:00
self.gotoNode = function (d) {
disableTracking()
highlight = {type: "node", o: d}
updateView()
}
2015-03-25 01:16:15 +01:00
2015-04-17 22:10:47 +02:00
self.gotoLink = function (d) {
disableTracking()
highlight = {type: "link", o: d}
updateView()
}
2015-03-25 00:54:00 +01:00
self.gotoLocation = function () {
//ignore
}
2015-04-17 22:10:47 +02:00
self.destroy = function () {
clearButtons()
2015-04-17 22:10:47 +02:00
map.remove()
2015-07-12 00:11:18 +02:00
if (el.parentNode)
el.parentNode.removeChild(el)
}
self.render = function (d) {
d.appendChild(el)
2015-07-12 00:42:24 +02:00
map.invalidateSize()
2015-04-17 22:10:47 +02:00
}
2015-03-25 00:54:00 +01:00
2015-04-17 22:10:47 +02:00
return self
}
2015-03-25 00:54:00 +01:00
})