From 58cd7ad02673ee394637cdd56ef9cdc1a6008b73 Mon Sep 17 00:00:00 2001 From: Nils Schneider Date: Wed, 15 Apr 2015 22:25:22 +0200 Subject: [PATCH] map: adding custom layers --- CHANGELOG.md | 1 + images | 1 + lib/map.js | 48 +++++++++++++++++++++++++++++++++++++++++------- tasks/build.js | 6 ++++++ 4 files changed, 49 insertions(+), 7 deletions(-) create mode 120000 images diff --git a/CHANGELOG.md b/CHANGELOG.md index c2d8ad5..7ff4e7d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ - infobox: link to geouri with node's coordinates - infobox: show node id - map: locate user +- map: adding custom layers from leaflet.providers - nodelist: sort by uptime fixed ### Fixed bugs: diff --git a/images b/images new file mode 120000 index 0000000..e67f0fe --- /dev/null +++ b/images @@ -0,0 +1 @@ +bower_components/leaflet/dist/images \ No newline at end of file diff --git a/lib/map.js b/lib/map.js index 4601d9c..57e0ff0 100644 --- a/lib/map.js +++ b/lib/map.js @@ -123,6 +123,8 @@ define(["d3", "leaflet", "moment", "locationmarker", "leaflet.label", var groupOnline, groupOffline, groupNew, groupLost, groupLines var map, userLocation + var layerControl + var customLayers = new Set() var locateUserButton = new LocateButton(function (d) { if (d) @@ -160,18 +162,39 @@ define(["d3", "leaflet", "moment", "locationmarker", "leaflet.label", } } + 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) - 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) + 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) @@ -179,9 +202,20 @@ define(["d3", "leaflet", "moment", "locationmarker", "leaflet.label", map.addControl(locateUserButton) map.addControl(new AddLayerButton(function () { - L.tileLayer.provider(prompt()).addTo(map) + /*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 nodeDict = {} var linkDict = {} var highlight diff --git a/tasks/build.js b/tasks/build.js index c79c1ee..e36ecbd 100644 --- a/tasks/build.js +++ b/tasks/build.js @@ -41,6 +41,12 @@ module.exports = function(grunt) { expand: true, dest: "build/", cwd: "bower_components/ionicons/" + }, + leafletImages: { + src: [ "images/*" ], + expand: true, + dest: "build/", + cwd: "bower_components/leaflet/dist/" } }, sass: {