map.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. define(function () {
  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[linkId(d)] = line
  34. return line
  35. })
  36. return lines
  37. }
  38. var iconOnline = { color: "#1566A9", radius: 6, fillOpacity: 0.5, weight: 2, className: "stroke-first" }
  39. var iconOffline = { color: "#D43E2A", radius: 3, fillOpacity: 0.5, weight: 1, className: "stroke-first" }
  40. var iconLost = { color: "#D43E2A", radius: 6, fillOpacity: 0.5, weight: 1, className: "stroke-first" }
  41. var iconAlert = { color: "#D43E2A", radius: 6, fillOpacity: 0.5, weight: 2, className: "stroke-first node-alert" }
  42. var iconNew = { color: "#558020", radius: 6, fillOpacity: 0.5, weight: 2, className: "stroke-first" }
  43. var groupOnline, groupOffline, groupNew, groupLost
  44. return function (linkScale, sidebar, router) {
  45. var self = this
  46. var el = document.createElement("div")
  47. el.classList.add("map")
  48. self.div = el
  49. var map = L.map(el, options)
  50. L.control.zoom({ position: "topright" }).addTo(map)
  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. self.setData = function (now, nodes, links, newnodes, lostnodes) {
  60. nodeDict = {}
  61. linkDict = {}
  62. var lines = addLinksToMap(linkDict, linkScale, links, router)
  63. L.featureGroup(lines).addTo(map)
  64. var nodesOnline = subtract(nodes.filter(online), newnodes)
  65. var nodesOffline = subtract(nodes.filter(offline), lostnodes)
  66. var markersOnline = nodesOnline.filter(has_location)
  67. .map(mkMarker(nodeDict, function (d) { return iconOnline }, router))
  68. var markersOffline = nodesOffline.filter(has_location)
  69. .map(mkMarker(nodeDict, function (d) { return iconOffline }, router))
  70. var markersNew = newnodes.filter(has_location)
  71. .map(mkMarker(nodeDict, function (d) { return iconNew }, router))
  72. var markersLost = lostnodes.filter(has_location)
  73. .map(mkMarker(nodeDict, function (d) {
  74. if (d.lastseen.isAfter(moment(now).subtract(3, 'days')))
  75. return iconAlert
  76. return iconLost
  77. }, router))
  78. groupOffline = L.featureGroup(markersOffline).addTo(map)
  79. groupOnline = L.featureGroup(markersOnline).addTo(map)
  80. groupNew = L.featureGroup(markersNew).addTo(map)
  81. groupLost = L.featureGroup(markersLost).addTo(map)
  82. }
  83. function resetView() {
  84. resetMarkerStyles(nodeDict, linkDict)
  85. var bounds = L.latLngBounds([])
  86. bounds.extend(groupNew.getBounds())
  87. bounds.extend(groupLost.getBounds())
  88. if (!bounds.isValid())
  89. bounds.extend(groupOnline.getBounds())
  90. if (!bounds.isValid())
  91. bounds.extend(groupOffline.getBounds())
  92. if (bounds.isValid())
  93. setView(bounds)
  94. }
  95. function setView(bounds) {
  96. map.fitBounds(bounds, {paddingTopLeft: [sidebar.getWidth(), 0]})
  97. }
  98. function resetMarkerStyles(nodes, links) {
  99. Object.keys(nodes).forEach( function (d) {
  100. nodes[d].resetStyle()
  101. })
  102. Object.keys(links).forEach( function (d) {
  103. links[d].resetStyle()
  104. })
  105. }
  106. function goto(dict, id) {
  107. var m = dict[id]
  108. if (m === undefined)
  109. return
  110. var bounds
  111. if ("getBounds" in m)
  112. bounds = m.getBounds()
  113. else
  114. bounds = L.latLngBounds([m.getLatLng()])
  115. setView(bounds)
  116. return m
  117. }
  118. self.resetView = resetView
  119. self.gotoNode = function (d) {
  120. resetMarkerStyles(nodeDict, linkDict)
  121. var m = goto(nodeDict, d.nodeinfo.node_id)
  122. if (m)
  123. m.setStyle({ fillColor: m.options.color, color: "orange", weight: 20, fillOpacity: 1, opacity: 0.7 })
  124. else
  125. resetView()
  126. }
  127. self.gotoLink = function (d) {
  128. resetMarkerStyles(nodeDict, linkDict)
  129. var m = goto(linkDict, linkId(d))
  130. if (m)
  131. m.setStyle({ weight: 7, opacity: 1, dashArray: "10, 10" })
  132. else
  133. resetView()
  134. }
  135. return self
  136. }
  137. })