From b7ab859bead7e8c489607e99a1373dd0a61a1d00 Mon Sep 17 00:00:00 2001 From: Nils Schneider Date: Fri, 17 Apr 2015 22:10:47 +0200 Subject: [PATCH] map: fix identation --- lib/map.js | 698 ++++++++++++++++++++++++++--------------------------- 1 file changed, 349 insertions(+), 349 deletions(-) diff --git a/lib/map.js b/lib/map.js index 9d77a03..f296872 100644 --- a/lib/map.js +++ b/lib/map.js @@ -1,9 +1,9 @@ define(["d3", "leaflet", "moment", "locationmarker", "leaflet.label", "leaflet.providers"], function (d3, L, moment, LocationMarker) { - var options = { worldCopyJump: true, - zoomControl: false - } + var options = { worldCopyJump: true, + zoomControl: false + } var ClientLayer = L.TileLayer.Canvas.extend({ setData: function (d) { @@ -66,372 +66,372 @@ define(["d3", "leaflet", "moment", "locationmarker", "leaflet.label", } }) - var AddLayerButton = L.Control.extend({ - options: { - position: "bottomright" - }, + var AddLayerButton = L.Control.extend({ + 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") + onAdd: function () { + var button = L.DomUtil.create("button", "add-layer") - L.DomEvent.disableClickPropagation(button) - L.DomEvent.addListener(button, "click", this.f, this) + L.DomEvent.disableClickPropagation(button) + L.DomEvent.addListener(button, "click", this.f, this) - this.button = button + this.button = button - return button - } - }) - - var LocateButton = L.Control.extend({ - options: { - position: "bottomright" - }, - - active: false, - button: undefined, - - initialize: function (f, options) { - L.Util.setOptions(this, options) - this.f = f - }, - - onAdd: function () { - var button = L.DomUtil.create("button", "locate-user") - - L.DomEvent.disableClickPropagation(button) - L.DomEvent.addListener(button, "click", this.onClick, this) - - this.button = button - - return button - }, - - update: function() { - this.button.classList.toggle("active", this.active) - }, - - set: function(v) { - this.active = v - this.update() - }, - - onClick: function () { - 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)) - - m.resetStyle = function () { - m.setStyle(iconFunc(d)) - } - - m.on("click", router.node(d)) - m.bindLabel(d.nodeinfo.hostname) - - dict[d.nodeinfo.node_id] = m - - return m - } - } - - function addLinksToMap(dict, linkScale, graph, router) { - graph = graph.filter( function (d) { - return "distance" in d && !d.vpn - }) - - var lines = graph.map( function (d) { - var opts = { color: linkScale(d.tq).hex(), - weight: 4, - opacity: 0.5, - dashArray: "none" - } - - var line = L.polyline(d.latlngs, opts) - - line.resetStyle = function () { - line.setStyle(opts) - } - - line.bindLabel(d.source.node.nodeinfo.hostname + " – " + d.target.node.nodeinfo.hostname + "
" + showDistance(d) + " / " + showTq(d) + "") - line.on("click", router.link(d)) - - dict[d.id] = line - - return line - }) - - 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 } - - return function (config, linkScale, sidebar, router) { - var self = this - var barycenter - var groupOnline, groupOffline, groupNew, groupLost, groupLines - - var map, userLocation - var layerControl - var customLayers = new Set() - - var locateUserButton = new LocateButton(function (d) { - if (d) - enableTracking() - else - disableTracking() + return button + } }) - function enableTracking() { - map.locate({watch: true, - enableHighAccuracy: true, - setView: true - }) - locateUserButton.set(true) - } + var LocateButton = L.Control.extend({ + options: { + position: "bottomright" + }, - function disableTracking() { - map.stopLocate() - locationError() - locateUserButton.set(false) - } + active: false, + button: undefined, - function locationFound(e) { - if (!userLocation) - userLocation = new LocationMarker(e.latlng).addTo(map) + initialize: function (f, options) { + L.Util.setOptions(this, options) + this.f = f + }, - userLocation.setLatLng(e.latlng) - userLocation.setAccuracy(e.accuracy) - } + onAdd: function () { + var button = L.DomUtil.create("button", "locate-user") - function locationError() { - if (userLocation) { - map.removeLayer(userLocation) - userLocation = null + L.DomEvent.disableClickPropagation(button) + L.DomEvent.addListener(button, "click", this.onClick, this) + + this.button = button + + return button + }, + + update: function() { + this.button.classList.toggle("active", this.active) + }, + + set: function(v) { + this.active = v + this.update() + }, + + onClick: function () { + 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)) + + m.resetStyle = function () { + m.setStyle(iconFunc(d)) + } + + m.on("click", router.node(d)) + m.bindLabel(d.nodeinfo.hostname) + + dict[d.nodeinfo.node_id] = m + + return m } } - function addLayer(layerName) { - if (customLayers.has(layerName)) - return - - try { - var layer = L.tileLayer.provider(layerName) - layerControl.addBaseLayer(layer, layerName) - customLayers.add(layerName) - - if (!layerControl.added) { - layerControl.addTo(map) - layerControl.added = true - } - - if (localStorageTest()) - localStorage.setItem("map/customLayers", JSON.stringify(Array.from(customLayers))) - } catch (e) { - return - } - } - - var el = document.createElement("div") - el.classList.add("map") - self.div = el - - map = L.map(el, options) - - var baseLayer = L.tileLayer("https://otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg", { - subdomains: "1234", - type: "osm", - attribution: "Tiles © MapQuest, Data CC-BY-SA OpenStreetMap", - maxZoom: 18 - }).addTo(map) - - map.on("locationfound", locationFound) - map.on("locationerror", locationError) - - map.addControl(locateUserButton) - - map.addControl(new AddLayerButton(function () { - /*eslint no-alert:0*/ - var layerName = prompt("Leaflet Provider:") - addLayer(layerName) - })) - - layerControl = L.control.layers({"MapQuest": baseLayer}, [], {position: "bottomright"}) - - if (localStorageTest()) { - var layers = JSON.parse(localStorage.getItem("map/customLayers")) - - if (layers) - layers.forEach(addLayer) - } - - var clientLayer = new ClientLayer() - clientLayer.addTo(map) - clientLayer.setZIndex(5) - - var nodeDict = {} - var linkDict = {} - var highlight - - function resetMarkerStyles(nodes, links) { - Object.keys(nodes).forEach( function (d) { - nodes[d].resetStyle() + function addLinksToMap(dict, linkScale, graph, router) { + graph = graph.filter( function (d) { + return "distance" in d && !d.vpn }) - Object.keys(links).forEach( function (d) { - links[d].resetStyle() - }) - } + var lines = graph.map( function (d) { + var opts = { color: linkScale(d.tq).hex(), + weight: 4, + opacity: 0.5, + dashArray: "none" + } - function setView(bounds) { - map.fitBounds(bounds, {paddingTopLeft: [sidebar.getWidth(), 0]}) - } + var line = L.polyline(d.latlngs, opts) - 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({ color: "orange", weight: 20, fillOpacity: 1, opacity: 0.7, className: "stroke-first" }) - } else if (highlight.type === "link") { - m = linkDict[highlight.o.id] - - if (m) - m.setStyle({ weight: 7, opacity: 1, dashArray: "10, 10" }) + line.resetStyle = function () { + line.setStyle(opts) } - if (!nopanzoom) - if (m) - goto(m) + line.bindLabel(d.source.node.nodeinfo.hostname + " – " + d.target.node.nodeinfo.hostname + "
" + showDistance(d) + " / " + showTq(d) + "") + line.on("click", router.link(d)) + + dict[d.id] = line + + return line + }) + + 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 } + + return function (config, linkScale, sidebar, router) { + var self = this + var barycenter + var groupOnline, groupOffline, groupNew, groupLost, groupLines + + var map, userLocation + var layerControl + var customLayers = new Set() + + var locateUserButton = new LocateButton(function (d) { + if (d) + enableTracking() else - resetZoom() + disableTracking() + }) + + function enableTracking() { + map.locate({watch: true, + enableHighAccuracy: true, + setView: true + }) + locateUserButton.set(true) + } + + function disableTracking() { + map.stopLocate() + locationError() + locateUserButton.set(false) + } + + function locationFound(e) { + if (!userLocation) + userLocation = new LocationMarker(e.latlng).addTo(map) + + userLocation.setLatLng(e.latlng) + userLocation.setAccuracy(e.accuracy) + } + + function locationError() { + if (userLocation) { + map.removeLayer(userLocation) + userLocation = null + } + } + + function addLayer(layerName) { + if (customLayers.has(layerName)) + return + + try { + var layer = L.tileLayer.provider(layerName) + layerControl.addBaseLayer(layer, layerName) + customLayers.add(layerName) + + if (!layerControl.added) { + layerControl.addTo(map) + layerControl.added = true + } + + if (localStorageTest()) + localStorage.setItem("map/customLayers", JSON.stringify(Array.from(customLayers))) + } catch (e) { + return + } + } + + var el = document.createElement("div") + el.classList.add("map") + self.div = el + + map = L.map(el, options) + + var baseLayer = L.tileLayer("https://otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg", { + subdomains: "1234", + type: "osm", + attribution: "Tiles © MapQuest, Data CC-BY-SA OpenStreetMap", + maxZoom: 18 + }).addTo(map) + + map.on("locationfound", locationFound) + map.on("locationerror", locationError) + + map.addControl(locateUserButton) + + map.addControl(new AddLayerButton(function () { + /*eslint no-alert:0*/ + var layerName = prompt("Leaflet Provider:") + addLayer(layerName) + })) + + layerControl = L.control.layers({"MapQuest": baseLayer}, [], {position: "bottomright"}) + + if (localStorageTest()) { + var layers = JSON.parse(localStorage.getItem("map/customLayers")) + + if (layers) + layers.forEach(addLayer) + } + + var clientLayer = new ClientLayer() + clientLayer.addTo(map) + clientLayer.setZIndex(5) + + var nodeDict = {} + 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({ color: "orange", weight: 20, fillOpacity: 1, opacity: 0.7, className: "stroke-first" }) + } else if (highlight.type === "link") { + m = linkDict[highlight.o.id] + + if (m) + m.setStyle({ weight: 7, opacity: 1, dashArray: "10, 10" }) + } + + if (!nopanzoom) + if (m) + goto(m) + else + resetZoom() + } + + 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) { + nodeDict = {} + linkDict = {} + + if (groupOffline) + groupOffline.clearLayers() + + if (groupOnline) + groupOnline.clearLayers() + + if (groupNew) + groupNew.clearLayers() + + if (groupLost) + groupLost.clearLayers() + + if (groupLines) + groupLines.clearLayers() + + var lines = addLinksToMap(linkDict, linkScale, data.graph.links, router) + groupLines = 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 nodesOffline = subtract(data.nodes.all.filter(offline), data.nodes.lost) + + var markersOnline = nodesOnline.filter(has_location) + .map(mkMarker(nodeDict, function () { return iconOnline }, router)) + + var markersOffline = nodesOffline.filter(has_location) + .map(mkMarker(nodeDict, function () { return iconOffline }, router)) + + var markersNew = data.nodes.new.filter(has_location) + .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 + + return iconLost + }, router)) + + groupOffline = L.featureGroup(markersOffline).addTo(map) + groupOnline = L.featureGroup(markersOnline).addTo(map) + groupNew = L.featureGroup(markersNew).addTo(map) + groupLost = L.featureGroup(markersLost).addTo(map) + + clientLayer.setData(data.nodes.all.filter(online).filter(has_location)) + + updateView(true) + } + + self.resetView = function () { + disableTracking() + highlight = undefined + updateView() + } + + self.gotoNode = function (d) { + disableTracking() + highlight = {type: "node", o: d} + updateView() + } + + self.gotoLink = function (d) { + disableTracking() + highlight = {type: "link", o: d} + updateView() + } + + self.destroy = function () { + map.remove() + } + + return self } - - 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) { - nodeDict = {} - linkDict = {} - - if (groupOffline) - groupOffline.clearLayers() - - if (groupOnline) - groupOnline.clearLayers() - - if (groupNew) - groupNew.clearLayers() - - if (groupLost) - groupLost.clearLayers() - - if (groupLines) - groupLines.clearLayers() - - var lines = addLinksToMap(linkDict, linkScale, data.graph.links, router) - groupLines = 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 nodesOffline = subtract(data.nodes.all.filter(offline), data.nodes.lost) - - var markersOnline = nodesOnline.filter(has_location) - .map(mkMarker(nodeDict, function () { return iconOnline }, router)) - - var markersOffline = nodesOffline.filter(has_location) - .map(mkMarker(nodeDict, function () { return iconOffline }, router)) - - var markersNew = data.nodes.new.filter(has_location) - .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 - - return iconLost - }, router)) - - groupOffline = L.featureGroup(markersOffline).addTo(map) - groupOnline = L.featureGroup(markersOnline).addTo(map) - groupNew = L.featureGroup(markersNew).addTo(map) - groupLost = L.featureGroup(markersLost).addTo(map) - - clientLayer.setData(data.nodes.all.filter(online).filter(has_location)) - - updateView(true) - } - - self.resetView = function () { - disableTracking() - highlight = undefined - updateView() - } - - self.gotoNode = function (d) { - disableTracking() - highlight = {type: "node", o: d} - updateView() - } - - self.gotoLink = function (d) { - disableTracking() - highlight = {type: "link", o: d} - updateView() - } - - self.destroy = function () { - map.remove() - } - - return self - } })