Using Mapbox GL Offline

Question

Is there a way to use Mapbox GL (asking about both JS and native) in an offline setting? With MBTiles, you could use either the MBTiles file or extract the raster images. I'm wondering if there's anything similar that would allow Mapbox GL to load the data from a local source as opposed to requiring a web connection to Mapbox's servers. Not talking about just caching data for when the user is offline but actually making a map that runs purely offline all the time. Thanks.

Transpacific

Answer 1

A sample of MapBox GL JS offline (completely hosted on a custom server, in this case GitHub gh-pages) is visible at:

http://klokantech.github.io/mapbox-gl-js-offline-example/

The javascript, css, fonts and even the pre-rendered vector tiles unpacked from MBTiles may be simply in a directory and you get the zoomable vector map.

In case you want to host MBTiles with the vector or raster tiles somewhere online for free, easiest is probably: https://github.com/klokantech/tileserver-php/

While playing with the vector tiles I documented most of the use-cases in these two repos:

• https://github.com/klokantech/vector-tiles-sample
• https://github.com/klokantech/mapbox-gl-js-offline-example

Otolith

Thanks. I think for browser-based implementations Tilelive is good too: github.com/mapbox/tilelive I was looking in particular at how to do this in Apache Cordova and forked Mapbox GL JS and made a version that will load from MBTiles using SQLite in Javascript: github.com/trevorpowell/mapbox-gl-js-cordova-offline github.com/trevorpowell/mapbox-gl-js-cordova-offline-example – Transpacific

Answer 2

Not yet, but this is on the development roadmap for native, at least:

https://github.com/mapbox/mapbox-gl-native/issues/584

It's trickier with JavaScript in the browser, not not really a core use case, but could maybe be done.

Robber

Thanks. I also found this helpful with regard to Mapbox GL JS: gis.stackexchange.com/questions/125037/… It seems I could use a sqlite extension to extract the PBFs from MBTiles on demand or use mbutil to extract them beforehand and serve them statically similar to the PNGs. – Transpacific

Answer 3

You can find an example project of prepackaged/offline maps for iOS here:

http://github.com/jaysquared/mapbox-gl-ios-offline-example

I basically just run a webserver within the iOS app and serve the tiles. Works for vector and image tiles.

Villous

Answer 4

MBTiles can be displayed in the Mapbox Maps iOS SDK by hosting a web server within your app and pointing the map to localhost. I've posted my solution here:

https://gist.github.com/namannik/3b7c8b69c2d0768d0c2b48d2ed5ff71c

The difference between this solution and the one posted by @jaysquared.com is that this solution doesn't require a style.json.

Burk