Demo Android app available for download here
##Usage Simply enter a MapBox map id (looks like example.map-asd23rds) or several (separated by a comma) and click the "Download Tiles" button. You can click "Clear Tiles" to clear the tiles.
##Problem & Approach I built this app because I needed a way to do offline mapping in a PhoneGap app. Scott Davis had put together a solution that used PhoneGap, MapBox (TileMill+mbTiles), and Leaflet, but this requires the SQLite plugin for PhoneGap.
Because PhoneGap Build doesn't support that plugin yet, I thought I'd try the brute-force strategy of downloading the raw tiles from the MapBox API, saving them locally through the PhoneGap File API and then pointing a Leaflet TileLayer at the directory.
This isn't the ideal solution, of course, because there are a lot of advantages to using mbTiles (highly compressed storage is the big one). However, I didn't want to give up PhoneGap Build... so I gave this a shot. And it works!
Here is the order of operations:
- The user specifies some MapBox map ids and presses "Download"
- tiles.js calculates the tile URLs for the pyramid of tiles centered on the default lat/lng of Louisville, KY (home, sweet home)
- files.js downloads all those tiles to a local directory
- tiles/{map_id}/{z}/{x}/{y}.png
- map.js points Leaflet at the appropriate directories, initializes a layer chooser, and displays the map
This is my first contribution to open source software and I hope this code is helpful to you. I certainly learned a lot making it!
##Code Structure
- libs/ - 3rd party libraries
- utils/ - core JS code for doing offline mapping
- file.js - download/delete many files at once
- tile.js - get tile URLs for an area
- map.js - point Leaflet at the correct tiles and display map
- config.xml - configuration details for PhoneGap Build
- index.html - PhoneGap opens this page. Just a map and some UI elements
- main.js - some UI and bookkeeping code for this particular proof of concept
##Extending this code This project is solely intended to be a proof of concept. The core utilities are in the utils directory - most of the functions are documented and should be fairly straightforward to understand.
To actually make a mobile "app" out of this code, simply fork this project, create a PhoneGap Build account and then tell PhoneGap Build to pull from your git repo.
A few "gotchas" to look out for:
- Domain whitelisting in config.xml - make sure you allow access to MapBox servers
- You have to sign up for a MapBox Basic account ($5/month) to have access to the satellite map tiles API. Terrain and streets should be free though.