Allow users to pre-load and pre-render specific scenes

[pwilczynski]

Motivation

We are in the process of building a lightweight GIS application on top of Mapbox GL JS. Often, users want to have a dynamic and interactive experience similar to what Mapbox GL JS currently supports. However, after doing work, users often want to provide a geospatial presentation which starts at a high zoom level then zooms into a couple of key locations to provide additional context. The end product is often something that looks quite similar to this New York Times feature about island building in the South China Sea.

Currently, jumping from viewport to viewport is a relatively clunky process for two main reasons: 1) Our application cannot pre-load tiles at a future zoom level. While we can make the requests manually and then have the browser cache warmed in advance, we still don't get the type of snappy tile transition that we would want. 2) For maps with many GeoJSON elements on them, the render cycle takes a second or so to draw so that even after tiles appear, there's a noticeable lag before the map is fully rendered.

These two issues cause us to have a fairly clunky presentation mode where jumping from viewport to viewport doesn't feel snappy.

I could imagine this feature also being useful for generating thumbnails from a given map or for maps where the data doesn't span the entire world and users tend to jump from city to city versus panning across entire oceans.

Design Alternatives

If Mapbox GL JS doesn't do anything we will likely start by warming the tile cache manually and then proceed to either: 1) Running a headless client to pre-render static screenshots that we load eagerly and then swap out once Mapbox has rendered things correctly or 2) Forcing users to manually create the screenshots within the application.

I think that providing a list of future viewports (and possibly paths, though that is obviously a lot harder) to pre-render would be a huge benefit to our users.

Implementation

I think that we'd probably start by using methods in source_cache.js to pre-cache future tiles, and then evaluate other options.

[andrewharvey]

For preloading tiles see #2470 and #2826

[lucaswoj]

Thanks @andrewharvey 😄

This is a duplicate of https://github.com/mapbox/mapbox-gl-js/issues/2470. Let's focus discussion there.

[pwilczynski]

Awesome, sorry for not finding that. The one thing that isn't covered by this is actually pre-rendering the GeoJSON source on top of the pre-loaded tiles, which would also be useful. Thanks so much @lucaswoj

[lucaswoj]

@pwilczynski WebGL doesn't really have a concept of pre-rendering. Every frame is rendered from scratch. The expensive preprocessing is done as part of the tile "loading" flow mentioned in https://github.com/mapbox/mapbox-gl-js/issues/2470

[pwilczynski]

OK, that makes sense - thanks for the response. Sometimes, the client side rendering of a map with a lot of GeoJSON elements on it is a few seconds, and so I was just looking for a way to improve the drawing speed, but prefetching tiles and sending more of our features to the BE behind an MVT server might be the right way to do this...

[Scarysize]

@pwilczynski If you spread your GeoJSON features to several sources, you will get better performance 🙆‍♂️