Creativity with Vector tiles!

Presentation and workshop for MGI 15 years!

By: Niene Boeijen

& Steven Ottens

This presentation

Web maps
From raster to vector
Examples
About vector tiles
MapboxGL.js

Hands on! Workshop

What is a web map?

Analogue paper maps

Digital maps	VS	Web Maps
Data		Tiles, styles and servers
On the computer		View in a browser
Calculate, analyze		scroll, pan, zoom

Kadaster PDOK

BRT + BGT

Zoom level 0 tot 16

1 tegel set, meerder visualisaties!

https://github.com/PDOK/vectortiles-bgt-brt

Demo

"http://geodata.nationaalgeoregister.nl/beta/topotiles/{z}/{x}/{y}.pbf"

Datalab Amsterdam

"https://t{s}.data.amsterdam.nl/wm/{z}/{x}/{y}.pbf"

vb #1.

mapboxgl.accessToken = 'yourowntoken';
var map = new mapboxgl.Map({
  container: 'map-container',
  style: 'style.json',
  hash: true, 
  zoom: 11, 
  pitch: 60, 
  bearing: 62.4,
  center: [ 4.8, 52.4] 
});

style.json

{ 
  "version": 8, 
  "name": "Mijn eigen Stijl", 
  "sprite": "url", 
  "glyphs": "url/{fontstack}/{range}.pbf", 
  "sources": {...}, 
  "layers": [
  { 
    "id": "background", 
    "type": "background", 
    "paint": { "background-color":"#FFFFFF" } 
  },
  {...}
  ] 
}