Vector tiles

De toekomst van open source web mapping

Niene Boeijen, Webmapper

Almere, 11 jul 2018

Niene Boeijen

What the map can be

Wij maken interactieve kaarten en datavisualisaties. Onze expertise is open {source; data; standaarden}. Onze kracht is het combineren van cartografie en webtechnologie.

Utrecht, The Netherlands

Deze presentatie

• Web maps
• van raster naar vector
• vector tiles
• voorbeelden

What is a web map?

Data, tiles, styles and servers.

View in a browser, scroll, pan, zoom.

openstreetmap.org

google.com/maps

a little History

But really slow to load..

2004 Endoxon found a way for quick online mapping! map.search.ch

2005 Google Maps took over!

The solution?

Tiles!

Tiles

All tiles 256x256 pixels

Same grid, same boundaries

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

Seamless and fast

We call those slippy maps

Zoom levels

Each zoom level has its own set of tiles!

Styling & Serving tiles

Nadelen Raster tegels

• Rendering wordt op server gedaan

• Tegel set is vast-gezet: static

• Veel opslag ruimte nodig!

• Meerdere visualisaties = Meerdere tegel sets

• Gebruiker kan niks aanpassen

• Geen interactie met objecten mogelijk

• Object informatie moet los opgevraagd worden in database

van Raster naar Vector

Vector Tile

WebGL

Rendering gebeurt in de browser

Graphics Processing Unit(GPU)

widely supported in modern browsers

++ Rotating tilting

++ Smooth/inifinte zooming

Voordelen Aanbieder (Server side)

• Gecomprimeerde data, klein en snel!

• Snelle productie, minder opslag

• 1 tegel set in opslag

• Attribuut data beschikbaar in browser, minder database request!

• Rendering stijl aan client-side

• Minder druk op server-side

Voordelen gebruiker (client side)

• Vector = hoge resolutie, zelfs bij ver inzoomen

• 1 tegel set- meerder stijlen mogelijk!

• Stijl kan je zelf aanpassen!

• Stijlen in json of js - geen moeilijke SLD's meer nodig

Voorbeeld

verelijking raster vs vector

Online voorbeelden

Zelf inkleuren

Cartogram

Standaarden

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

Standard already used by Esri.

Web Mercator projection, Google tiling scheme.

Bestands Formaat

.mvt - .pbf

.mbtiles

Waar komen ze vandaan?

Download

Online host services

Zelf maken & Zelf hosten

Host Services

• Mapbox Studio
• ESRI
• https://openmaptiles.org/
• tilehosting.com
• Maptiler
• PDOK Kadaster beta
• Gemeente Amsterdam beta

Zelf serveren!

Eigen data of OSM data

Hoe te visualiseren?

Mapbox Studio

MapboxGL.js

Maputnik

Maptiler

QGIS plugin

OpenLayers -- Leaflet.js

Voorbeelden!

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"

WebGL voor 3D effecten!

Webmapper kaart

MapboxGL.js

• https://www.mapbox.com/mapbox-gl-js/api/
• https://www.mapbox.com/mapbox-gl-js/style-spec

 
                  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] 
                  });
                

JSON

JavaScript Object Notation

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" } 
                    },
                    {...}
                    ] 
                  }
                

Vector Tile 3

Gisteren gemaakt (3 uur)

https://luuks.github.io/VectorTiling/#11/52.3644/5.2416/90/60

https://thieucaris.github.io/Foss4gNLVectorMap/

Thank you!

Niene Boeijen

niene@webmapper.net