Skip to content

Instantly share code, notes, and snippets.

@e-n-f
Last active January 4, 2016 05:09
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save e-n-f/8573385 to your computer and use it in GitHub Desktop.
Save e-n-f/8573385 to your computer and use it in GitHub Desktop.
How to get a shapefile into TileMill 2

How to get a shapefile into TileMill 2

Getting the shapefile onto your computer

You probably already have a shapefile. If not, I downloaded one from Natural Earth:

$ curl -L -O http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_admin_0_countries.zip

and unzipped it:

$ mkdir countries
$ cd countries/
$ unzip ../ne_10m_admin_0_countries.zip 

Creating a TileMill 2 source from the shapefile

  • Go into TileMill 2. Click the Untitled gear above the map

  • Click Sources at the top right

  • Click New Source at the left

  • Click +Layers at the top right

  • Give your layer a name, select that it is a Shapefile, and hit New Layer

  • Fill in a name and projection for the shapefile

  • Then click the file picker to select the file to get the data from

  • Find your file, click on it, and hit Select

  • Now the description, file path, and projection are all filled in.

  • Click "Done"

  • Now you need to save the source as a .tm2 file. Click "Save as"

  • And give it a name and hit Save

  • Now you can finally see the preview of the data!

  • You need to give it a description so you can find it again. Go back to the Untitled gear again

  • And fill in a name, description, and attribution.

  • And hit Save

Styling it

  • Now your source has a name next to the gear. Hit that.

  • And switch from Sources to Styles

  • And say "New Style"

  • The new style has Mapbox Streets by default. To change that, click the three-lines thing:

  • And click the +Data button

  • Now you can click the source you created from the list on the right

  • It shows up in the data list on the left

  • Fill in a minimal style for it in the style text box on the right

  • And click "Save as" to save that styling

  • Give it a name and hit Save

  • And now you can see your styled shapefile

Exporting the source to vector tiles

  • Click the gear to get back to the sources/styles

  • Click Sources

  • Click the source you made earlier

  • Click the gear again

  • Click Export in the bottom right

  • Wait for it to do the export

  • When it's done, click Vector MBTiles to download the tileset

Uploading the source tileset to Mapbox

  • Choose the file you just downloaded, and hit "Upload file"

  • Wait for it to upload and process

  • When it's done (and you may need to reload to find out that it's done) click the line item for it

  • And note the map ID

Adding the network vector tileset as a source

  • Go back to TileMill 2 and click the gear again to get back to the sources/styles

  • Click Sources

  • Click MapBox

  • Enter the ID of your map and hit Add Source

  • Hit Save

Using the network vector tileset with your style

  • Click the gear again to get back to the sources/styles

  • Click Styles

  • Click the style you made earlier

  • Click the three-lines thing to see the data layers

  • Click +Data to change the data source

  • Click the vector source you just created. It looks just like the local source except it's not grayed out, but you can also distinguish it by the "source-mapbox" in the URL

  • Click X to get out of the source picker

  • Your map looks just the same, but you can see the "Remote" indicator showing that it is coming from tiles over the network.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment