switching to leaflet-providers for cleaner code and more options

This commit is contained in:
Kasper D. Fischer 2020-07-15 23:15:38 +02:00
parent dacfa92970
commit 2492d44c70
6 changed files with 1040 additions and 50 deletions

1011
www/external/leaflet-providers.js vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -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>

View File

@ -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>

View File

@ -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('//server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
{
attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
maxZoom: 16
}).addTo(map);
L.tileLayer.provider('Esri.WorldGrayCanvas').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('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
}).addTo(map);
L.tileLayer.provider('Esri.WorldImagery').addTo(map);
break;
case 'opentopo': // add OpenTopoMap tile layer
L.tileLayer.provider('OpenTopoMap').addTo(map);
break;
case 'opentopo': // add OpenTopoMap tile layer https://opentopomap.org/
map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
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;
default:
map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
{
attribution: '&copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
}).addTo(map);
L.tileLayer.provider('OpenStreetMap.DE').addTo(map);
break;
case 'mapnik': // add OpenStreetMap.Mapni tile layer
L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map);
break;
default: // use OpenStreetMap.DE as default
L.tileLayer.provider(config['map']['baselayer']).addTo(map);
};
// add controls

View File

@ -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('//server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
{
attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
maxZoom: 16
}).addTo(map);
L.tileLayer.provider('Esri.WorldGrayCanvas').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('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
}).addTo(map);
L.tileLayer.provider('Esri.WorldImagery').addTo(map);
break;
case 'opentopo': // add OpenTopoMap tile layer
L.tileLayer.provider('OpenTopoMap').addTo(map);
break;
case 'opentopo': // add OpenTopoMap tile layer https://opentopomap.org/
map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
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;
default:
map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
{
attribution: '&copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
}).addTo(map);
L.tileLayer.provider('OpenStreetMap.DE').addTo(map);
break;
case 'mapnik': // add OpenStreetMap.Mapni tile layer
L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map);
break;
default: // use OpenStreetMap.DE as default
L.tileLayer.provider(config['map']['baselayer']).addTo(map);
};
// add controls

View File

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