Mapbox-gl-js: Preloading tiles for camera animation

Created on 20 Apr 2016  Â·  15Comments  Â·  Source: mapbox/mapbox-gl-js

It would be useful to have a function to preload tiles, for example for use before a Map.flyTo over a large distance or through large zoom level differences as you'd otherwise just see large blank tiles.

JSFiddle to illustrate a situation where preloading would be preferable

feature needs discussion

Most helpful comment

+1

In addition, would be great if flyTo automatically preloaded tiles along it's flight path, in particular around its destination.

All 15 comments

+1

In addition, would be great if flyTo automatically preloaded tiles along it's flight path, in particular around its destination.

+1

Any updates on this?

Me too... have very blocky animation when flying around. Have changed zoom to 4 to fly at a higher level - presumably loading fewer tiles. But still pretty blocky (speed 1.2).

Would love that as well

Any updates? The flash of grey makes a lot of animations totally unusable.

It's 2018 any update? I'd like to pre-fetch some tiles to display maps offline using webapp

+1

+1

This would be a great feature. Using the flyTo for storytelling purposes and having a user maintain a sense of continuity is pretty unusable in its current state.

This is definitely still something that we're interested in doing, and we can see that it would be very useful for storytelling-type animations. It's not on our near term backlog, so unfortunately we can't really say anything concrete about when we'll get to work on this. cc @chloekraw

Thanks for following up @ChrisLoer! In looking for a workaround, I had thought I could look at the network requests and preload those tiles on the client. But it seems that doing the same flyTo operation multiple times in the same session shows similar loading patterns. That is to say, it seems there's some kind of invalidation happening of tiles that were just loaded a moment ago — is that accurate? Is there a spot in the codebase you can point to where some of this logic is being handled? For those of us running into this issue, we could start digging into some possible solutions for our use cases.

@mhkeller The kind of central coordination point in the code for this logic is source_cache.js, but it's pretty complicated, it's hard to point to a single place. Here's the way we think of tile loading:

  • First, you load the vector tile from the network. Here, we rely on the browser's caching (and you can watch this in the network tab of the dev tools)
  • Second, we parse the vector tile on a web worker, apply the map's style, and turn it into a bunch of GL buffers ready for uploading to the GPU
  • Third, we transfer the tile to the foreground, upload to the GPU, and start rendering.

When we stop rendering a tile, the TileCache that you see in SourceCache is responsible for holding onto the "ready to render" tiles for a while so that we can quickly re-display them if they move back into the viewport. If the tile has been booted from the in-memory cache, then we have to redo the second (background) parsing step, and you'll see an empty tile on the map during that time.

Thanks that's super helpful! I'll see what I can do and update if I gain any wisdom.

The other option I'm thinking about is loading my own raster layer but that has it's own considerations. We'll see how it goes...

Thanks again.

@mhkeller @ChrisLoer Has there been any update on this feature request since 2018? Thanks!

Hi @skylarweaver, I ended up going the custom raster layer route. The other element that I found I needed for this to work well is the ability to load tiles from an arbitrary zoom levels decoupled from the camera's current zoom position.

With satellite imagery, it's distracting when the baselayer keeps changing. I wanted one stable image that I zoomed into and gradually got clearler and clearer. In my map (the first one in the story text where the yellow line is drawn), for example, the imagery at one zoom level was from winter while, at closer zoom levels, it was from summer. The change in tree cover was jarring.

I think it would be a great feature to be able to control zoom level and tile layer independently but I couldn't figure out how.

Maybe @ChrisLoer has ideas or an update?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

aderaaij picture aderaaij  Â·  3Comments

foundryspatial-duncan picture foundryspatial-duncan  Â·  3Comments

stevage picture stevage  Â·  3Comments

iamdenny picture iamdenny  Â·  3Comments

infacq picture infacq  Â·  3Comments