Prepackaged offline vector maps for iOS with MapBox GL
I finally found a solution to ship offline vector maps for the iOS version of my geography game Where is that? with MapBox GL. I want to show you the solution here.
But first: I am the developer of a geography game for iOS and Android with over 8million downloads and I still use MBTiles raster maps in conjunction with the legacy MapBox framework. Shame on me! There are a range of problems with that approach, like large filesizes and lack of styling flexibility, resulting in a less attractive game experience for my users. It’s time to finally change this situation.
Enter vector tiles: There are a bunch of vector map frameworks around (e.g. WhirlyGlobe, Tangram-ES, Mapzen, Nutiteq) and I took some time to thoroughly test them all. But none of them met all of my requirements:
- Prepackaged offline tile source with small filesize
- Open source
- Fast rendering
- Flexible styles
Most of them lacked performance when rendering the vector tiles, resulting in ugly artefacts. I really liked the globe option in WhirlyGlobe though.
The package, which came closest to my requirements was MapBox GL. The only thing missing was an offline option for iOS. But I found an easy hack to achieve that.
- Use MapBox Studio Classic to create a vector map source and export as MBTiles.
- Use mb-util to convert the MBTiles file to individual pbf files. Zip it.
- Add these CocoaPods to your Podfile: MapBox-iOS-SDK, GCDWebServer, objective-zip
- Create a GCDWebServer instance, serving PBF Vector Map files from a zip file in your NSBundle.
- Load the MGLMapView with a custom style json pointing to your local webserver.
Voila! Offline vector maps with flexible style, low file size and incredible performance.
You can find a sample project on Github jaysquared/mapbox-gl-ios-offline-example.
You can download my geography game Where is that? on iTunes. Including offline vector maps.
Update: Just recently I updated the Android version of Where is that? using React Native. Have a look at Where is that? on Google Play to see it in action. Reach out to me, if you are interested in my solution for offline maps using Mapbox GL with React Native for iOS and Android.
