new map leyer

src/app/components/map/map.component.ts

@@ -127,9 +127,15 @@ export class MapComponent implements OnInit {
       id: 'mapbox.streets-v11',
       attribution: '© <a href="https://apps.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
     })
+
+  cycleMaps =  L.tileLayer(
+    'https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=' + environment.osm.apikey, {
+    attribution: '&copy; OpenCycleMap, ' + 'Map data: opencyclemap.org',
+    maxZoom: 21,
+  })
  
   options = {
-    layers: [this.mapBoxMaps],
+    layers: [this.cycleMaps],
     zoom: 19,
     center: L.latLng([51.02545, 13.72295])
   };
@@ -142,7 +148,8 @@ export class MapComponent implements OnInit {
       'MapBox': this.mapBoxMaps,
       'Street Maps': this.streetMaps,
       'Wikimedia Maps': this.wMaps,
-      'Satellite': this.satelliteMaps
+      'Satellite': this.satelliteMaps,
+      'Cycle': this.cycleMaps
     }
     L.control.layers(baseLayers).addTo(this.map);
 

src/environments/environment.ts

@@ -12,6 +12,10 @@ export const environment = {
     accessToken2: 'pk.eyJ1IjoidmFsYXZhbmNhIiwiYSI6ImNrbGZlYm13ZTJtZ2gyb25wbGhqdGhmZzkifQ.atRzBqwKjY9wEUlue2YLzQ'
   },
 
+  osm: {
+    apikey: 'cef83d0812574b979a9ce37273909976'
+  },
+
   indoorequal: {
     APIkey: 'l70N1y3m02lRDrlIqOzYyB'
   },