Situation:
I have an imageOverlay in a layerGroup. Zoom level: 16 The png-file is fetched from the server when adding the overlay-layer.
When I zoom in or out, I remove the previous imageOverlay with removeLayer(imgA) and a new png-file is fetched from the server, matching the zoom level. This works fine.
But: when I remove the overlay and add the overlay ALL imageOverlays appear again.
It looks like a bug in Leaflet. Or do I have an error in my code?
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<style>
.schermvullend {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="schermvullend"></div>
<script type="text/javascript">
var url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
var zoom = 16;
var breedtegraad = '51.561721700355974';
var lengtegraad = '5.072394019517229';
var knooppuntenBool = false;
var osm = L.tileLayer(url, {
maxZoom: 18,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
var baseMap = 'OpenStreetMap';
var baseMaps = {
"OpenStreetMap": osm
};
var map = L.map('map', {
center: [breedtegraad, lengtegraad],
zoom: zoom,
layers: [baseMaps[baseMap]]
});
var layerControl = L.control.layers(baseMaps, null, {position: 'bottomleft', collapsed: false}).addTo(map);
var knooppuntenGroup = L.layerGroup();
let knooppuntenName = 'Knooppunten';
layerControl.addOverlay(knooppuntenGroup, knooppuntenName);
var imgA;
function getKnooppunten () {
let obj = map.getBounds();
let size = map.getSize();
let bbox = obj._southWest.lat + ',' + obj._southWest.lng + ',' + obj._northEast.lat + ',' + obj._northEast.lng;
let imageUrl = 'https://service.pdok.nl/wandelnet/regionale-wandelnetwerken/wms/v1_0?'
+ 'REQUEST=GetMap&'
+ 'SERVICE=WMS&'
+ 'VERSION=1.3.0&'
+ 'FORMAT=image/png&'
+ 'STYLES=&'
+ 'TRANSPARENT=true&'
+ 'layers=wandelnetwerken&'
+ 'WIDTH=' + size.x + '&'
+ 'HEIGHT=' + size.y + '&'
+ 'CRS=EPSG:4326&'
+ 'BBOX=' + bbox;
// console.log(imageUrl);
var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
var altText = 'Wandelknooppunten';
var latLngBounds = L.latLngBounds([[obj._southWest.lat, obj._southWest.lng], [obj._northEast.lat, obj._northEast.lng]]);
imgA = L.imageOverlay(imageUrl, latLngBounds, {
opacity: 1,
errorOverlayUrl: errorOverlayUrl,
alt: altText,
interactive: true
}).addTo(knooppuntenGroup);
}
map.on({
overlayadd: function(e) {
if (e.name === knooppuntenName) {
getKnooppunten ();
knooppuntenBool = true;
}
},
overlayremove: function(e) {
if (e.name === knooppuntenName) {
knooppuntenBool = false;
}
},
moveend: function() {
if (knooppuntenBool) {
knooppuntenGroup.removeLayer(imgA);
getKnooppunten ();
}
}
});
</script>
</body>
</html>
I expect that a layer will be removed persistently when using removeLayer(), but something is going wrong when working with overlay-layers.