Creating Your Own MBTiles Basemap File

MBTiles is a format made by the folks at Mapbox that allows you to store PNG or vector tile sets in a single file. An MBTiles file is actually a SQLite database that follows a specific schema. Check out the spec to learn more about it.

You can make your own custom map and export an MBTiles file in Tile Mill. Unfortunately, Mapbox removed this functionality from Mapbox Studio.

For the purpose of OpenMapKit, you can easily scrape PNG tiles from an online endpoint and store them in an MBTiles file with a few NodeJS command-line tools.

Scraping an Online HTTP Tile Endpoint

A node module called tl allows you to scrape an HTTP map tile endpoint for PNG tiles and stuffs them into an MBTiles file. You can install it with the following command:

npm install -g tl mbtiles tilelive-http

Now you will have tl installed as a globally accessible executable in your shell environment. Switch to whatever directory you want to save your MBTiles file to. The following command will scrape tiles from the Humanitarian OSM Basemap endpoint for Dhaka, Bangladesh.

tl copy -z 13 -Z 19 -b '90.375853 23.700965 90.437307 23.754632' 'http://c.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png' mbtiles://./dhaka.mbtiles

• -z is the minimum zoom
• -Z is the maximum zoom
• '90.375853 23.700965 90.437307 23.754632' is the bounding box
  • southWestLng southWestLat northEastLng northEastLat
  • Check out BBoxFinder.com to help you get this bounding box coordinate set.
• 'http://c.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png' is the http endpoint for the tiles
• mbtiles://./dhaka.mbtiles is the MBTiles file the scraped PNGs will be saved to

Pregenerated Offline MBTiles Basemaps

Below is a list of links to previously generated MBTiles files to get you started. All you need to do to use them is to drag and drop them into the openmapkit/mbitles directory on your Android phone.

Humanitarian OpenStreetMap

• Dvizarasekwa, Harare, Zimbabwe - Mar 24 2015
  • Zoom 12 - 22 (Actually only fetched through 20)
  • Bounding Box: 30.885143 -17.824980 30.967541 -17.784733
  • Command: tl copy -z 13 -Z 22 -b '30.885143 -17.824980 30.967541 -17.784733' 'http://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png' mbtiles://./dvizarasekwa-hot.mbtiles
• Dhaka, Bangladesh - Jan 2 2015
  • Zoom 13 - 19
  • Bounding Box: 90.375853 23.700965 90.437307 23.754632

Standard OpenStreetMap

• [Dvizarasekwa, Harare, Zimbabwe - Mar 6 2015]

  • Zoom 13 - 20
  • Bounding Box: -17.820934970719602 30.90642929077148 -17.788573952710493 30.944967269897
  • Command: tl copy -z 13 -Z 20 -b '30.885143 -17.824980 30.967541 -17.784733' 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png' mbtiles://./dvizarasekwa-osm.mbtiles

• [Harare, Zimbabwe - Mar 6 2013]

  • Zoom 13 - 20
  • Bounding Box:
  • Command: tl copy -z 13 -Z 20 -b '30.390930 -18.195434 31.709290 -17.551736' 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png' mbtiles://./harare-osm.mbtiles

Preview MBTiles Locally

You can use tessera to locally serve your MBTiles file to allow you to preview the basemap you have scraped.

To install:

npm install -g tessera
npm install -g mbtiles

Then, cd to the directory with your MBTiles file. To serve, execute:

tessera mbtiles://./whatever.mbtiles