Removing old tilelayer from map when switching

This commit is contained in:
Frank Schubert
2023-03-15 13:05:34 +01:00
parent cd9bd420a6
commit 02e31069bf

View File

@@ -140,7 +140,7 @@
<div class="row mt-1">
<div class="col">
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="centerMap()"><i class="far fa-dot-circle fa-fw"></i> Zentrieren</button>
<button type="button" class="btn btn-sm btn-outline-success" onclick="toggleTileset()"><i class="far fa-arrow-right-arrow-left fa-fw"></i> Karte/Satellit</button>
<button type="button" class="btn btn-sm btn-outline-success" onclick="toggleTileset()" title="Zwischen Karte und Satellitenbild umschalten"><i class="far fa-arrow-right-arrow-left fa-fw"></i> Karte/Satellit</button>
</div>
</div>
</div>
@@ -309,6 +309,8 @@
var markers = [];
var markerState = true;
var mapCenterPos = [<?=TT_PLACEHOLDER_GPS_LAT?>, <?=TT_PLACEHOLDER_GPS_LONG?>];
var tileLayers = [];
var tilesets = ["mapbox/streets-v12", "mapbox/satellite-streets-v12"];
var currentTileset = "mapbox/streets-v12";
function toggleTileset() {
@@ -343,16 +345,26 @@
preorderMap = L.map('preorder-map').setView([<?=TT_PLACEHOLDER_GPS_LAT?>, <?=TT_PLACEHOLDER_GPS_LONG?>], 12);
}
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
minZoom: 4,
maxZoom: 22,
//id: 'mapbox/streets-v12',
//id: 'mapbox/satellite-streets-v12',
id: currentTileset,
accessToken: '<?=TT_MAPBOX_TILE_API_TOKEN?>'
}).addTo(preorderMap);
if(!(currentTileset in tileLayers)) {
tileLayers[currentTileset] = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
minZoom: 6,
maxZoom: 22,
id: currentTileset,
accessToken: '<?=TT_MAPBOX_TILE_API_TOKEN?>'
});
}
tileLayers[currentTileset].addTo(preorderMap);
// remove previous tileset from map
tilesets.forEach(function(t) {
if(t != currentTileset && preorderMap.hasLayer(tileLayers[t])) {
// remove all tilesets not currently wanted
preorderMap.removeLayer(tileLayers[t]);
}
});
L.MakiMarkers.accessToken = '<?=TT_MAPBOX_TILE_API_TOKEN?>';
if(!tilesetChangeOnly) {