I am using Mapbox to render a map with an layer from rainviewer. The code is working but I need to synchronize with the end of the layer rendering. I need to know when the last layer is rendered and the image is complete. I need to do this because I'm rendering the HTML in puppeteer. Using any of the networkidle options does not work. There does not seem to be any event on the Map object that signals this either.
I did scour the forums, etc. looking for a solution but did not find anything that would work specifically in this scenario.
This is a generally broken use case in Mapbox-GL-JS. One option that may work for you is:
map.once('idle', () => ...)
This fires once the map has come to rest, completely painted.
Related
I have recently implemented the flutter plugin called flutter_map, using the Mapbox tiles, and would like to know how you guys manage to count the network requests for the Static Tiles. Is it supposed to make a request for every move (zoom in, zoom out, move around, etc.) on the map itself? Is that the intended functioning or is there a way to diminish the number of requests made?Amount of requests made after zooming/panning
Is it supposed to make a request for every move (zoom in, zoom out, move around, etc.) on the map itself?
Yes indeed. The package supports static raster tiles, which means they must be re-downloaded if they change - such as on move or zoom events.
There isn't much in the way you can do about this, as it's a kind-of standard. This is why you'll find a similar thing in other mapping libraries, such as Leaflet.js and others.
See https://docs.mapbox.com/api/maps/static-tiles/ for potential ways to reduce costs whilst maintaining standards.
In Mapbox GL JS, I'm looking to use clustering + use a different icon for one feature which is currently defined as "active". I want the necessary transitions (unclustering + change of the active feature) to be animated, but can't find a way of making this all happen.
Mapbox provides an example showing how to implement clusters, which uses different layers for the clusters and for non-clustered features. This technique can also be used for rendering the "active" feature in its own layer with a different image. When a cluster breaks ("unclusters") into features, it basically gets removed from the clusters layer, and the features get added to the "unclustered" features layer. But this doesn't allow adding a transition animation, since there isn't really a transition here. I would like to show the cluster splitting into features, with each feature moving to its respective location.
Any ideas how to solve this?
Some ideas that don't quite provide a full answer:
Use Leaflet with the markercluster plugin and its "spider" behavior for clustering. This works and provides a nice "spider" transition animation for unclustering. However there is no "official" binding between leaflet and Mapbox GL, so I'm reluctant to use that (there is just this which I would need to modify and it's based on undocumented Mapbox internals). Also I'm now sure whether this is good or bad performance-wise with thousands of features. And I know from experience that adding an animation to modify the shape of Leaflet markers (for active/inactive transitions) doesn't really work.
Use markers in Mapbox, instead of layers, but then how to do any sort of clustering?
I can't think of any reasonable way to implement this just using Mapbox GL JS, short of learning WebGL and implementing a custom source.
But I wouldn't write off the Leaflet+Mapbox approach - in my experience, the performance is ok (though I haven't tested with clusters or what you're trying to do).
There is a similar approach with OpenLayers: https://openlayers.org/en/latest/examples/mapbox-layer.html I have also used this and it worked fine.
Finally, it seems there are quite a few Leaflet and OpenLayers libraries that specifically solve the animated clustering issue: https://gis.stackexchange.com/questions/17250/how-to-create-animated-cluster-markers-in-openlayers-leaflet (And most of these answers are very old, so perhaps there are more libraries now).
I am developing a weather radar viewer using Mapbox. In a certain mode, there are 2 Mapbox maps on the screen at the same time showing different modes of the radar. The maps are locked to each other. When one map moves, rotates, or pans - the other one does as well. I did this by simply passing the properties of one map to the other. In the below screenshot, you will see how they are showing identical locations.
What I want to do is - when the user is hovering the mouse over "map1", I would like an identical (ghost or false) cursor on "map2". Here is what I am looking to do:
(edit: What you are looking at is an actual screenshot. Each map is enclosed in a DIV with 50% width of the screen, if this helps to explain)
I don't know if this is even possible in Mapbox. Hopefully someone can give some guidance as I can't find any other questions related to this and I really have no code to show without knowing where to start.
If you attempt to do this inside Mapbox-GL-JS (for instance, by constantly updating the location of a GeoJSON feature layer), I think the performance will be pretty poor.
But since the two views are exactly locked (and presumably the exact same dimensions), you can just do this at an HTML/CSS level. Detect mouse movement on the first map, and update the location of an absolutely-positioned element hovering over the second map to match.
Another approach would be using a canvas element overlaid over the second map, similarly updated.
Whenever I use map.setStyle to change the style, the entire map reloads. This can be seen in the Mapbox GL JS example: https://docs.mapbox.com/mapbox-gl-js/example/setstyle/
I'm interested in changing the map more seamlessly. An example of this can be seen in Google maps when you switch between Map and Satellite views.
Does Mapbox GL JS have an easy way of style changing without reloading the whole map, or does this need to be implemented manually (I.e. with map.removeSource, map.addSource, map.removeLayer, map.addLayer)?
It depends a bit what you mean by "reloading the whole map". In this case, every single layer and source is being replaced wholesale, so it doesn't really have much choice.
If you have a style object, make some changes to it, and call setStyle() with the new style object, my understanding is that only the differences will be acted on. So usually, the effect won't be "reloading the whole 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.