From 58cd7ad02673ee394637cdd56ef9cdc1a6008b73 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils@nilsschneider.net>
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 &copy; <a href=\"https://www.mapquest.com/\" target=\"_blank\">MapQuest</a>, 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 &copy; <a href=\"https://www.mapquest.com/\" target=\"_blank\">MapQuest</a>, 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: {