Combining offline and online

[ShaunBrassell]

Am a bit of a noob with regards to Mapbox GL, but trying to figure out how to do the following: I have vector maps working great, but if the app starts in airplane mode, or if there is no signal, or only a portion of the map is displayed (or none at all), no matter how far you zoom out. And Its seems that previous caches are not there either.

I would like to at least serve some local offline mbtiles so if the user zooms out, then at least they will see a rough map. Maybe if the user views zoom level 0-6, use local files, 7+ use internet. Really just want to have an outline map there when there is no connectivity.

PS awesome library!

[HarelM]

I think addProtocol will help you in that aspect.
You can download and store in the client the relevant tiles and use them in the style as a different source.
We (at israel hiking map) are using this method to allow full offline maps.

[ShaunBrassell]

Thanks man, will look into it. Thanks for all the great work you do, your app helped me hugely in understanding the background-geolocation plugin!

[ShaunBrassell]

Just checking I have the right approach.... I will essentially be adding two overlapping tilesets as sources (with the offline one using your AddProtocol) ... with each source having a max and min zoom level? WIl MapboxGL then select the appropriate source based on the requested zoom level and switch between the two as I zoom in and out?

[HarelM]

It should in theory, but this needs to be tested obviously. You can try it without spending a lot of effort by doing this online first and only later think about the offline mechanism. But a solid plan nonetheless...

[lepigocher]

Hi @ShaunBrassell,

Another option is to create a PWA (Progresive Web Application), you could even use both technics (protocol and PWA). The main idea behind a PWA is a service worker that is called every time your application make a web request. This allow you to choose the best pattern (they are several) for your use case. As a sample, you can decide to verify if a connection is available and when you'r 'off' to get the request result from the cache and if the connection is 'on' let the request call the web site (api) and store the value on callback for later use.
You can found a lot of documentation on this subject (PWA) :

https://web.dev/learn/pwa/
https://ultimatecourses.com/blog/ultimate-guide-progressive-web-apps-fundamentals
https://ultimatecourses.com/blog/ultimate-guide-pwa-workbox
https://developer.chrome.com/docs/workbox/
https://www.pwabuilder.com/

... just to provide a few! :-)

The main problem with offline mbtiles is how are you reading the SQLite database? My option is to generate all the tiles as pbf files using : https://tilemaker.org/. This way you can even serve your tiles as files and save them locally!
BUT there is a 'little' problem with this 'way', the global size! Each browser/plateform have his hown rules. Depending of your bounding box you could reach the limit easily, iOS is the more restrictive (https://www.tigren.com/blog/progressive-web-app-limitations/).

Hope this will help.