Add additional layers from leaflet-providers

js/control/LayersTab.js

@@ -7,6 +7,8 @@ BR.LayersTab = L.Control.Layers.extend({
 
         var layerIndex = BR.layerIndex;
 
+        this.addLeafletProvidersLayers();
+
         var toJsTree = function(layerTree) {
             var data = [];
 
@@ -47,7 +49,7 @@ BR.LayersTab = L.Control.Layers.extend({
                 'Worldwide international': [
                     'standard',
                     'OpenTopoMap',
-                    'stamen-terrain-background',
+                    'Stamen.Terrain',
                     'HDM_HOT',
                     'wikimedia-map',
                     'opencylemap'
@@ -57,8 +59,10 @@ BR.LayersTab = L.Control.Layers.extend({
                     'osmfr'
                 ],
                 'Europe': [
+                    'MtbMap'
                 ],
                 'Country': [
+                    'OpenStreetMap.CH',
                     'Freemap.sk-Car',
                     'Freemap.sk-Hiking',
                     'Freemap.sk-Cyclo',
@@ -77,6 +81,7 @@ BR.LayersTab = L.Control.Layers.extend({
             },
             'Overlays': {
                 'World-wide': [
+                    'HikeBike.HillShading',
                     'Waymarked_Trails-Hiking',
                     'Waymarked_Trails-Cycling',
                     'Waymarked_Trails-MTB'
@@ -148,6 +153,31 @@ BR.LayersTab = L.Control.Layers.extend({
         return this;
     },
 
+    addLeafletProvidersLayers: function () {
+        var includeList = [
+            'Stamen.Terrain',
+            'MtbMap',
+            'OpenStreetMap.CH',
+            'HikeBike.HillShading'
+        ];
+
+        for (var i = 0; i < includeList.length; i++) {
+            var id = includeList[i];
+            var obj = {
+                geometry: null,
+                properties: {
+                    id: id,
+                    name: id.replace('.', ' '),
+                    datasource: 'leaflet-providers'
+                },
+                type: "Feature"
+            };
+            BR.layerIndex[id] = obj;
+        }
+
+        BR.layerIndex['HikeBike.HillShading'].properties.overlay = true;
+    },
+
     _getLayerObjByName: function (name) {
         for (var i = 0; i < this._layers.length; i++) {
 			if (this._layers[i] && this._layers[i].name === name) {
@@ -158,6 +188,7 @@ BR.LayersTab = L.Control.Layers.extend({
 
     createLayer: function (layerData) {
         var props = layerData.properties;
+        var layer;
 
         // JOSM:    https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png
         // Leaflet: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
@@ -180,14 +211,20 @@ BR.LayersTab = L.Control.Layers.extend({
             return result;
         }
 
-        var url = convertUrlJosm(props.url);
+        if (props.datasource === 'leaflet-providers') {
+            // leaflet-providers
+            layer = L.tileLayer.provider(props.id);
+        } else {
+            // JOSM
+            var url = convertUrlJosm(props.url);
 
-        var layer = L.tileLayer(url, {
+            layer = L.tileLayer(url, {
-            maxNativeZoom: props.max_zoom,
+                maxNativeZoom: props.max_zoom,
-            maxZoom: this._map.getMaxZoom(),
+                maxZoom: this._map.getMaxZoom(),
-            subdomains: getSubdomains(props.url),
+                subdomains: getSubdomains(props.url),
-            zIndex: this._lastZIndex + 1
+                zIndex: this._lastZIndex + 1
-        });
+            });
+        }
 
         return layer
     },

package.json

@@ -31,12 +31,14 @@
     "i18next-xhr-backend": "^2.0.1",
     "jquery": "3.3.1",
     "jquery-i18next": "^1.2.1",
+    "jstree": "^3.3.7",
     "leaflet": "~1.3.0",
     "leaflet-control-geocoder": "~1.5.8",
     "leaflet-easybutton": "*",
     "leaflet-editable": "^1.1.0",
     "leaflet-elevation": "MrMufflon/Leaflet.Elevation#master",
     "leaflet-plugins": "~3.0.0",
+    "leaflet-providers": "^1.5.0",
     "leaflet-routing": "nrenner/leaflet-routing#dev",
     "leaflet-sidebar-v2": "nrenner/leaflet-sidebar-v2#dev",
     "leaflet-triangle-marker": "^1.0.1",
@@ -46,8 +48,7 @@
     "mapbbcode": "MapBBCode/mapbbcode#v1.2.0",
     "seiyria-bootstrap-slider": "seiyria/bootstrap-slider#^9.8.1",
     "tether": "1.4.5",
-    "url-search-params": "~0.5.0",
+    "url-search-params": "~0.5.0"
-    "jstree": "^3.3.7"
   },
   "devDependencies": {
     "autoprefixer": "^8.1.0",

yarn.lock

@@ -3448,6 +3448,11 @@ leaflet-plugins@~3.0.0:
   resolved "https://registry.yarnpkg.com/leaflet-plugins/-/leaflet-plugins-3.0.3.tgz#7c727ac79a37636b245dd1adc64e10c61b425864"
   integrity sha512-J2dfJxrq7ETmciGq01syYmB0zG1Ogzy5FioIFJjJB82jFqxHZJDFUMiPFGJn+gfJnWhv/LobbPQYqHdaJSxR9w==
 
+leaflet-providers@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/leaflet-providers/-/leaflet-providers-1.5.0.tgz#06d598231ef36f8d0566c219cedf18cef2ff80f5"
+  integrity sha512-btncloSyOHrgYNexoz2dRpCl+U9iDQME91RsOWQWNAD9jQUPAkq9mxuTvL/O9VOwrqcEtzhvuHBHIOacJAZDxQ==
+
 leaflet-routing@nrenner/leaflet-routing#dev:
   version "0.1.1"
   resolved "https://codeload.github.com/nrenner/leaflet-routing/tar.gz/bbe5df8af500948251337a7e6c09d14f9fad6d8d"