Preloading tiles for camera animation

[filiphhh]

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

[kristfal]

+1

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

[havardl]

+1

Any updates on this?

[bigrig2212]

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).

[silicakes]

Would love that as well

[bcherny]

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

[a2nt]

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

[travisanderson]

+1

[boonstar]

+1

[mhkeller]

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.

[ChrisLoer]

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

[mhkeller]

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.

[ChrisLoer]

@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.

[mhkeller]

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.

[skylarweaver]

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

[mhkeller]

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?

[ewagstaff]

I know this has been a ghost issue for 2 years, but chiming in to say it would be a fantastic addition for storytelling continuity.

[stepankuzmin]

Hey everyone 👋

We've recently released a v2.7.0-beta.1, and it enables preloading tiles for camera animation. You can use preloadOnly option with any animation method:

map.flyTo({center: [-119.5375, 37.7425], preloadOnly: true});
map.easeTo({center: [-119.5375, 37.7425], preloadOnly: true});
map.fitBounds([[-122.4943, 37.7247], [-122.34, 37.82]], {padding: 20, preloadOnly: true});

After the map finishes preloading, it becomes idle so that you can start the animation:

map.flyTo({center: [-119.5375, 37.7425], preloadOnly: true});
await map.once('idle');
map.flyTo({center: [-119.5375, 37.7425]});

You can also achieve preloading tiles for an arbitrary region with:

map.jumpTo({center: [-119.5375, 37.7425], zoom: 8, preloadOnly: true});
await map.once('idle');
map.jumpTo({center: [-119.5375, 37.7425], zoom: 8});

You can get the example at ./debug/preload-tiles.html

Feel free to reopen this issue if you have any questions.

[sedot42]

@stepankuzmin I could not find it documented anywhere. I looked e.g. here. Am I missing something or is the documentation just missing for this one?

[ibmeister]

Hey everyone 👋

We've recently released a v2.7.0-beta.1, and it enables preloading tiles for camera animation. You can use preloadOnly option with any animation method:

map.flyTo({center: [-119.5375, 37.7425], preloadOnly: true});
map.easeTo({center: [-119.5375, 37.7425], preloadOnly: true});
map.fitBounds([[-122.4943, 37.7247], [-122.34, 37.82]], {padding: 20, preloadOnly: true});

After the map finishes preloading, it becomes idle so that you can start the animation:

map.flyTo({center: [-119.5375, 37.7425], preloadOnly: true});
await map.once('idle');
map.flyTo({center: [-119.5375, 37.7425]});

You can also achieve preloading tiles for an arbitrary region with:

map.jumpTo({center: [-119.5375, 37.7425], zoom: 8, preloadOnly: true});
await map.once('idle');
map.jumpTo({center: [-119.5375, 37.7425], zoom: 8});

You can get the example at ./debug/preload-tiles.html

Feel free to reopen this issue if you have any questions.

Are we ever getting this for iOS?

[vkaelin]

Hey everyone 👋

We've recently released a v2.7.0-beta.1, and it enables preloading tiles for camera animation. You can use preloadOnly option with any animation method:

map.flyTo({center: [-119.5375, 37.7425], preloadOnly: true});
map.easeTo({center: [-119.5375, 37.7425], preloadOnly: true});
map.fitBounds([[-122.4943, 37.7247], [-122.34, 37.82]], {padding: 20, preloadOnly: true});

After the map finishes preloading, it becomes idle so that you can start the animation:

map.flyTo({center: [-119.5375, 37.7425], preloadOnly: true});
await map.once('idle');
map.flyTo({center: [-119.5375, 37.7425]});

You can also achieve preloading tiles for an arbitrary region with:

map.jumpTo({center: [-119.5375, 37.7425], zoom: 8, preloadOnly: true});
await map.once('idle');
map.jumpTo({center: [-119.5375, 37.7425], zoom: 8});

You can get the example at ./debug/preload-tiles.html

Feel free to reopen this issue if you have any questions.

I can't see this API in v2.10.0, is it no longer available?

[RoundRobin-fr]

sorry for necrobumping, but I can't get your example to work:

map.flyTo({center: [-119.5375, 37.7425], preloadOnly: true});
await map.once('idle');
map.flyTo({center: [-119.5375, 37.7425]});

idle event is firing immediately after the preloadOnly call is made, even though the preloading is not completed at all (barely started actually).

[MatsMiersen]

it doesnt work