Caching map tiles for nice animation?

[trusktr]

Hello! Is there a way to cache certain map tiles so that an animation from one location to another can be a great experience without empty areas showing (due to tile loading)?

For example, suppose I know the pre-defined path that the camera will fly. I would like to pre-load all the tiles that the camera would see while flying along its path from one location to the next.

It would like to somehow pre-load those tiles, then show the experience after all tiles are loaded, and while all the tiles are loading I would show a loading screen.

As an example, the following Leaflet demo (it isn't Harp.gl, but the same concept applies) shows what I wish to avoid. When you click a location, the camera will zooms into that location, and the screen will go blurry or blank until new tiles load:

http://bl.ocks.org/ramiroaznar/36a8a2075dcaee97824ebbbb6d5bdb70

What I would prefer is that all the tiles along the path, including for all levels of detail on that path, are pre-loaded, or even baked in.

Are there any existing tools for this?

If not, can I maybe emulate this by moving the camera to each position (or maybe multiple cameras on multiple maps to parallelize it), then once I detect all load events (assuming there are load events of some sort) have completed, do the fly over?

Or maybe I would need to make a custom tile provider that has the baked-in tiles. Any examples of that?

[nzjony]

@trusktr , good to see you again!

Very interesting use case, we haven't done anything like this, but it should be possible.

From the MapView, you can access the visibleTileSet, see: https://www.harp.gl/docs/master/doc/classes/harp_mapview.mapview-1.html#visibletileset

Then there is a method where you can create a tile, see: https://www.harp.gl/docs/master/doc/classes/harp_mapview.visibletileset-1.html#gettile

You will need to make sure that your cache is big enough in the MapView, see: https://www.harp.gl/docs/master/doc/interfaces/harp_mapview.mapviewoptions-1.html#tilecachesize

The problem remains that you need to compute the tile keys that are intersected by the camera for the pre-defined path. We have a class which handles this, see, the FrustumIntersection class: https://www.harp.gl/docs/master/doc/classes/harp_mapview.frustumintersection.html

Basically, you would need to instantiate the class, then for each key frame of the path, you would call https://www.harp.gl/docs/master/doc/classes/harp_mapview.frustumintersection.html#updatefrustum and then you need to call: https://www.harp.gl/docs/master/doc/classes/harp_mapview.frustumintersection.html#compute

This is done already in the VisibleTileSet.ts class, see:

harp.gl/@here/harp-mapview/lib/VisibleTileSet.ts

Line 1393 in 81f8e59

this.m_frustumIntersection.updateFrustum(this.m_cameraOverride.projectionMatrix);

and

harp.gl/@here/harp-mapview/lib/VisibleTileSet.ts

Line 1402 in 81f8e59

const result = this.m_frustumIntersection.compute(

It should theoretically work, but let me know if you get stuck.

Thanks for the great question!