map: define layers in config.js

README.md

@@ -67,6 +67,13 @@ Setting this to `false` will hide contact information for nodes.
 Nodes being online for less than maxAge days are considered "new". Likewise,
 nodes being offline for less than than maxAge days are considered "lost".
 
+## mapLayers (List)
+
+A list of objects describing map layers. Each object has at least `name`
+property and optionally `url` and `config` properties. If no `url` is supplied
+`name` is assumed to name a
+[Leaflet-provider](http://leaflet-extras.github.io/leaflet-providers/preview/).
+
 ## nodeInfos (array, optional)
 
 This option allows to show client statistics depending on following case-sensitive parameters:

config.js.example

@@ -3,5 +3,19 @@ define({
   "siteName": "Freifunk Lübeck",
   "mapSigmaScale": 0.5,
   "showContact": true,
-  "maxAge": 14
+  "maxAge": 14,
+  "mapLayers": [
+    { "name": "MapQuest",
+      "url": "https://otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg",
+      "config": {
+        "subdomains": "1234",
+        "type": "osm",
+        "attribution": "Tiles &copy; <a href=\"https://www.mapquest.com/\" target=\"_blank\">MapQuest</a>, Data CC-BY-SA OpenStreetMap",
+        "maxZoom": 18
+      }
+    },
+    {
+      "name": "Stamen.TonerLite"
+    }
+  ]
 })

lib/map.js

@@ -129,6 +129,7 @@ define(["map/clientlayer", "map/labelslayer",
       var map, userLocation
       var layerControl
       var customLayers = new Set()
+      var baseLayers = {}
 
       var locateUserButton = new LocateButton(function (d) {
         if (d)
@@ -186,6 +187,9 @@ define(["map/clientlayer", "map/labelslayer",
       }
 
       function addLayer(layerName) {
+        if (layerName in baseLayers)
+          return
+
         if (customLayers.has(layerName))
           return
 
@@ -212,12 +216,18 @@ define(["map/clientlayer", "map/labelslayer",
 
       map = L.map(el, options)
 
-      var baseLayer = L.tileLayer("https://otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg", {
+      var layers = config.mapLayers.map( function (d) {
-                                    subdomains: "1234",
+        return {
-                                    type: "osm",
+          "name": d.name,
-                                    attribution: "Tiles &copy; <a href=\"https://www.mapquest.com/\" target=\"_blank\">MapQuest</a>, Data CC-BY-SA OpenStreetMap",
+          "layer": "url" in d ? L.tileLayer(d.url, d.config) : L.tileLayer.provider(d.name)
-                                    maxZoom: 18
+        }
-                                  }).addTo(map)
+      })
+
+      layers[0].layer.addTo(map)
+
+      layers.forEach( function (d) {
+        baseLayers[d.name] = d.layer
+      })
 
       map.on("locationfound", locationFound)
       map.on("locationerror", locationError)
@@ -231,13 +241,13 @@ define(["map/clientlayer", "map/labelslayer",
         addLayer(layerName)
       }))
 
-      layerControl = L.control.layers({"MapQuest": baseLayer}, [], {position: "bottomright"})
+      layerControl = L.control.layers(baseLayers, [], {position: "bottomright"})
 
       if (localStorageTest()) {
-        var layers = JSON.parse(localStorage.getItem("map/customLayers"))
+        var d = JSON.parse(localStorage.getItem("map/customLayers"))
 
-        if (layers)
+        if (d)
-          layers.forEach(addLayer)
+          d.forEach(addLayer)
       }
 
       var clientLayer = new ClientLayer({minZoom: 15})