Offline Mode

[allthesignals]

Notes on approaches to offline mode for https://mapc.github.io/trailmap2/

Pre-load all data as vector: Basemap will still need ambient caching (based on user’s current zoom level and map center, the app automatically caches “surrounding” zoom levels and nearby centers, but not the entire tileset), but filters could still work. This will decrease performance. We could fire the 10mb topojson download in the background, but everyone will have to download 10mb of their cellular data. Online mode could retain existing raster-based, dynamic solution, but the vector data would only be used as a backup in offline mode. There could be an interface element instead that triggers the 10mb download when the user knows they’re going to go offline for a while.

This will require a few steps.

Ambient Raster Tiling: User will still have access to last drawn map in offline mode, will be able to zoom and pan to an extent, but won’t be able to filter data again until network connection is reestablished.

Vector Tiling: With current infrastructure, this would require a little more research, but could take the ambient caching approach. Connecting ambient caching with a vector tile display might be very difficult, would require more research to see how this integration could work and how vector tiles work with a filtering interface. Vector tiles are more performant in terms of download times (you only get what you need).

Sprint options:

Ambient caching on existing view Anticipatory offline mode

Other options:

Develop a native app that uses Mapbox offline maps SDK

[allthesignals]

Having a little luck with: https://github.com/MazeMap/Leaflet.TileLayer.PouchDBCached.

This is an ambient cacheing implementation. It requires quite a bit of prototype modification, there are issues with the order in which assets are included. It's not clear if it's going to play nicely with all of Carto's L.TileLayer extensions.

This shows how Carto extends Leaflet: https://github.com/CartoDB/cartodb.js/blob/1e770ede4d2764181104322d4d7e5ba9ce393455/src/geo/leaflet/leaflet_tiledlayer.js.

[allthesignals]

I think I've manually verified a working proof-of-concept for offline cache. This gets Carto's extension to Leaflet to cache data in local storage. Next is to use the PouchDB TileLayer plugin to seed the data, therefore implementing ambient caching!

Next steps:

• [ ] Refactor code so it's accessible through Ember
• [ ] Build in seeding process based on current map state

[allthesignals]

The first may already be done with https://github.com/pavloo/ember-leaflet-tiles-cache! Just need to make sure it's extending the TileLayer class before Carto gets to it.