I have a map with the feature set to change your map tiles in user preferences, the below function is responsible for changing the map tiles dynamically when the user wants to.
- The actual problem
When I do change the map tiles, for example from CartoDB to OSM in real time, when planning the map viewport, you can see old tiles from CartoDB.
Evidence / Video of this https://i.gyazo.com/702e8e4875bc89c13f41a132dccb78da.mp4
Another thing I should mention, I'm using "leaflet-providers" plugin, for the simple API of adding the tiles to the map.
I did raise an issue on the github repo about my experience of this, but the issue was closed and the author mentioned that this was indeed a leaflet issue, so I've come here for some leaflet.js advice :)
I am aware of how to remove tile layers already, so I need something a little more specific and in relation to my code, here is what I've tried.
//this
self.map.removeLayer(L.tileLayer.provider('OpenStreetMap'))
//this?
//self.map.invalidateSize();
//this??
self.map.invalidateSize();
let self = this;
let mapLayer = self.mapLayer;
if (mapLayer === 'osm') {
L.tileLayer.provider('OpenStreetMap').addTo(self.map);
}
if (mapLayer === 'cartodb') {
L.tileLayer.provider('CartoDB').addTo(self.map);
}
//attempt to refresh tiles?
self.map._onResize();
self.map.invalidateSize();