4
0

map.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  1. define(["map/clientlayer", "map/labelslayer",
  2. "d3", "leaflet", "moment", "locationmarker", "rbush",
  3. "leaflet.label", "leaflet.providers"],
  4. function (ClientLayer, LabelsLayer, d3, L, moment, LocationMarker, rbush) {
  5. var options = { worldCopyJump: true,
  6. zoomControl: false
  7. }
  8. var CoordsButton = L.Control.extend({
  9. options: {
  10. position: "bottomright"
  11. },
  12. active: false,
  13. button: undefined,
  14. initialize: function (f, options) {
  15. L.Util.setOptions(this, options)
  16. this.f = f
  17. },
  18. onAdd: function () {
  19. var button = L.DomUtil.create("button", "show-coords")
  20. L.DomEvent.disableClickPropagation(button)
  21. L.DomEvent.addListener(button, "click", this.onClick, this)
  22. this.button = button
  23. return button
  24. },
  25. update: function() {
  26. this.button.classList.toggle("active", this.active)
  27. },
  28. set: function(v) {
  29. this.active = v
  30. this.update()
  31. },
  32. onClick: function () {
  33. this.f(!this.active)
  34. }
  35. })
  36. var LocateButton = L.Control.extend({
  37. options: {
  38. position: "bottomright"
  39. },
  40. active: false,
  41. button: undefined,
  42. initialize: function (f, options) {
  43. L.Util.setOptions(this, options)
  44. this.f = f
  45. },
  46. onAdd: function () {
  47. var button = L.DomUtil.create("button", "locate-user")
  48. L.DomEvent.disableClickPropagation(button)
  49. L.DomEvent.addListener(button, "click", this.onClick, this)
  50. this.button = button
  51. return button
  52. },
  53. update: function() {
  54. this.button.classList.toggle("active", this.active)
  55. },
  56. set: function(v) {
  57. this.active = v
  58. this.update()
  59. },
  60. onClick: function () {
  61. this.f(!this.active)
  62. }
  63. })
  64. function mkMarker(dict, iconFunc, router) {
  65. return function (d) {
  66. var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], iconFunc(d))
  67. m.resetStyle = function () {
  68. m.setStyle(iconFunc(d))
  69. }
  70. m.on("click", router.node(d))
  71. m.bindLabel(d.nodeinfo.hostname)
  72. dict[d.nodeinfo.node_id] = m
  73. return m
  74. }
  75. }
  76. function addLinksToMap(dict, linkScale, graph, router) {
  77. graph = graph.filter( function (d) {
  78. return "distance" in d && !d.vpn
  79. })
  80. var lines = graph.map( function (d) {
  81. var opts = { color: linkScale(d.tq).hex(),
  82. weight: 4,
  83. opacity: 0.5,
  84. dashArray: "none"
  85. }
  86. var line = L.polyline(d.latlngs, opts)
  87. line.resetStyle = function () {
  88. line.setStyle(opts)
  89. }
  90. line.bindLabel(d.source.node.nodeinfo.hostname + " – " + d.target.node.nodeinfo.hostname + "<br><strong>" + showDistance(d) + " / " + showTq(d) + "</strong>")
  91. line.on("click", router.link(d))
  92. dict[d.id] = line
  93. return line
  94. })
  95. return lines
  96. }
  97. var iconOnline = { color: "#1566A9", fillColor: "#1566A9", radius: 6, fillOpacity: 0.5, opacity: 0.5, weight: 2, className: "stroke-first" }
  98. var iconOffline = { color: "#D43E2A", fillColor: "#D43E2A", radius: 3, fillOpacity: 0.5, opacity: 0.5, weight: 1, className: "stroke-first" }
  99. var iconLost = { color: "#D43E2A", fillColor: "#D43E2A", radius: 6, fillOpacity: 0.8, opacity: 0.8, weight: 1, className: "stroke-first" }
  100. var iconAlert = iconLost
  101. var iconNew = { color: "#1566A9", fillColor: "#93E929", radius: 6, fillOpacity: 1.0, opacity: 0.5, weight: 2 }
  102. return function (config, linkScale, sidebar, router) {
  103. var self = this
  104. var barycenter
  105. var groupOnline, groupOffline, groupNew, groupLost, groupLines
  106. var savedView
  107. var map, userLocation
  108. var layerControl
  109. var customLayers = new Set()
  110. var locateUserButton = new LocateButton(function (d) {
  111. if (d)
  112. enableTracking()
  113. else
  114. disableTracking()
  115. })
  116. var showCoordsButton = new CoordsButton(function (d) {
  117. if (d)
  118. enableCoords()
  119. else
  120. disableCoords()
  121. })
  122. function saveView() {
  123. savedView = {center: map.getCenter(),
  124. zoom: map.getZoom()}
  125. }
  126. function enableTracking() {
  127. map.locate({watch: true,
  128. enableHighAccuracy: true,
  129. setView: true
  130. })
  131. locateUserButton.set(true)
  132. }
  133. function disableTracking() {
  134. map.stopLocate()
  135. locationError()
  136. locateUserButton.set(false)
  137. }
  138. function enableCoords() {
  139. map.on("click", showCoordinates)
  140. showCoordsButton.set(true)
  141. }
  142. function disableCoords() {
  143. map.off("click", showCoordinates)
  144. showCoordsButton.set(false)
  145. }
  146. function locationFound(e) {
  147. if (!userLocation)
  148. userLocation = new LocationMarker(e.latlng).addTo(map)
  149. userLocation.setLatLng(e.latlng)
  150. userLocation.setAccuracy(e.accuracy)
  151. }
  152. function showCoordinates(e) {
  153. window.alert("Koordinaten: " + e.latlng.lat.toFixed(6) + ", " + e.latlng.lng.toFixed(6))
  154. disableCoords()
  155. }
  156. function locationError() {
  157. if (userLocation) {
  158. map.removeLayer(userLocation)
  159. userLocation = null
  160. }
  161. }
  162. function addLayer(layerName) {
  163. if (customLayers.has(layerName))
  164. return
  165. try {
  166. var layer = L.tileLayer.provider(layerName)
  167. layerControl.addBaseLayer(layer, layerName)
  168. customLayers.add(layerName)
  169. if (!layerControl.added) {
  170. layerControl.addTo(map)
  171. layerControl.added = true
  172. }
  173. if (localStorageTest())
  174. localStorage.setItem("map/customLayers", JSON.stringify(Array.from(customLayers)))
  175. } catch (e) {
  176. return
  177. }
  178. }
  179. var el = document.createElement("div")
  180. el.classList.add("map")
  181. self.div = el
  182. map = L.map(el, options)
  183. var baseLayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
  184. subdomains: "abc",
  185. type: "osm",
  186. attribution: "&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors",
  187. maxZoom: 18
  188. }).addTo(map)
  189. map.on("locationfound", locationFound)
  190. map.on("locationerror", locationError)
  191. map.on("dragend", saveView)
  192. map.addControl(locateUserButton)
  193. map.addControl(showCoordsButton)
  194. layerControl = L.control.layers({"OpenStreetmap": baseLayer}, [], {position: "bottomright"})
  195. // add additional layers by default
  196. var layerAerial = L.tileLayer.provider("MapQuestOpen.OSM")
  197. layerControl.addBaseLayer(layerAerial, "MapQuest")
  198. customLayers.add("MapQuest")
  199. if (!layerControl.added) {
  200. layerControl.addTo(map)
  201. layerControl.added = true
  202. }
  203. if (localStorageTest()) {
  204. var layers = JSON.parse(localStorage.getItem("map/customLayers"))
  205. if (layers)
  206. layers.forEach(addLayer)
  207. }
  208. if (config.mapShowClients) {
  209. var clientLayer = new ClientLayer({minZoom: 15})
  210. clientLayer.addTo(map)
  211. clientLayer.setZIndex(5)
  212. }
  213. if (config.mapShowLabels) {
  214. var labelsLayer = new LabelsLayer()
  215. labelsLayer.addTo(map)
  216. labelsLayer.setZIndex(6)
  217. }
  218. var nodeDict = {}
  219. var linkDict = {}
  220. var highlight
  221. function resetMarkerStyles(nodes, links) {
  222. Object.keys(nodes).forEach( function (d) {
  223. nodes[d].resetStyle()
  224. })
  225. Object.keys(links).forEach( function (d) {
  226. links[d].resetStyle()
  227. })
  228. }
  229. function setView(bounds) {
  230. map.fitBounds(bounds, {paddingTopLeft: [sidebar.getWidth(), 0]})
  231. }
  232. function resetZoom() {
  233. setView(barycenter.getBounds())
  234. }
  235. function goto(m) {
  236. var bounds
  237. if ("getBounds" in m)
  238. bounds = m.getBounds()
  239. else
  240. bounds = L.latLngBounds([m.getLatLng()])
  241. setView(bounds)
  242. return m
  243. }
  244. function updateView(nopanzoom) {
  245. resetMarkerStyles(nodeDict, linkDict)
  246. var m
  247. if (highlight !== undefined)
  248. if (highlight.type === "node") {
  249. m = nodeDict[highlight.o.nodeinfo.node_id]
  250. if (m)
  251. m.setStyle({ color: "orange", weight: 20, fillOpacity: 1, opacity: 0.7, className: "stroke-first" })
  252. } else if (highlight.type === "link") {
  253. m = linkDict[highlight.o.id]
  254. if (m)
  255. m.setStyle({ weight: 7, opacity: 1, dashArray: "10, 10" })
  256. }
  257. if (!nopanzoom)
  258. if (m)
  259. goto(m)
  260. else if (savedView)
  261. map.setView(savedView.center, savedView.zoom)
  262. else
  263. resetZoom()
  264. }
  265. function calcBarycenter(nodes) {
  266. nodes = nodes.map(function (d) { return d.nodeinfo.location })
  267. var lats = nodes.map(function (d) { return d.latitude })
  268. var lngs = nodes.map(function (d) { return d.longitude })
  269. var barycenter = L.latLng(d3.median(lats), d3.median(lngs))
  270. var barycenterDev = [d3.deviation(lats), d3.deviation(lngs)]
  271. var barycenterCircle = L.latLng(barycenter.lat + barycenterDev[0],
  272. barycenter.lng + barycenterDev[1])
  273. var r = barycenter.distanceTo(barycenterCircle)
  274. return L.circle(barycenter, r * config.mapSigmaScale)
  275. }
  276. function mapRTree(d) {
  277. var o = [ d.nodeinfo.location.latitude, d.nodeinfo.location.longitude,
  278. d.nodeinfo.location.latitude, d.nodeinfo.location.longitude]
  279. o.node = d
  280. return o
  281. }
  282. self.setData = function (data) {
  283. nodeDict = {}
  284. linkDict = {}
  285. if (groupOffline)
  286. groupOffline.clearLayers()
  287. if (groupOnline)
  288. groupOnline.clearLayers()
  289. if (groupNew)
  290. groupNew.clearLayers()
  291. if (groupLost)
  292. groupLost.clearLayers()
  293. if (groupLines)
  294. groupLines.clearLayers()
  295. var lines = addLinksToMap(linkDict, linkScale, data.graph.links, router)
  296. groupLines = L.featureGroup(lines).addTo(map)
  297. barycenter = calcBarycenter(data.nodes.all.filter(has_location))
  298. var nodesOnline = subtract(data.nodes.all.filter(online), data.nodes.new)
  299. var nodesOffline = subtract(data.nodes.all.filter(offline), data.nodes.lost)
  300. var markersOnline = nodesOnline.filter(has_location)
  301. .map(mkMarker(nodeDict, function () { return iconOnline }, router))
  302. var markersOffline = nodesOffline.filter(has_location)
  303. .map(mkMarker(nodeDict, function () { return iconOffline }, router))
  304. var markersNew = data.nodes.new.filter(has_location)
  305. .map(mkMarker(nodeDict, function () { return iconNew }, router))
  306. var markersLost = data.nodes.lost.filter(has_location)
  307. .map(mkMarker(nodeDict, function (d) {
  308. if (d.lastseen.isAfter(moment(data.now).subtract(3, "days")))
  309. return iconAlert
  310. return iconLost
  311. }, router))
  312. groupOffline = L.featureGroup(markersOffline).addTo(map)
  313. groupOnline = L.featureGroup(markersOnline).addTo(map)
  314. groupNew = L.featureGroup(markersNew).addTo(map)
  315. groupLost = L.featureGroup(markersLost).addTo(map)
  316. var rtreeOnlineAll = rbush(9)
  317. rtreeOnlineAll.load(data.nodes.all.filter(online).filter(has_location).map(mapRTree))
  318. if (config.mapShowClients)
  319. clientLayer.setData(rtreeOnlineAll)
  320. if (config.mapShowLabels)
  321. labelsLayer.setData({online: nodesOnline.filter(has_location),
  322. offline: nodesOffline.filter(has_location),
  323. new: data.nodes.new.filter(has_location),
  324. lost: data.nodes.lost.filter(has_location)
  325. })
  326. updateView(true)
  327. }
  328. self.resetView = function () {
  329. disableTracking()
  330. highlight = undefined
  331. updateView()
  332. }
  333. self.gotoNode = function (d) {
  334. disableTracking()
  335. highlight = {type: "node", o: d}
  336. updateView()
  337. }
  338. self.gotoLink = function (d) {
  339. disableTracking()
  340. highlight = {type: "link", o: d}
  341. updateView()
  342. }
  343. self.destroy = function () {
  344. map.remove()
  345. }
  346. return self
  347. }
  348. })