Maptime Boston

Vector Tile workshop

By Niene Boeijen

Niene Boeijen

Web Cartographer & Geo ICT developer

Maptime Amsterdam & Utrecht

Internship Geo Web Visualization

Msc Geo Information Science & Remote Sensing

What the map can be

We make interactive maps and visualizations.

Our expertise is open {source; data; standards}

Our power lies in combining cartography with web technology.

Utrecht, The Netherlands


Time for making maps!

Maptime is hands on!



This presentation

All materials needed:

What will we do?

  1. Presentation.
  2. Workshop.
  3. Show and tell.

Goal of this evening!

At the end of this workshop, you will have your own web page with an vector-tile based map! Customized to your liking and creativity! Your web page will be hosted on Github, so you can immediately share your progress with all your family and friends!

Vector tiles!

Let's start from the beginning

  • What is a Web map?
  • How to make a Web Map?
  • From Raster to Vector
  • Vector tiles and what they look like
    • Standards
    • Downloading
    • Making yourself
    • Hosting
    • Visualizing

What is a web map?

Analogue paper maps

Digital maps VSWeb Maps
Data Tiles, styles and servers
On the computer View in a browser
Calculate, analyzescroll, pan, zoom

a little History

Digital maps

GIS software

GIS on the Web is not user friendly..

1996 Mapquest first with a web service!

But really slow to load..

in 2004 Endoxon found a way for quick online mapping!

2005 Google Maps took over!

The solution?



All tiles size 256x256 pixels

Placed in a grid, sharing boundaries

Seamless map

All these little tiles load way faster than one big map!

We call this slippy maps

Zoom levels

Each zoom level has its own set of tiles!

Zoom level 0: 1 tile for the whole world.

Increases exponentially...

Zoom level 1: 4 tiles

Zoom level 2: 16 tiles


Map with tile bounds

Serving tiles

Tiles are rendered in advance.

Stored in a cache.

Tiles are just images on the web with a url {z/x/y}

Raster Web Map Building blocks

Data, styled, tiles, server:

Base Layer

Additional Data:


Interface and Interaction

Zoom, panning, clicking etc.

How to make a Web Map?

Making a Web Page

New to HTML & CSS?

Start with Making a web page

Or use Code Academy

Maps with JavaScript

From Raster to Vector

Advantages Vector tiles

Rendering is done on client side not by the server!

So different clients can style a map different!

Small tile size! So faster data transfer.

High resolution!

Access to feature information!

Maps with JavaScript

Who What Where?

Vector tiles and what they look like.

No colors

Arrays in a 256 x 256 matrix

Same tiling schema as Raster png tiles.

Binary format

Simplifies geometries


Mapbox Vector Tile Standard.

Based on the binary protocol buffer (.pbf) from Google.

Standard already used by Esri.

Web Mercator projection, Google tiling scheme.


.mvt - .pbf


Where to get them?



Make with Mapbox Studio





Bake them your self





More command line tools

Host yourself?

Use locally offline



Tile servers

The Netherlands!

NL Amsterdam Datalab.


How to visualize them?

OpenLayers -- Leaflet

MapboxGL JS



Mapbox studio


Cool stuff!

Beautiful visualizations!

Colouring on the fly!

Web GL for 3D extrusion!

JavaScript interactivity

More info?

List with links!

Feel free to contact me!

Let's get started!

Everything is on Github


Used for code.

Version control.



What is in the workshop?

  • Full code example a map with the Mapbox GL JS library

  • a testendpoint where to find some tiles

  • a standard style for you to edit

  • How to make your own vector tiles

  • How to download OSM vector tiles

MapboxGL JS

//Initialize Map
var map = new mapboxgl.Map({
    container: "map",
    hash: true,
    style: style_object,
    zoom: 11,
    pitch: 60,
    bearing: 62.4,
    center: [ 4.8, 52.4]

Problems or questions?


Use the MapboxGL JS documentation!

StackOverflow is awesome!

Ask me

Be creative!

There is more to find on the Internet

Do not keep yourself to the assignments!!

The workshop:

The materials needed:

Use the world tiles

Amsterdam tiles contain Dutch words!!

Open Map tile for world map explained bottom section, then scroll up again for the explanations.

Go to and generate your own free key.