map: adding custom layers

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:

images

@@ -0,0 +1 @@
+bower_components/leaflet/dist/images

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

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: {