map: set initial view based on barycenter and standard deviation
This commit is contained in:
parent
11c689eb29
commit
315484625b
|
@ -1,5 +1,6 @@
|
||||||
define({
|
define({
|
||||||
"dataPath": "https://map.luebeck.freifunk.net/data/",
|
"dataPath": "https://map.luebeck.freifunk.net/data/",
|
||||||
"siteName": "Freifunk Lübeck",
|
"siteName": "Freifunk Lübeck",
|
||||||
|
"mapSigmaScale": 0.5,
|
||||||
"showContact": true
|
"showContact": true
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
define(["d3"], function (d3) {
|
define(["d3"], function (d3) {
|
||||||
return function (linkScale, sidebar, router) {
|
return function (config, linkScale, sidebar, router) {
|
||||||
var self = this
|
var self = this
|
||||||
var nodes, links
|
var nodes, links
|
||||||
var svg, vis, link, node
|
var svg, vis, link, node
|
||||||
|
|
|
@ -26,7 +26,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
|
||||||
function addContent(K) {
|
function addContent(K) {
|
||||||
removeContent()
|
removeContent()
|
||||||
|
|
||||||
content = new K(linkScale, sidebar, router)
|
content = new K(config, linkScale, sidebar, router)
|
||||||
contentDiv.appendChild(content.div)
|
contentDiv.appendChild(content.div)
|
||||||
|
|
||||||
if (latestData)
|
if (latestData)
|
||||||
|
|
45
lib/map.js
45
lib/map.js
|
@ -1,4 +1,4 @@
|
||||||
define(["leaflet", "moment", "leaflet.label"], function (L, moment) {
|
define(["d3", "leaflet", "moment", "leaflet.label"], function (d3, L, moment) {
|
||||||
var options = { worldCopyJump: true,
|
var options = { worldCopyJump: true,
|
||||||
zoomControl: false
|
zoomControl: false
|
||||||
}
|
}
|
||||||
|
@ -54,9 +54,9 @@ define(["leaflet", "moment", "leaflet.label"], function (L, moment) {
|
||||||
var iconAlert = { color: "#D43E2A", radius: 6, fillOpacity: 0.5, weight: 2, className: "stroke-first node-alert" }
|
var iconAlert = { color: "#D43E2A", radius: 6, fillOpacity: 0.5, weight: 2, className: "stroke-first node-alert" }
|
||||||
var iconNew = { color: "#558020", radius: 6, fillOpacity: 0.5, weight: 2, className: "stroke-first" }
|
var iconNew = { color: "#558020", radius: 6, fillOpacity: 0.5, weight: 2, className: "stroke-first" }
|
||||||
|
|
||||||
return function (linkScale, sidebar, router) {
|
return function (config, linkScale, sidebar, router) {
|
||||||
var self = this
|
var self = this
|
||||||
var groupOnline, groupOffline, groupNew, groupLost
|
var barycenter
|
||||||
|
|
||||||
var el = document.createElement("div")
|
var el = document.createElement("div")
|
||||||
el.classList.add("map")
|
el.classList.add("map")
|
||||||
|
@ -74,6 +74,22 @@ define(["leaflet", "moment", "leaflet.label"], function (L, moment) {
|
||||||
var nodeDict = {}
|
var nodeDict = {}
|
||||||
var linkDict = {}
|
var linkDict = {}
|
||||||
|
|
||||||
|
function calcBarycenter(nodes) {
|
||||||
|
nodes = nodes.map(function (d) { return d.nodeinfo.location })
|
||||||
|
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 barycenterCircle = L.latLng(barycenter.lat + barycenterDev[0],
|
||||||
|
barycenter.lng + barycenterDev[1])
|
||||||
|
|
||||||
|
var r = barycenter.distanceTo(barycenterCircle)
|
||||||
|
|
||||||
|
return L.circle(barycenter, r * config.mapSigmaScale)
|
||||||
|
}
|
||||||
|
|
||||||
self.setData = function (data) {
|
self.setData = function (data) {
|
||||||
nodeDict = {}
|
nodeDict = {}
|
||||||
linkDict = {}
|
linkDict = {}
|
||||||
|
@ -81,6 +97,8 @@ define(["leaflet", "moment", "leaflet.label"], function (L, moment) {
|
||||||
var lines = addLinksToMap(linkDict, linkScale, data.graph.links, router)
|
var lines = addLinksToMap(linkDict, linkScale, data.graph.links, router)
|
||||||
L.featureGroup(lines).addTo(map)
|
L.featureGroup(lines).addTo(map)
|
||||||
|
|
||||||
|
barycenter = calcBarycenter(data.nodes.all.filter(has_location))
|
||||||
|
|
||||||
var nodesOnline = subtract(data.nodes.all.filter(online), data.nodes.new)
|
var nodesOnline = subtract(data.nodes.all.filter(online), data.nodes.new)
|
||||||
var nodesOffline = subtract(data.nodes.all.filter(offline), data.nodes.lost)
|
var nodesOffline = subtract(data.nodes.all.filter(offline), data.nodes.lost)
|
||||||
|
|
||||||
|
@ -101,10 +119,10 @@ define(["leaflet", "moment", "leaflet.label"], function (L, moment) {
|
||||||
return iconLost
|
return iconLost
|
||||||
}, router))
|
}, router))
|
||||||
|
|
||||||
groupOffline = L.featureGroup(markersOffline).addTo(map)
|
L.featureGroup(markersOffline).addTo(map)
|
||||||
groupOnline = L.featureGroup(markersOnline).addTo(map)
|
L.featureGroup(markersOnline).addTo(map)
|
||||||
groupNew = L.featureGroup(markersNew).addTo(map)
|
L.featureGroup(markersNew).addTo(map)
|
||||||
groupLost = L.featureGroup(markersLost).addTo(map)
|
L.featureGroup(markersLost).addTo(map)
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetMarkerStyles(nodes, links) {
|
function resetMarkerStyles(nodes, links) {
|
||||||
|
@ -124,18 +142,7 @@ define(["leaflet", "moment", "leaflet.label"], function (L, moment) {
|
||||||
function resetView() {
|
function resetView() {
|
||||||
resetMarkerStyles(nodeDict, linkDict)
|
resetMarkerStyles(nodeDict, linkDict)
|
||||||
|
|
||||||
var bounds = L.latLngBounds([])
|
setView(barycenter.getBounds())
|
||||||
bounds.extend(groupNew.getBounds())
|
|
||||||
bounds.extend(groupLost.getBounds())
|
|
||||||
|
|
||||||
if (!bounds.isValid())
|
|
||||||
bounds.extend(groupOnline.getBounds())
|
|
||||||
|
|
||||||
if (!bounds.isValid())
|
|
||||||
bounds.extend(groupOffline.getBounds())
|
|
||||||
|
|
||||||
if (bounds.isValid())
|
|
||||||
setView(bounds)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function goto(dict, id) {
|
function goto(dict, id) {
|
||||||
|
|
Loading…
Reference in a new issue