Configure additional map layers

conf.php-dist

@@ -17,6 +17,28 @@ $config['defaultView'] = array('lat' => 51.505, 'lon' => -0.09, 'zoom' => 18);
 // Shall the initial map view be retrieved via IP location? (default: true)
 $config['checkIpLocation'] = true;
 
+// Available base maps; first is default
+$config['baseMaps'] = array(
+  array(
+    'name' => 'OSM Default',
+    'attribution' => '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+    'url' => '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+    'maxZoom' => 19,
+  ),
+  array(
+    'name' => 'OSM CycleMap',
+    'attribution' => '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Tiles: <a href="http://www.thunderforest.com/">Andy Allan</a>',
+    'url' => '//{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png',
+    'maxZoom' => 18,
+  ),
+  array(
+    'name' => 'OpenTopoMap',
+    'attribution' => '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Tiles: <a href="http://opentopomap.org/">OpenTopoMap</a>',
+    'url' => '//{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
+    'maxZoom' => 17,
+  ),
+);
+
 // List of available user interface languages
 $languages = array(
   "ast", // Asturian

src/index.js

@@ -21,6 +21,7 @@ require('./language')
 require('./location')
 require('./overpassChooser')
 require('./fullscreen')
+require('./mapLayers')
 
 window.onload = function() {
   map = L.map('map')
@@ -59,14 +60,6 @@ function onload2 () {
     effortPerRequest: 100
   })
 
-  var osm_mapnik = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-    {
-      maxZoom: 19,
-      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-    }
-  )
-  osm_mapnik.addTo(map)
-
   OpenStreetBrowserLoader.setMap(map)
 
   OpenStreetBrowserLoader.getCategory('index', function (err, category) {

src/mapLayers.js

@@ -0,0 +1,37 @@
+register_hook('init', function () {
+  if (!config.baseMaps) {
+    var osm_mapnik = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      {
+        maxZoom: 19,
+        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+      }
+    )
+    osm_mapnik.addTo(map)
+
+    return
+  }
+
+  var layers = {}
+  var firstLayer = null
+  for (var i = 0; i < config.baseMaps.length; i++) {
+    var def = config.baseMaps[i]
+
+    var layer = L.tileLayer(
+      def.url,
+      {
+        attribution: def.attribution,
+        maxNativeZoom: def.maxZoom,
+        maxZoom: 19
+      }
+    )
+
+    if (firstLayer === null) {
+      firstLayer = layer
+    }
+
+    layers[def.name] = layer
+  }
+
+  firstLayer.addTo(map)
+  L.control.layers(layers).addTo(map)
+})