Replies: 1 comment 2 replies
-
|
I can suggest leveraging https://gitlab.com/IvanSanchez/Leaflet.TileLayer.GL/ . It lets you define several URLs per tile, so each of them will be loaded as a WebGL texture, and then you should define a custom shader to choose the right texture based on the value of a uniform (as a bonus, interpolate as needed). One issue with this approach is the number of available textures per WebGL context. The number varies between 8 and 64, depending on the GPU+OS+browser combination. Loading 72 textures is gonna be problematic. |
Beta Was this translation helpful? Give feedback.
-
|
Very interesting, thanks. |
Beta Was this translation helpful? Give feedback.
-
|
Another option is to do |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi there,
Our use case is to display animated precipitation radar data. The animation is 72 timesteps long (-3h->3h by 5mn), image switch every 500ms (+ a manual slider for the user to navigate along time).
Given the geographic coverage of data and the backend capabilities, the most adapted is to display tiles. But our attempts with that approach led to quite a bad experience. In short, there was a lot of flickering of tiles, especially when moving/dragging the map. The browser was also quite overwhelmed with queries, 256*256 default size of tiles was too small.
We switched back to an imageOverlay-based implementation, with some manual prefetch of images to have them in the browser cache to avoid missing images in the animation.
That's not very satisfactory as we had to hard-code some regions, and the image we serve are too big and costly (in throughput for the user, and real money on back-end side). We're still interested in a tile-based approach, probably with larger tiles than the default 256px.
Are there any viable approaches (plugins ?) to properly animate tileLayers with a good overall user experience ?
Beta Was this translation helpful? Give feedback.
All reactions