tutorial

Getting Started with Tiles

• 1A. Create Raster/Bitmap Tileset (in TileMill)
  • Step 1: Get TileMill
  • Step 2: Create a new Project
  • Step 3: Import Data
  • Step 4: Style your Map
  • (Optional Step 5: Add UTF-8 Grid)
  • Step 6: Export Map
• 1B. Create Vector Tiles (with GeoJSON & Tippecanoe)
• 2. Run Tile Server
  • Option 1: Via Localhost
  • Option 2: Via Heroku or DigitalOcean
    • Preparations:
    • Easy Setup:
    • Expert Setup:
      • Step 1: Learn Git
      • Step 2: Create New Project
      • Step 3: Set Up Repository
    • Check the Status
    • Add tiles via SFTP
    • Test the Tiles
• 3. Use The Tileset

1A. Create Raster/Bitmap Tileset (in TileMill)

Step 1: Get TileMill

Download and install TileMill if you haven't done so already. If this is new to you: TileMill is an design studio by the amazing team at Mapbox to create beautiful maps.

And If you haven't heard of Mapbox – check out their website and blog.

Once everything is set up, we can start.

Step 2: Create a new Project

Add a new project.

Set a name for your project and untick the "Default data"-checkbox, we are going to creating a map from scratch. Of course!

You should end up with something like the following:

Step 3: Import Data

You can choose from a variety of formats (e.g. GeoJSON, ESRI Shapefile, etc), but in this tutorial we will use an ESRI Shapefile of the world country boundaries. A shapefile is a vector file (of either points, lines, or polygons) that has attributes and is georeferenced.

** Hint:** optimizing your shapefiles can help increasing the performance or your data in tilemill.

Open the layer menu and add a new layer.

Browse Datasource and select the "countries.shp" file from the tutorial folder (or use your own data). Then press "Save & Style".

Now you should see the world country boundaries:

Step 4: Style your Map

Mapbox has a great tutorial on how to style maps with tilemill.

We go miniml and set the style for the countries to grey thin lines with a white fill:

Map {
  background-color: #fff;
}

#countries {
  line-color:#D8D8D8;
  line-width:1;
  polygon-fill:#fff;
}

(Optional Step 5: Add UTF-8 Grid)

Note: A UTF-8 grid adds the possibility to add interaction hover events to a map. Our example shows for instance for every country feature the name, abbreviation and population. If data size or storage is an issue, it is useful to know that adding the hover events will increase the size of your tileset. This article by Mapbox does a good job explaining the UTF-8 grid functionality.

Enable Interactivity for hover events.

Add the MustacheJS template. For our shapefile the data will look like below, but you can inspect the data of each layer in the layer menu (bottom left):

Country Name: {{{ADMIN}}} <br>
Country Abbreviation: {{{ne_10m_adm}}} <br>
Country Population: {{{POP_EST}}}

If you now hover over a country. It will show the text you defined with the mustache template, filled with the data from the shapefile.

Step 6: Export Map

Hit "Export" and select "MBtiles" as a file format.

Give your tileset a Name and set the min - max zoom dimensions. Here we choose a zoom level from 0 (all the way zoomed out) to something around 4, to keep the file size of our tileset small (but you quite likley want more zoom levels for future projects). Then hit "Export".

This will take a while. Once it's done: Save it and ...

... move the "MBtiles" into the data folder of your Tilehut.js directory. This will look like following:

---

1B. Create Vector Tiles (with GeoJSON & Tippecanoe)

Let's take our countries.geojson file and turn it into a vector tile set. Lucky for us Mapbox has built a great commandline tool called tippecanoe. In order to install it on your machine, please follow the instructions here:

$ brew install tippecanoe

Once tippecanoe is installed, you can run the following on your countries.geojson file:

$ tippecanoe -o tiles-world-vector.mbtiles -z5 -pp countries.geojson 

What's happening here:

• tippecanoe: this calls the tippecanoe function
• -o tiles-world-vector: says, "our output file will be called tiles-world-vector.mbtiles"
• -z5: tells tippecanoe to only produce tiles to a max of zoom level 5.
• -pp: means "no polygon splitting"
• countries.geojson: is the geojson file of our countries.

You can read about the other options for producing vector tiles here.

And that's it! Now we have beautiful vector tiles to work with. Now let's set up our server. Keep going!

---

2. Run Tile Server

Option 1: Via Localhost

Open the Terminal, navigate to the Tilehut.js folder and run node server.js to serve the files. As you can see, your server is now running at http://localhost:8000/.

You can inspect tilesets (even unknown ones) by opening them in your browser, e.g. http://localhost:8000/tiles-world-simple/map/. This works for normal raster tiles, as well as UTF-8 tiles and even vector tiles.

Option 2: Via Heroku or DigitalOcean

We've tested a few services and have documented our methods as part of other tutorials. You're welcome to decide which service best fits your needs. So far we've tried/tested deployment to:

• Heroku // See Part 3+ in this tutorial on Vector Tiles: Your own Tilehut
• DigitalOcean // See documentation from the EnergyExplorer.ca project

After deploying to your chosen platform, you can inspect your data via:

Now you can inspect your map ...

{yourURL}.com/{tilesetname}/map

... and the tiles are ready to use via

{yourURL}.com/{tilesetname}/{z}/{x}/{y}.png (for raster tiles) or {yourURL}.com/{tilesetname}/{z}/{x}/{y}.pbf (for vector tiles)

3. Use The Tileset

We included some example files into the repository which show you how to use Leaflet JS or Mapbox GL JS to display a map using your tileset.

Check: tilehut/examples/ (Github)