Skip to main content

Getting Started

In this short guide, you'll choose an area of the world and download all of the files and data necessary for a self-contained map on your own computer. This data can also be hosted on S3 or another service to publish your map to the world.

1. Choose your map area#

Downloads is the starting point for map downloads. We'll focus on a small area of Berkeley, CA, but you can follow these instructions for any area. Use the search box and the rectangle or polygon tool to draw the area you're interested in:

download step 1
  • Give your area a name; I called mine "Berkeley"
  • Keep "Include Demo Code" selected; this will give us a fully runnable, self-contained demo.
note

The current limit is areas of 500,000 nodes; this is enough to cover small cities, or neighborhoods in densely mapped areas. For information on larger bundles - up to hundreds of millions of nodes - please contact [email protected]

2. Download your map archive#

download step 2

After 20-30 seconds, you'll be able to download a PMTiles archive for the selected area. You'll need to download this to your computer and then Unzip the ZIP file; on Windows, you may need to use the "Extract All" tool.

3. Test your map locally#

Run the demo script included in the ZIP File:

local shell
cd ~/Downloads/MapBundle-Berkeleypython demo.py

This will open a web browser at localhost:3857, displaying your map.

4. Customize your map#

In your editor, open leaflet.html; you should see a line like this that loads the PMTiles file into a Leaflet.js layer:

leaflet.html
let url = 'tiles.pmtiles'layer = protomaps.leafletLayer({url:url,bounds:bounds})layer.addTo(map)

Let's modify the appearance of our map on the client by adding the dark:true option:

leaflet.html
let url = 'tiles.pmtiles'layer = protomaps.leafletLayer({url:url,bounds:bounds,dark:true})layer.addTo(map)

Refresh the page to see how the map appearance has changed!

Next Steps#

  • Deploy your map to the Internet via Storage Providers: a guide on hosting PMTiles files.
  • If you noticed incorrect or missing information in your map, you can edit the information on openstreetmap.org, click Refresh Map, and use your changes! Your improvements to the map are available for anyone to download at openstreetmap.org.
  • Start customizing your map - such as its colors, labels and features - by reading the protomaps.js guide.
  • If you need a bigger map, want to host your map on a CDN for low-latency production use, or need a worldwide map, continue on to our Pricing and Licensing.

For inquiries, contact us at [email protected]