4
0

map.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. define(["d3", "leaflet", "moment", "leaflet.label"], function (d3, L, moment) {
  2. var options = { worldCopyJump: true,
  3. zoomControl: false
  4. }
  5. function mkMarker(dict, iconFunc, router) {
  6. return function (d) {
  7. var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], iconFunc(d))
  8. m.resetStyle = function () {
  9. m.setStyle(iconFunc(d))
  10. }
  11. m.on("click", router.node(d))
  12. m.bindLabel(d.nodeinfo.hostname)
  13. dict[d.nodeinfo.node_id] = m
  14. return m
  15. }
  16. }
  17. function addLinksToMap(dict, linkScale, graph, router) {
  18. graph = graph.filter( function (d) {
  19. return "distance" in d
  20. })
  21. var lines = graph.map( function (d) {
  22. var opts = { color: linkScale(d.tq).hex(),
  23. weight: 4,
  24. opacity: 0.5,
  25. dashArray: "none"
  26. }
  27. var line = L.polyline(d.latlngs, opts)
  28. line.resetStyle = function () {
  29. line.setStyle(opts)
  30. }
  31. line.bindLabel(d.source.node.nodeinfo.hostname + " – " + d.target.node.nodeinfo.hostname + "<br><strong>" + showDistance(d) + " / " + showTq(d) + "</strong>")
  32. line.on("click", router.link(d))
  33. dict[d.id] = line
  34. return line
  35. })
  36. return lines
  37. }
  38. var iconOnline = { color: "#1566A9", fillColor: "#1566A9", radius: 6, fillOpacity: 0.5, opacity: 0.5, weight: 2, className: "stroke-first" }
  39. var iconOffline = { color: "#D43E2A", fillColor: "#D43E2A", radius: 3, fillOpacity: 0.5, opacity: 0.5, weight: 1, className: "stroke-first" }
  40. var iconLost = { color: "#D43E2A", fillColor: "#D43E2A", radius: 6, fillOpacity: 0.8, opacity: 0.8, weight: 1, className: "stroke-first" }
  41. var iconAlert = { color: "#D43E2A", fillColor: "#D43E2A", radius: 6, fillOpacity: 0.8, opacity: 0.8, weight: 2, className: "stroke-first node-alert" }
  42. var iconNew = { color: "#1566A9", fillColor: "#93E929", radius: 6, fillOpacity: 1.0, opacity: 0.5, weight: 2 }
  43. return function (config, linkScale, sidebar, router) {
  44. var self = this
  45. var barycenter
  46. var groupOnline, groupOffline, groupNew, groupLost, groupLines
  47. var el = document.createElement("div")
  48. el.classList.add("map")
  49. self.div = el
  50. var map = L.map(el, options)
  51. L.tileLayer("https://otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg", {
  52. subdomains: "1234",
  53. type: "osm",
  54. attribution: "Tiles &copy; <a href=\"https://www.mapquest.com/\" target=\"_blank\">MapQuest</a>, Data CC-BY-SA OpenStreetMap",
  55. maxZoom: 18
  56. }).addTo(map)
  57. var nodeDict = {}
  58. var linkDict = {}
  59. var highlight
  60. function resetMarkerStyles(nodes, links) {
  61. Object.keys(nodes).forEach( function (d) {
  62. nodes[d].resetStyle()
  63. })
  64. Object.keys(links).forEach( function (d) {
  65. links[d].resetStyle()
  66. })
  67. }
  68. function setView(bounds) {
  69. map.fitBounds(bounds, {paddingTopLeft: [sidebar.getWidth(), 0]})
  70. }
  71. function resetZoom() {
  72. setView(barycenter.getBounds())
  73. }
  74. function goto(m) {
  75. var bounds
  76. if ("getBounds" in m)
  77. bounds = m.getBounds()
  78. else
  79. bounds = L.latLngBounds([m.getLatLng()])
  80. setView(bounds)
  81. return m
  82. }
  83. function updateView(nopanzoom) {
  84. resetMarkerStyles(nodeDict, linkDict)
  85. var m
  86. if (highlight !== undefined)
  87. if (highlight.type === "node") {
  88. m = nodeDict[highlight.o.nodeinfo.node_id]
  89. if (m)
  90. m.setStyle({ color: "orange", weight: 20, fillOpacity: 1, opacity: 0.7, className: "stroke-first" })
  91. } else if (highlight.type === "link") {
  92. m = linkDict[highlight.o.id]
  93. if (m)
  94. m.setStyle({ weight: 7, opacity: 1, dashArray: "10, 10" })
  95. }
  96. if (!nopanzoom)
  97. if (m)
  98. goto(m)
  99. else
  100. resetZoom()
  101. }
  102. function calcBarycenter(nodes) {
  103. nodes = nodes.map(function (d) { return d.nodeinfo.location })
  104. var lats = nodes.map(function (d) { return d.latitude })
  105. var lngs = nodes.map(function (d) { return d.longitude })
  106. var barycenter = L.latLng(d3.median(lats), d3.median(lngs))
  107. var barycenterDev = [d3.deviation(lats), d3.deviation(lngs)]
  108. var barycenterCircle = L.latLng(barycenter.lat + barycenterDev[0],
  109. barycenter.lng + barycenterDev[1])
  110. var r = barycenter.distanceTo(barycenterCircle)
  111. return L.circle(barycenter, r * config.mapSigmaScale)
  112. }
  113. self.setData = function (data) {
  114. nodeDict = {}
  115. linkDict = {}
  116. if (groupOffline)
  117. groupOffline.clearLayers()
  118. if (groupOnline)
  119. groupOnline.clearLayers()
  120. if (groupNew)
  121. groupNew.clearLayers()
  122. if (groupLost)
  123. groupLost.clearLayers()
  124. if (groupLines)
  125. groupLines.clearLayers()
  126. var lines = addLinksToMap(linkDict, linkScale, data.graph.links, router)
  127. groupLines = L.featureGroup(lines).addTo(map)
  128. barycenter = calcBarycenter(data.nodes.all.filter(has_location))
  129. var nodesOnline = subtract(data.nodes.all.filter(online), data.nodes.new)
  130. var nodesOffline = subtract(data.nodes.all.filter(offline), data.nodes.lost)
  131. var markersOnline = nodesOnline.filter(has_location)
  132. .map(mkMarker(nodeDict, function () { return iconOnline }, router))
  133. var markersOffline = nodesOffline.filter(has_location)
  134. .map(mkMarker(nodeDict, function () { return iconOffline }, router))
  135. var markersNew = data.nodes.new.filter(has_location)
  136. .map(mkMarker(nodeDict, function () { return iconNew }, router))
  137. var markersLost = data.nodes.lost.filter(has_location)
  138. .map(mkMarker(nodeDict, function (d) {
  139. if (d.lastseen.isAfter(moment(data.now).subtract(3, "days")))
  140. return iconAlert
  141. return iconLost
  142. }, router))
  143. groupOffline = L.featureGroup(markersOffline).addTo(map)
  144. groupOnline = L.featureGroup(markersOnline).addTo(map)
  145. groupNew = L.featureGroup(markersNew).addTo(map)
  146. groupLost = L.featureGroup(markersLost).addTo(map)
  147. updateView(true)
  148. }
  149. self.resetView = function () {
  150. highlight = undefined
  151. updateView()
  152. }
  153. self.gotoNode = function (d) {
  154. highlight = {type: "node", o: d}
  155. updateView()
  156. }
  157. self.gotoLink = function (d) {
  158. highlight = {type: "link", o: d}
  159. updateView()
  160. }
  161. self.destroy = function () {
  162. map.remove()
  163. }
  164. return self
  165. }
  166. })