How do I check that a Mapbox raster layer is displayed on the map?
My goal is to stop a loading animation. I know I can check if the map itself is ready.
map.on('ready', someFunction)
How do I do something like this but for a specific layer?
There are events for when pieces of data load https://docs.mapbox.com/mapbox-gl-js/api/#mapdataevent, but unfortunately not for when all loading is complete.
Related
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');
});
at present our project is using the leaflet, I take the map parameters to background program (map.getZoom() and map.getbounds()) , then load the returned picture(return from background program) by imageoverlay.
excuse me how to solve continuous drag or continuous scaling, only the implementation of calling a daemon?
If you mean you dynamically load the base map (i.e. the image that is zoomable, draggable and that fills a big pane, not just a small portion that would have needed a single image overlay), you should probably rather do it through a Canvas Tile Layer:
Used to create Canvas-based tile layers where tiles get drawn on the browser side.
With this, you set up a myCanvasTileLayer.drawTile function that is called by Leaflet anytime the map needs more tiles (due to user panning / zooming). Please refer to Leaflet doc for the function arguments.
If you want to stick with your image overlay technique, you might want to listen to drag and zoomend map events to re-trigger your function that loads a new image overlay.
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!
I am getting started on mapbox studio. I want to be able to change the background image based on the zoom level - so far default way to set image is:
Map {
background-color: #land;
background-image:url(pattern/3.png)
}
I have tried adding zoom level conditions as follow.
Map {
background-color: #land;
[zoom>=5] {background-image:url(pattern/2.jpg);}
[zoom<=5] { background-image:url(pattern/3.png);}
}
appreciate if you can share any tips or point to resource and methods I can read.
Cheers :)
Properties in the Map object are global properties that cannot be filtered or changed by zoom level. In order to have different backgrounds at different zoom levels you will need to create a custom polygon layer to act as your background, but with more flexible styling. You would use polygon-pattern-file on this layer instead of background-image.
See the source quickstart tutorial for info about creating a custom source layer and adding it to your style project. You can use the 'bounding box' file from Natural Earth for this; it is a single polygon that covers the entire map.
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.