map: keep objects highlighted on updates
This commit is contained in:
parent
d9084fa462
commit
290bc6f359
126
lib/map.js
126
lib/map.js
|
@ -74,6 +74,62 @@ define(["d3", "leaflet", "moment", "leaflet.label"], function (d3, L, moment) {
|
||||||
|
|
||||||
var nodeDict = {}
|
var nodeDict = {}
|
||||||
var linkDict = {}
|
var linkDict = {}
|
||||||
|
var highlight
|
||||||
|
|
||||||
|
function resetMarkerStyles(nodes, links) {
|
||||||
|
Object.keys(nodes).forEach( function (d) {
|
||||||
|
nodes[d].resetStyle()
|
||||||
|
})
|
||||||
|
|
||||||
|
Object.keys(links).forEach( function (d) {
|
||||||
|
links[d].resetStyle()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function setView(bounds) {
|
||||||
|
map.fitBounds(bounds, {paddingTopLeft: [sidebar.getWidth(), 0]})
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetZoom() {
|
||||||
|
setView(barycenter.getBounds())
|
||||||
|
}
|
||||||
|
|
||||||
|
function goto(m) {
|
||||||
|
var bounds
|
||||||
|
|
||||||
|
if ("getBounds" in m)
|
||||||
|
bounds = m.getBounds()
|
||||||
|
else
|
||||||
|
bounds = L.latLngBounds([m.getLatLng()])
|
||||||
|
|
||||||
|
setView(bounds)
|
||||||
|
|
||||||
|
return m
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateView(nopanzoom) {
|
||||||
|
resetMarkerStyles(nodeDict, linkDict)
|
||||||
|
var m
|
||||||
|
|
||||||
|
if (highlight !== undefined)
|
||||||
|
if (highlight.type === "node") {
|
||||||
|
m = nodeDict[highlight.o.nodeinfo.node_id]
|
||||||
|
|
||||||
|
if (m)
|
||||||
|
m.setStyle({ fillColor: m.options.color, color: "orange", weight: 20, fillOpacity: 1, opacity: 0.7 })
|
||||||
|
} else if (highlight.type === "link") {
|
||||||
|
m = linkDict[linkId(highlight.o)]
|
||||||
|
|
||||||
|
if (m)
|
||||||
|
m.setStyle({ weight: 7, opacity: 1, dashArray: "10, 10" })
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!nopanzoom)
|
||||||
|
if (m)
|
||||||
|
goto(m)
|
||||||
|
else
|
||||||
|
resetZoom()
|
||||||
|
}
|
||||||
|
|
||||||
function calcBarycenter(nodes) {
|
function calcBarycenter(nodes) {
|
||||||
nodes = nodes.map(function (d) { return d.nodeinfo.location })
|
nodes = nodes.map(function (d) { return d.nodeinfo.location })
|
||||||
|
@ -135,71 +191,27 @@ define(["d3", "leaflet", "moment", "leaflet.label"], function (d3, L, moment) {
|
||||||
return iconLost
|
return iconLost
|
||||||
}, router))
|
}, router))
|
||||||
|
|
||||||
L.featureGroup(markersOffline).addTo(map)
|
groupOffline = L.featureGroup(markersOffline).addTo(map)
|
||||||
L.featureGroup(markersOnline).addTo(map)
|
groupOnline = L.featureGroup(markersOnline).addTo(map)
|
||||||
L.featureGroup(markersNew).addTo(map)
|
groupNew = L.featureGroup(markersNew).addTo(map)
|
||||||
L.featureGroup(markersLost).addTo(map)
|
groupLost = L.featureGroup(markersLost).addTo(map)
|
||||||
|
|
||||||
|
updateView(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetMarkerStyles(nodes, links) {
|
self.resetView = function () {
|
||||||
Object.keys(nodes).forEach( function (d) {
|
highlight = undefined
|
||||||
nodes[d].resetStyle()
|
updateView()
|
||||||
})
|
|
||||||
|
|
||||||
Object.keys(links).forEach( function (d) {
|
|
||||||
links[d].resetStyle()
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setView(bounds) {
|
|
||||||
map.fitBounds(bounds, {paddingTopLeft: [sidebar.getWidth(), 0]})
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetView() {
|
|
||||||
resetMarkerStyles(nodeDict, linkDict)
|
|
||||||
|
|
||||||
setView(barycenter.getBounds())
|
|
||||||
}
|
|
||||||
|
|
||||||
function goto(dict, id) {
|
|
||||||
var m = dict[id]
|
|
||||||
if (m === undefined)
|
|
||||||
return undefined
|
|
||||||
|
|
||||||
var bounds
|
|
||||||
|
|
||||||
if ("getBounds" in m)
|
|
||||||
bounds = m.getBounds()
|
|
||||||
else
|
|
||||||
bounds = L.latLngBounds([m.getLatLng()])
|
|
||||||
|
|
||||||
setView(bounds)
|
|
||||||
|
|
||||||
return m
|
|
||||||
}
|
|
||||||
|
|
||||||
self.resetView = resetView
|
|
||||||
|
|
||||||
self.gotoNode = function (d) {
|
self.gotoNode = function (d) {
|
||||||
resetMarkerStyles(nodeDict, linkDict)
|
highlight = {type: "node", o: d}
|
||||||
|
updateView()
|
||||||
var m = goto(nodeDict, d.nodeinfo.node_id)
|
|
||||||
|
|
||||||
if (m)
|
|
||||||
m.setStyle({ fillColor: m.options.color, color: "orange", weight: 20, fillOpacity: 1, opacity: 0.7 })
|
|
||||||
else
|
|
||||||
resetView()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
self.gotoLink = function (d) {
|
self.gotoLink = function (d) {
|
||||||
resetMarkerStyles(nodeDict, linkDict)
|
highlight = {type: "link", o: d}
|
||||||
|
updateView()
|
||||||
var m = goto(linkDict, d.id)
|
|
||||||
|
|
||||||
if (m)
|
|
||||||
m.setStyle({ weight: 7, opacity: 1, dashArray: "10, 10" })
|
|
||||||
else
|
|
||||||
resetView()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
self.destroy = function () {
|
self.destroy = function () {
|
||||||
|
|
Loading…
Reference in a new issue