switching to leaflet-providers for cleaner code and more options

www/index.html.de

@@ -35,6 +35,7 @@
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin="anonymous"></script>
 	<!-- <script type="text/javascript" src="external/TileLayer.Grayscale.js"></script> --> <! version of 2017-11-01 downloaded 2020-07-15 -->
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.markers.min.js" integrity="sha512-R/iucaxFnDFUTdZRxUvxzc+sypDQhqnxInBmNjgGE0RaiMl/ektVB1wFS/L0xDZmLFPpEGR0Kw3GEBgtQNFHyg==" crossorigin="anonymous"></script>
+	<script src="external/leaflet-providers.js"></script>
 	<script src="external/jQuery.print.min.js"></script>
 	<script src="external/easyPrint/bundle.js"></script>
 	

www/index.html.en

@@ -35,6 +35,7 @@
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin="anonymous"></script>
 	<!-- <script type="text/javascript" src="external/TileLayer.Grayscale.js"></script> --> <! version of 2017-11-01 downloaded 2020-07-15 -->
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.markers.min.js" integrity="sha512-R/iucaxFnDFUTdZRxUvxzc+sypDQhqnxInBmNjgGE0RaiMl/ektVB1wFS/L0xDZmLFPpEGR0Kw3GEBgtQNFHyg==" crossorigin="anonymous"></script>
+	<script src="external/leaflet-providers.js"></script>
 	<script src="external/jQuery.print.min.js"></script>
 	<script src="external/easyPrint/bundle.js"></script>
 	

www/map.js

@@ -140,39 +140,27 @@ function initMapLink() {
 $(document).ready(function() {
 
 	// create a map in the "map" div, set the view to a given place and zoom
+	map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
 	
 	// create baselayer
 	switch ( config['map']['baselayer'] ) {
 	case 'esrigray': // add ESRI Grayscale World Map (neither city nor road names)
-		map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
+		L.tileLayer.provider('Esri.WorldGrayCanvas').addTo(map);
-		L.tileLayer('//server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
-		{
-			attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
-			maxZoom: 16
-		}).addTo(map);
 		break;
 	case 'aerial': // add ESRI WordImagery tile layer
-		map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
+		L.tileLayer.provider('Esri.WorldImagery').addTo(map);
-		L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
-		{
-			attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
-		}).addTo(map);
 		break;
-	case 'opentopo': // add OpenTopoMap tile layer https://opentopomap.org/
+	case 'opentopo': // add OpenTopoMap tile layer
-		map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
+		L.tileLayer.provider('OpenTopoMap').addTo(map);
-		L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
-		{
-			attribution: 'Kartendaten: &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, SRTM | Kartendarstellung: &copy; <a href="http://opentopomap.org/">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>)'
-		}).addTo(map);
 		break;
 	case 'osmde': // add OpenStreetMap.DE tile layer, default
-		null;
+		L.tileLayer.provider('OpenStreetMap.DE').addTo(map);
-	default:
+		break;
-		map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
+	case 'mapnik': // add OpenStreetMap.Mapni tile layer
-		L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
+		L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map);
-		{
+		break;
-			attribution: '&copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
+	default: // use OpenStreetMap.DE as default
-		}).addTo(map);
+		L.tileLayer.provider(config['map']['baselayer']).addTo(map);
 	};
 
 	// add controls

www/map.js.en

@@ -140,39 +140,27 @@ function initMapLink() {
 $(document).ready(function() {
 
 	// create a map in the "map" div, set the view to a given place and zoom
+	map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
 	
 	// create baselayer
 	switch ( config['map']['baselayer'] ) {
 	case 'esrigray': // add ESRI Grayscale World Map (neither city nor road names)
-		map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
+		L.tileLayer.provider('Esri.WorldGrayCanvas').addTo(map);
-		L.tileLayer('//server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
-		{
-			attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
-			maxZoom: 16
-		}).addTo(map);
 		break;
 	case 'aerial': // add ESRI WordImagery tile layer
-		map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
+		L.tileLayer.provider('Esri.WorldImagery').addTo(map);
-		L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
-		{
-			attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
-		}).addTo(map);
 		break;
-	case 'opentopo': // add OpenTopoMap tile layer https://opentopomap.org/
+	case 'opentopo': // add OpenTopoMap tile layer
-		map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
+		L.tileLayer.provider('OpenTopoMap').addTo(map);
-		L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
-		{
-			attribution: 'Kartendaten: &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, SRTM | Kartendarstellung: &copy; <a href="http://opentopomap.org/">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>)'
-		}).addTo(map);
 		break;
 	case 'osmde': // add OpenStreetMap.DE tile layer, default
-		null;
+		L.tileLayer.provider('OpenStreetMap.DE').addTo(map);
-	default:
+		break;
-		map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
+	case 'mapnik': // add OpenStreetMap.Mapni tile layer
-		L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
+		L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map);
-		{
+		break;
-			attribution: '&copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
+	default: // use OpenStreetMap.DE as default
-		}).addTo(map);
+		L.tileLayer.provider(config['map']['baselayer']).addTo(map);
 	};
 
 	// add controls

www/misc.js

@@ -113,6 +113,7 @@ var config = {
 		centerDefault: [51.85, 7.0],
 		timespan: 180,
 		latlngDelta: 0.1,
+		baselayer: 'OpenStreetMap.DE',
 	},
 	station: {
 		markerColor: 'darkgreen',