change code style to ffrgb/meshviewer fork
This commit is contained in:
Milan Pässler
parent
59ba0ba29e
commit
418b630e02
42 changed files with 3505 additions and 3154 deletions
716
lib/map.js
716
lib/map.js
|
|
@ -1,74 +1,75 @@
|
|||
define(["map/clientlayer", "map/labelslayer",
|
||||
"d3", "leaflet", "moment", "locationmarker", "rbush",
|
||||
"leaflet.label", "leaflet.providers"],
|
||||
"d3", "leaflet", "moment", "locationmarker", "rbush",
|
||||
"leaflet.label", "leaflet.providers"],
|
||||
function (ClientLayer, LabelsLayer, d3, L, moment, LocationMarker, rbush) {
|
||||
var options = { worldCopyJump: true,
|
||||
zoomControl: false
|
||||
}
|
||||
var options = {
|
||||
worldCopyJump: true,
|
||||
zoomControl: false
|
||||
};
|
||||
|
||||
var AddLayerButton = L.Control.extend({
|
||||
options: {
|
||||
position: "bottomright"
|
||||
},
|
||||
options: {
|
||||
position: "bottomright"
|
||||
},
|
||||
|
||||
initialize: function (f, options) {
|
||||
L.Util.setOptions(this, options)
|
||||
this.f = f
|
||||
},
|
||||
initialize: function (f, options) {
|
||||
L.Util.setOptions(this, options);
|
||||
this.f = f;
|
||||
},
|
||||
|
||||
onAdd: function () {
|
||||
var button = L.DomUtil.create("button", "add-layer")
|
||||
button.textContent = "\uF2C7"
|
||||
onAdd: function () {
|
||||
var button = L.DomUtil.create("button", "add-layer");
|
||||
button.textContent = "\uF2C7";
|
||||
|
||||
// L.DomEvent.disableClickPropagation(button)
|
||||
// Click propagation isn't disabled as this causes problems with the
|
||||
// location picking mode; instead propagation is stopped in onClick().
|
||||
L.DomEvent.addListener(button, "click", this.f, this)
|
||||
// L.DomEvent.disableClickPropagation(button)
|
||||
// Click propagation isn't disabled as this causes problems with the
|
||||
// location picking mode; instead propagation is stopped in onClick().
|
||||
L.DomEvent.addListener(button, "click", this.f, this);
|
||||
|
||||
this.button = button
|
||||
this.button = button;
|
||||
|
||||
return button
|
||||
}
|
||||
})
|
||||
return button;
|
||||
}
|
||||
});
|
||||
|
||||
var LocateButton = L.Control.extend({
|
||||
options: {
|
||||
position: "bottomright"
|
||||
},
|
||||
options: {
|
||||
position: "bottomright"
|
||||
},
|
||||
|
||||
active: false,
|
||||
button: undefined,
|
||||
active: false,
|
||||
button: undefined,
|
||||
|
||||
initialize: function (f, options) {
|
||||
L.Util.setOptions(this, options)
|
||||
this.f = f
|
||||
},
|
||||
initialize: function (f, options) {
|
||||
L.Util.setOptions(this, options);
|
||||
this.f = f;
|
||||
},
|
||||
|
||||
onAdd: function () {
|
||||
var button = L.DomUtil.create("button", "locate-user")
|
||||
button.textContent = "\uF2E9"
|
||||
onAdd: function () {
|
||||
var button = L.DomUtil.create("button", "locate-user");
|
||||
button.textContent = "\uF2E9";
|
||||
|
||||
L.DomEvent.disableClickPropagation(button)
|
||||
L.DomEvent.addListener(button, "click", this.onClick, this)
|
||||
L.DomEvent.disableClickPropagation(button);
|
||||
L.DomEvent.addListener(button, "click", this.onClick, this);
|
||||
|
||||
this.button = button
|
||||
this.button = button;
|
||||
|
||||
return button
|
||||
},
|
||||
return button;
|
||||
},
|
||||
|
||||
update: function() {
|
||||
this.button.classList.toggle("active", this.active)
|
||||
},
|
||||
update: function () {
|
||||
this.button.classList.toggle("active", this.active);
|
||||
},
|
||||
|
||||
set: function(v) {
|
||||
this.active = v
|
||||
this.update()
|
||||
},
|
||||
set: function (v) {
|
||||
this.active = v;
|
||||
this.update();
|
||||
},
|
||||
|
||||
onClick: function () {
|
||||
this.f(!this.active)
|
||||
}
|
||||
})
|
||||
onClick: function () {
|
||||
this.f(!this.active);
|
||||
}
|
||||
});
|
||||
|
||||
var CoordsPickerButton = L.Control.extend({
|
||||
options: {
|
||||
|
|
@ -79,470 +80,547 @@ define(["map/clientlayer", "map/labelslayer",
|
|||
button: undefined,
|
||||
|
||||
initialize: function (f, options) {
|
||||
L.Util.setOptions(this, options)
|
||||
this.f = f
|
||||
L.Util.setOptions(this, options);
|
||||
this.f = f;
|
||||
},
|
||||
|
||||
onAdd: function () {
|
||||
var button = L.DomUtil.create("button", "coord-picker")
|
||||
button.textContent = "\uF2A6"
|
||||
var button = L.DomUtil.create("button", "coord-picker");
|
||||
button.textContent = "\uF2A6";
|
||||
|
||||
// Click propagation isn't disabled as this causes problems with the
|
||||
// location picking mode; instead propagation is stopped in onClick().
|
||||
L.DomEvent.addListener(button, "click", this.onClick, this)
|
||||
L.DomEvent.addListener(button, "click", this.onClick, this);
|
||||
|
||||
this.button = button
|
||||
this.button = button;
|
||||
|
||||
return button
|
||||
return button;
|
||||
},
|
||||
|
||||
update: function() {
|
||||
this.button.classList.toggle("active", this.active)
|
||||
update: function () {
|
||||
this.button.classList.toggle("active", this.active);
|
||||
},
|
||||
|
||||
set: function(v) {
|
||||
this.active = v
|
||||
this.update()
|
||||
set: function (v) {
|
||||
this.active = v;
|
||||
this.update();
|
||||
},
|
||||
|
||||
onClick: function (e) {
|
||||
L.DomEvent.stopPropagation(e)
|
||||
this.f(!this.active)
|
||||
L.DomEvent.stopPropagation(e);
|
||||
this.f(!this.active);
|
||||
}
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
function mkMarker(dict, iconFunc, router) {
|
||||
return function (d) {
|
||||
var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], iconFunc(d))
|
||||
var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], iconFunc(d));
|
||||
|
||||
m.resetStyle = function () {
|
||||
m.setStyle(iconFunc(d))
|
||||
}
|
||||
m.setStyle(iconFunc(d));
|
||||
};
|
||||
|
||||
m.on("click", router.node(d))
|
||||
m.bindLabel(d.nodeinfo.hostname)
|
||||
m.on("click", router.node(d));
|
||||
m.bindLabel(d.nodeinfo.hostname);
|
||||
|
||||
dict[d.nodeinfo.node_id] = m
|
||||
dict[d.nodeinfo.node_id] = m;
|
||||
|
||||
return m
|
||||
}
|
||||
return m;
|
||||
};
|
||||
}
|
||||
|
||||
function addLinksToMap(dict, linkScale, graph, router) {
|
||||
graph = graph.filter( function (d) {
|
||||
return "distance" in d && d.type !== "VPN"
|
||||
})
|
||||
graph = graph.filter(function (d) {
|
||||
return "distance" in d && d.type !== "VPN";
|
||||
});
|
||||
|
||||
var lines = graph.map( function (d) {
|
||||
var opts = { color: d.type === "Kabel" ? "#50B0F0" : linkScale(d.tq).hex(),
|
||||
weight: 4,
|
||||
opacity: 0.5,
|
||||
dashArray: "none"
|
||||
}
|
||||
var lines = graph.map(function (d) {
|
||||
var opts = {
|
||||
color: d.type === "Kabel" ? "#50B0F0" : linkScale(d.tq).hex(),
|
||||
weight: 4,
|
||||
opacity: 0.5,
|
||||
dashArray: "none"
|
||||
};
|
||||
|
||||
var line = L.polyline(d.latlngs, opts)
|
||||
var line = L.polyline(d.latlngs, opts);
|
||||
|
||||
line.resetStyle = function () {
|
||||
line.setStyle(opts)
|
||||
}
|
||||
line.setStyle(opts);
|
||||
};
|
||||
|
||||
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))
|
||||
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));
|
||||
|
||||
dict[d.id] = line
|
||||
dict[d.id] = line;
|
||||
|
||||
return line
|
||||
})
|
||||
return line;
|
||||
});
|
||||
|
||||
return lines
|
||||
return lines;
|
||||
}
|
||||
|
||||
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 }
|
||||
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};
|
||||
|
||||
return function (config, linkScale, sidebar, router, buttons) {
|
||||
var self = this
|
||||
var barycenter
|
||||
var groupOnline, groupOffline, groupNew, groupLost, groupLines
|
||||
var savedView
|
||||
var self = this;
|
||||
var barycenter;
|
||||
var groupOnline, groupOffline, groupNew, groupLost, groupLines;
|
||||
var savedView;
|
||||
|
||||
var map, userLocation
|
||||
var layerControl
|
||||
var customLayers = {}
|
||||
var baseLayers = {}
|
||||
var map, userLocation;
|
||||
var layerControl;
|
||||
var customLayers = {};
|
||||
var baseLayers = {};
|
||||
|
||||
var locateUserButton = new LocateButton(function (d) {
|
||||
if (d)
|
||||
enableTracking()
|
||||
else
|
||||
disableTracking()
|
||||
})
|
||||
if (d) {
|
||||
enableTracking();
|
||||
} else {
|
||||
disableTracking();
|
||||
}
|
||||
});
|
||||
|
||||
var mybuttons = []
|
||||
var mybuttons = [];
|
||||
|
||||
function addButton(button) {
|
||||
var el = button.onAdd()
|
||||
mybuttons.push(el)
|
||||
buttons.appendChild(el)
|
||||
var el = button.onAdd();
|
||||
mybuttons.push(el);
|
||||
buttons.appendChild(el);
|
||||
}
|
||||
|
||||
function clearButtons() {
|
||||
mybuttons.forEach( function (d) {
|
||||
buttons.removeChild(d)
|
||||
})
|
||||
mybuttons.forEach(function (d) {
|
||||
buttons.removeChild(d);
|
||||
});
|
||||
}
|
||||
|
||||
var showCoordsPickerButton = new CoordsPickerButton(function (d) {
|
||||
if (d)
|
||||
enableCoords()
|
||||
else
|
||||
disableCoords()
|
||||
})
|
||||
if (d) {
|
||||
enableCoords();
|
||||
} else {
|
||||
disableCoords();
|
||||
}
|
||||
});
|
||||
|
||||
function saveView() {
|
||||
savedView = {center: map.getCenter(),
|
||||
zoom: map.getZoom()}
|
||||
savedView = {
|
||||
center: map.getCenter(),
|
||||
zoom: map.getZoom()
|
||||
};
|
||||
}
|
||||
|
||||
function enableTracking() {
|
||||
map.locate({watch: true,
|
||||
enableHighAccuracy: true,
|
||||
setView: true
|
||||
})
|
||||
locateUserButton.set(true)
|
||||
map.locate({
|
||||
watch: true,
|
||||
enableHighAccuracy: true,
|
||||
setView: true
|
||||
});
|
||||
locateUserButton.set(true);
|
||||
}
|
||||
|
||||
function disableTracking() {
|
||||
map.stopLocate()
|
||||
locationError()
|
||||
locateUserButton.set(false)
|
||||
map.stopLocate();
|
||||
locationError();
|
||||
locateUserButton.set(false);
|
||||
}
|
||||
|
||||
function enableCoords() {
|
||||
map.getContainer().classList.add("pick-coordinates")
|
||||
map.on("click", showCoordinates)
|
||||
showCoordsPickerButton.set(true)
|
||||
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)
|
||||
map.getContainer().classList.remove("pick-coordinates");
|
||||
map.off("click", showCoordinates);
|
||||
showCoordsPickerButton.set(false);
|
||||
}
|
||||
|
||||
function showCoordinates(e) {
|
||||
router.gotoLocation(e.latlng)
|
||||
router.gotoLocation(e.latlng);
|
||||
// window.prompt("Koordinaten (Lat, Lng)", e.latlng.lat.toFixed(9) + ", " + e.latlng.lng.toFixed(9))
|
||||
disableCoords()
|
||||
disableCoords();
|
||||
}
|
||||
|
||||
function locationFound(e) {
|
||||
if (!userLocation)
|
||||
userLocation = new LocationMarker(e.latlng).addTo(map)
|
||||
if (!userLocation) {
|
||||
userLocation = new LocationMarker(e.latlng).addTo(map);
|
||||
}
|
||||
|
||||
userLocation.setLatLng(e.latlng)
|
||||
userLocation.setAccuracy(e.accuracy)
|
||||
userLocation.setLatLng(e.latlng);
|
||||
userLocation.setAccuracy(e.accuracy);
|
||||
}
|
||||
|
||||
function locationError() {
|
||||
if (userLocation) {
|
||||
map.removeLayer(userLocation)
|
||||
userLocation = null
|
||||
map.removeLayer(userLocation);
|
||||
userLocation = null;
|
||||
}
|
||||
}
|
||||
|
||||
function addLayer(layerName) {
|
||||
if (layerName in baseLayers)
|
||||
return
|
||||
if (layerName in baseLayers) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (layerName in customLayers)
|
||||
return
|
||||
if (layerName in customLayers) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
var layer = L.tileLayer.provider(layerName)
|
||||
layerControl.addBaseLayer(layer, layerName)
|
||||
customLayers[layerName] = layer
|
||||
var layer = L.tileLayer.provider(layerName);
|
||||
layerControl.addBaseLayer(layer, layerName);
|
||||
customLayers[layerName] = layer;
|
||||
|
||||
if (localStorageTest())
|
||||
localStorage.setItem("map/customLayers", JSON.stringify(Object.keys(customLayers)))
|
||||
if (localStorageTest()) {
|
||||
localStorage.setItem("map/customLayers", JSON.stringify(Object.keys(customLayers)));
|
||||
}
|
||||
} catch (e) {
|
||||
return
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function contextMenuGotoLocation(e) {
|
||||
router.gotoLocation(e.latlng)
|
||||
router.gotoLocation(e.latlng);
|
||||
}
|
||||
|
||||
var el = document.createElement("div")
|
||||
el.classList.add("map")
|
||||
var el = document.createElement("div");
|
||||
el.classList.add("map");
|
||||
|
||||
map = L.map(el, options)
|
||||
map = L.map(el, options);
|
||||
|
||||
var layers = config.mapLayers.map( function (d) {
|
||||
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)
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
|
||||
layers[0].layer.addTo(map)
|
||||
layers[0].layer.addTo(map);
|
||||
|
||||
layers.forEach( function (d) {
|
||||
baseLayers[d.name] = d.layer
|
||||
})
|
||||
layers.forEach(function (d) {
|
||||
baseLayers[d.name] = d.layer;
|
||||
});
|
||||
|
||||
map.on("locationfound", locationFound)
|
||||
map.on("locationerror", locationError)
|
||||
map.on("dragend", saveView)
|
||||
map.on("contextmenu", contextMenuGotoLocation)
|
||||
map.on("locationfound", locationFound);
|
||||
map.on("locationerror", locationError);
|
||||
map.on("dragend", saveView);
|
||||
map.on("contextmenu", contextMenuGotoLocation);
|
||||
|
||||
addButton(locateUserButton)
|
||||
addButton(showCoordsPickerButton)
|
||||
addButton(locateUserButton);
|
||||
addButton(showCoordsPickerButton);
|
||||
|
||||
addButton(new AddLayerButton(function () {
|
||||
/*eslint no-alert:0*/
|
||||
var layerName = prompt("Leaflet Provider:")
|
||||
addLayer(layerName)
|
||||
}))
|
||||
var layerName = prompt("Leaflet Provider:");
|
||||
addLayer(layerName);
|
||||
}));
|
||||
|
||||
layerControl = L.control.layers(baseLayers, [], {position: "bottomright"})
|
||||
layerControl.addTo(map)
|
||||
layerControl = L.control.layers(baseLayers, [], {position: "bottomright"});
|
||||
layerControl.addTo(map);
|
||||
|
||||
if (localStorageTest()) {
|
||||
var d = JSON.parse(localStorage.getItem("map/customLayers"))
|
||||
|
||||
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
|
||||
var d = JSON.parse(localStorage.getItem("map/customLayers"));
|
||||
|
||||
if (d) {
|
||||
map.removeLayer(layers[0].layer)
|
||||
map.addLayer(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);
|
||||
}
|
||||
}
|
||||
|
||||
var clientLayer = new ClientLayer({minZoom: 15})
|
||||
clientLayer.addTo(map)
|
||||
clientLayer.setZIndex(5)
|
||||
var clientLayer = new ClientLayer({minZoom: 15});
|
||||
clientLayer.addTo(map);
|
||||
clientLayer.setZIndex(5);
|
||||
|
||||
var labelsLayer = new LabelsLayer({})
|
||||
labelsLayer.addTo(map)
|
||||
labelsLayer.setZIndex(6)
|
||||
var labelsLayer = new LabelsLayer({});
|
||||
labelsLayer.addTo(map);
|
||||
labelsLayer.setZIndex(6);
|
||||
|
||||
map.on("baselayerchange", function(e) {
|
||||
map.options.maxZoom = e.layer.options.maxZoom
|
||||
clientLayer.options.maxZoom = map.options.maxZoom
|
||||
labelsLayer.options.maxZoom = map.options.maxZoom
|
||||
if (map.getZoom() > map.options.maxZoom) map.setZoom(map.options.maxZoom)
|
||||
if (localStorageTest())
|
||||
localStorage.setItem("map/selectedLayer", JSON.stringify({name: e.name}))
|
||||
})
|
||||
map.on("baselayerchange", function (e) {
|
||||
map.options.maxZoom = e.layer.options.maxZoom;
|
||||
clientLayer.options.maxZoom = map.options.maxZoom;
|
||||
labelsLayer.options.maxZoom = map.options.maxZoom;
|
||||
if (map.getZoom() > map.options.maxZoom) {
|
||||
map.setZoom(map.options.maxZoom);
|
||||
}
|
||||
if (localStorageTest()) {
|
||||
localStorage.setItem("map/selectedLayer", JSON.stringify({name: e.name}));
|
||||
}
|
||||
});
|
||||
|
||||
var nodeDict = {}
|
||||
var linkDict = {}
|
||||
var highlight
|
||||
var nodeDict = {};
|
||||
var linkDict = {};
|
||||
var highlight;
|
||||
|
||||
function resetMarkerStyles(nodes, links) {
|
||||
Object.keys(nodes).forEach( function (d) {
|
||||
nodes[d].resetStyle()
|
||||
})
|
||||
Object.keys(nodes).forEach(function (d) {
|
||||
nodes[d].resetStyle();
|
||||
});
|
||||
|
||||
Object.keys(links).forEach( function (d) {
|
||||
links[d].resetStyle()
|
||||
})
|
||||
Object.keys(links).forEach(function (d) {
|
||||
links[d].resetStyle();
|
||||
});
|
||||
}
|
||||
|
||||
function setView(bounds) {
|
||||
map.fitBounds(bounds, {paddingTopLeft: [sidebar(), 0]})
|
||||
map.fitBounds(bounds, {paddingTopLeft: [sidebar(), 0]});
|
||||
}
|
||||
|
||||
function resetZoom() {
|
||||
if (barycenter)
|
||||
setView(barycenter.getBounds())
|
||||
if (barycenter) {
|
||||
setView(barycenter.getBounds());
|
||||
}
|
||||
}
|
||||
|
||||
function goto(m) {
|
||||
var bounds
|
||||
var bounds;
|
||||
|
||||
if ("getBounds" in m)
|
||||
bounds = m.getBounds()
|
||||
else
|
||||
bounds = L.latLngBounds([m.getLatLng()])
|
||||
if ("getBounds" in m) {
|
||||
bounds = m.getBounds();
|
||||
} else {
|
||||
bounds = L.latLngBounds([m.getLatLng()]);
|
||||
}
|
||||
|
||||
setView(bounds)
|
||||
setView(bounds);
|
||||
|
||||
return m
|
||||
return m;
|
||||
}
|
||||
|
||||
function updateView(nopanzoom) {
|
||||
resetMarkerStyles(nodeDict, linkDict)
|
||||
var m
|
||||
resetMarkerStyles(nodeDict, linkDict);
|
||||
var m;
|
||||
|
||||
if (highlight !== undefined)
|
||||
if (highlight !== undefined) {
|
||||
if (highlight.type === "node") {
|
||||
m = nodeDict[highlight.o.nodeinfo.node_id]
|
||||
m = nodeDict[highlight.o.nodeinfo.node_id];
|
||||
|
||||
if (m)
|
||||
m.setStyle({ color: "orange", weight: 20, fillOpacity: 1, opacity: 0.7, className: "stroke-first" })
|
||||
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]
|
||||
m = linkDict[highlight.o.id];
|
||||
|
||||
if (m)
|
||||
m.setStyle({ weight: 7, opacity: 1, dashArray: "10, 10" })
|
||||
if (m) {
|
||||
m.setStyle({weight: 7, opacity: 1, dashArray: "10, 10"});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!nopanzoom)
|
||||
if (m)
|
||||
goto(m)
|
||||
else if (savedView)
|
||||
map.setView(savedView.center, savedView.zoom)
|
||||
else
|
||||
resetZoom()
|
||||
if (!nopanzoom) {
|
||||
if (m) {
|
||||
goto(m);
|
||||
} else if (savedView) {
|
||||
map.setView(savedView.center, savedView.zoom);
|
||||
} else {
|
||||
resetZoom();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function calcBarycenter(nodes) {
|
||||
nodes = nodes.map(function (d) { return d.nodeinfo.location })
|
||||
nodes = nodes.map(function (d) {
|
||||
return d.nodeinfo.location;
|
||||
});
|
||||
|
||||
if (nodes.length === 0)
|
||||
return undefined
|
||||
if (nodes.length === 0) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
var lats = nodes.map(function (d) { return d.latitude })
|
||||
var lngs = nodes.map(function (d) { return d.longitude })
|
||||
var lats = nodes.map(function (d) {
|
||||
return d.latitude;
|
||||
});
|
||||
var lngs = nodes.map(function (d) {
|
||||
return d.longitude;
|
||||
});
|
||||
|
||||
var barycenter = L.latLng(d3.median(lats), d3.median(lngs))
|
||||
var barycenterDev = [d3.deviation(lats), d3.deviation(lngs)]
|
||||
var barycenter = L.latLng(d3.median(lats), d3.median(lngs));
|
||||
var barycenterDev = [d3.deviation(lats), d3.deviation(lngs)];
|
||||
|
||||
if (barycenterDev[0] === undefined)
|
||||
barycenterDev[0] = 0
|
||||
if (barycenterDev[0] === undefined) {
|
||||
barycenterDev[0] = 0;
|
||||
}
|
||||
|
||||
if (barycenterDev[1] === undefined)
|
||||
barycenterDev[1] = 0
|
||||
if (barycenterDev[1] === undefined) {
|
||||
barycenterDev[1] = 0;
|
||||
}
|
||||
|
||||
var barycenterCircle = L.latLng(barycenter.lat + barycenterDev[0],
|
||||
barycenter.lng + barycenterDev[1])
|
||||
barycenter.lng + barycenterDev[1]);
|
||||
|
||||
var r = barycenter.distanceTo(barycenterCircle)
|
||||
var r = barycenter.distanceTo(barycenterCircle);
|
||||
|
||||
return L.circle(barycenter, r * config.mapSigmaScale)
|
||||
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]
|
||||
var o = [d.nodeinfo.location.latitude, d.nodeinfo.location.longitude,
|
||||
d.nodeinfo.location.latitude, d.nodeinfo.location.longitude];
|
||||
|
||||
o.node = d
|
||||
o.node = d;
|
||||
|
||||
return o
|
||||
return o;
|
||||
}
|
||||
|
||||
self.setData = function (data) {
|
||||
nodeDict = {}
|
||||
linkDict = {}
|
||||
nodeDict = {};
|
||||
linkDict = {};
|
||||
|
||||
if (groupOffline)
|
||||
groupOffline.clearLayers()
|
||||
if (groupOffline) {
|
||||
groupOffline.clearLayers();
|
||||
}
|
||||
|
||||
if (groupOnline)
|
||||
groupOnline.clearLayers()
|
||||
if (groupOnline) {
|
||||
groupOnline.clearLayers();
|
||||
}
|
||||
|
||||
if (groupNew)
|
||||
groupNew.clearLayers()
|
||||
if (groupNew) {
|
||||
groupNew.clearLayers();
|
||||
}
|
||||
|
||||
if (groupLost)
|
||||
groupLost.clearLayers()
|
||||
if (groupLost) {
|
||||
groupLost.clearLayers();
|
||||
}
|
||||
|
||||
if (groupLines)
|
||||
groupLines.clearLayers()
|
||||
if (groupLines) {
|
||||
groupLines.clearLayers();
|
||||
}
|
||||
|
||||
var lines = addLinksToMap(linkDict, linkScale, data.graph.links, router)
|
||||
groupLines = L.featureGroup(lines).addTo(map)
|
||||
var lines = addLinksToMap(linkDict, linkScale, data.graph.links, router);
|
||||
groupLines = L.featureGroup(lines).addTo(map);
|
||||
|
||||
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)
|
||||
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);
|
||||
}
|
||||
|
||||
var nodesOnline = subtract(data.nodes.all.filter(online), data.nodes.new)
|
||||
var nodesOffline = subtract(data.nodes.all.filter(offline), data.nodes.lost)
|
||||
var nodesOnline = subtract(data.nodes.all.filter(online), data.nodes.new);
|
||||
var nodesOffline = subtract(data.nodes.all.filter(offline), data.nodes.lost);
|
||||
|
||||
var markersOnline = nodesOnline.filter(has_location)
|
||||
.map(mkMarker(nodeDict, function () { return iconOnline }, router))
|
||||
.map(mkMarker(nodeDict, function () {
|
||||
return iconOnline;
|
||||
}, router));
|
||||
|
||||
var markersOffline = nodesOffline.filter(has_location)
|
||||
.map(mkMarker(nodeDict, function () { return iconOffline }, router))
|
||||
.map(mkMarker(nodeDict, function () {
|
||||
return iconOffline;
|
||||
}, router));
|
||||
|
||||
var markersNew = data.nodes.new.filter(has_location)
|
||||
.map(mkMarker(nodeDict, function () { return iconNew }, router))
|
||||
.map(mkMarker(nodeDict, function () {
|
||||
return iconNew;
|
||||
}, router));
|
||||
|
||||
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
|
||||
if (d.lastseen.isAfter(moment(data.now).subtract(3, "days"))) {
|
||||
return iconAlert;
|
||||
}
|
||||
|
||||
return iconLost
|
||||
}, router))
|
||||
return iconLost;
|
||||
}, router));
|
||||
|
||||
groupOffline = L.featureGroup(markersOffline).addTo(map)
|
||||
groupOnline = L.featureGroup(markersOnline).addTo(map)
|
||||
groupLost = L.featureGroup(markersLost).addTo(map)
|
||||
groupNew = L.featureGroup(markersNew).addTo(map)
|
||||
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)
|
||||
var rtreeOnlineAll = rbush(9);
|
||||
|
||||
rtreeOnlineAll.load(data.nodes.all.filter(online).filter(has_location).map(mapRTree))
|
||||
rtreeOnlineAll.load(data.nodes.all.filter(online).filter(has_location).map(mapRTree));
|
||||
|
||||
clientLayer.setData(rtreeOnlineAll)
|
||||
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)
|
||||
})
|
||||
clientLayer.setData(rtreeOnlineAll);
|
||||
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)
|
||||
});
|
||||
|
||||
updateView(true)
|
||||
}
|
||||
updateView(true);
|
||||
};
|
||||
|
||||
self.resetView = function () {
|
||||
disableTracking()
|
||||
highlight = undefined
|
||||
updateView()
|
||||
}
|
||||
disableTracking();
|
||||
highlight = undefined;
|
||||
updateView();
|
||||
};
|
||||
|
||||
self.gotoNode = function (d) {
|
||||
disableTracking()
|
||||
highlight = {type: "node", o: d}
|
||||
updateView()
|
||||
}
|
||||
disableTracking();
|
||||
highlight = {type: "node", o: d};
|
||||
updateView();
|
||||
};
|
||||
|
||||
self.gotoLink = function (d) {
|
||||
disableTracking()
|
||||
highlight = {type: "link", o: d}
|
||||
updateView()
|
||||
}
|
||||
disableTracking();
|
||||
highlight = {type: "link", o: d};
|
||||
updateView();
|
||||
};
|
||||
|
||||
self.gotoLocation = function () {
|
||||
//ignore
|
||||
}
|
||||
};
|
||||
|
||||
self.destroy = function () {
|
||||
clearButtons()
|
||||
map.remove()
|
||||
clearButtons();
|
||||
map.remove();
|
||||
|
||||
if (el.parentNode)
|
||||
el.parentNode.removeChild(el)
|
||||
}
|
||||
if (el.parentNode) {
|
||||
el.parentNode.removeChild(el);
|
||||
}
|
||||
};
|
||||
|
||||
self.render = function (d) {
|
||||
d.appendChild(el)
|
||||
map.invalidateSize()
|
||||
}
|
||||
d.appendChild(el);
|
||||
map.invalidateSize();
|
||||
};
|
||||
|
||||
return self
|
||||
}
|
||||
})
|
||||
return self;
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue