I'm using a combined tilelayer, which I have to refresh (using .redraw() currently) each time a new layer has been added or an old has been removed. There are no technical problems with my implementation, but when a layer is toggled, there is a brief flicker as the old tiles are instantly removed, but the new ones obviously take a few moments to load in.
Is there any way to keep each of these old tiles until its replacement has been loaded, resulting in a smoother transition?
I have considered using a temporary layer, and loading the new tiles above the old ones, but this would cause a lot of extra work and loading, so I'm hoping leaflet has something more elegant built in, like a delayRemoval option or something.
Here's a jsfiddle: http://jsfiddle.net/Q6586/
If you click the map, it will redraw itself, instantly removing the old tiles, and the map will briefly flash gray before the new ones are loaded.
I want to get rid of that flash. I have temporarily solved this by creating a new layer on top of the old one, but I feel that's a very unelegant solution.
You could create another layer that you would bring to front while you are redrawing.
The event 'load' will tell you when all tiles are loaded
map.on('click', function(e) {
layer2.bringToFront();
layer.on('load', function(e) {
console.log('loaded');
layer.bringToFront();
});
layer.redraw();
});
Have look at this JSFiddle: http://jsfiddle.net/FranceImage/5452r/
I call different tiles so that you can see. Obviously, you will use the same template for both tile layers.
Related
I’m using the new map viewer and I have two overlapping polygon layers. When I have popups turned on for both layers, but I’d prefer popups for one layer shows up first.
Is there a way to reorder popups without reordering layers?
There's no way to make these pop up reordered. I hope esri fixes this soon- it is obnoxious!
How can I lazyload map tiles when using Leaflet?
Especially on mobile devices I don't want to load maptiles at the beginning because most of my users never scroll down to the map.
Well, a very simple trick would be to create your map, or at least to add your Tile Layer, only when your map container comes into viewport.
That way, the tiles will not be requested before the map is actually viewable.
As to how to know when this situation happens, you should find plenty resources online and here. Basically you compare the document scroll and the map container position, and listen to scroll event. A more recent solution uses Intersection Observer.
L.tileLayer(this.settings.tiles + '/{z}/{x}/{y}.jpg', {...})
.on('tileloadstart', function(event) {
event.tile.setAttribute('loading', 'lazy');
});
I have 3 layers, one GeoJSON that is used with leaflet-draw and two (vector and canvas/heatmap) that just display overlays.
My problem is, the overlays get added later dynamically with the layer-control, while the GeoJSON layer is always there. When the overlays get added, some of the draw features and general interaction with the GeoJSON layer top to work, because my overlays are always on top.
How can I get the GeoJSON layer back to the front?
Using layer.bringToFront() didn't work.
If the layers are being added through the layer control, you can keep your GeoJSON layer on top by bumping it back using .bringToFront() each time an overlayadd event is fired:
map.on('overlayadd', function() {
yourGeoJsonLayerName.bringToFront();
});
A somewhat unwieldy example fiddle is here:
http://fiddle.jshell.net/nathansnider/yt65dkyt/
Though layer ordering can be handled more gracefully in the Leaflet 1.0 betas by assigning layers to panes with a persistent zIndex, it looks like Leaflet Draw doesn't officially support 1.0 yet, so .bringToFront it is!
Introduction
As i am working on application which uses leaflet api. Live Here
Where first user enter '1' as input to load the image on map.
Then user can draw different shapes(fences) using bottom-left buttons.
The 'eraser' button is suppose to remove all layers from map regarding CurrentFeatureGroup.
Problem
When we click on 'eraser' button, all shapes will be removed from map having currentfeaturegroup.
But after removing when we draw some other shapes, these shapes are invisible, although i have checked the function working properly.
I don't have idea how these shapes are now invisible.
Script(which responsible to remove layers)
L.easyButton('<img src="/delete.png">', function () {
map.removeLayer(currentFeatureGroup);
$('.leaflet-container').css('cursor', '');
}).addTo(map);
Please consider removeLayer, not clearLayer.If someone have any idea
about this problem please do help.Any kind of help or reference will
be appreciated, thanks for your time
If you completely remove the featurelayer from the map by using map.removeLayer(currentFeatureLayer) where do you expect that any new features you draw after that will be added to? If you want to remove all current features from the featurelayer you really should be using currentFeatureLayer.clearLayers() which will keep the featurelayer so that you can continue to add features afterwards.
I've got 2 tilelayers on a Leaflet/Mapbox map and I am able to toggle between the layers, similar to this map. The difference is that my two layers are of the same type, both showing 'bike stations' to continue with the linked example.
Since I'm adding and removing the layers for each click, there's a small delay between the removal of the first layer and the adding of the second layer. I think I need to listen for when the second layer has finished loading, the removing the first layer to get a smooth transition between the two.
Is there any built-in functionality in Leaflet or Mapbox for accomplishing this?
UPDATE:
I managed to work around this problem by using the setOpacity method of the tilelayers instead of reloading them for each click. But I'm still curious as to whether there exists a ready-method as described above.
There's nothing built-in to accomplish this, but it's something we might cover with an example in the future.