Creatief met Vector tiles!

By: Niene Boeijen

Materialen voor vandaag:

www.github.com/NieneB/aeres_workshop

Inhoud

• Even voorstellen: mijzelf & jullie
• Webmapper
• Introductie in Web Mapping
• Naar Vector Tiles
• Workshop
• Show & Tell

About me

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

What the map can be

Edward, Frederieke, Niene en Steven

Geografie, Geo-informatiekunde, Kunstacademie, Geo Media Design

Wat doen we allemaal?

energielabel atlas

Utrecht in Vogelvlucht

Datalab Amsterdam

Bij Webmapper

Alles Open Source

Open Data

Open standaarden

Bij Webmapper

Elke dag programmeren..

& Creatief bezig zijn

Stages?

Map-based visual storytelling: Kolerekaart

Web-Accessibility en geo

Marketingplan en -materiaal Geodata Lab Utrecht

Natuurlijk: je eigen interesses!

Volg Webmapper op

twitter @webmappery

https://webmapper.net

Insta @webmappery

Introductie in Web Mapping

What is a web map?

Analogue paper maps

openstreetmap.org

google.com/maps

a little History

But really slow to load..

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

2005 Google Maps took over!

The solution?

Tiles!

Tiles

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!

Styling & Serving tiles

Layers!

Base Layer

Raster

Data Layer / Feature Layer

Vector

Summary

Web Map Building blocks

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

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

Cartiqo

Stack van Webmapper

Online examples

Zelf inkleuren

Cartogram

Open Zoom Stack UK

Utrecht in Vogelvlucht

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
• Open Maptiles
• ESRI
• PDOK Kadaster beta
• Gemeente Amsterdam beta
• Webmapper : Cartiqobeta

Zelf serveren!

Eigen data of OSM data

Hoe te visualiseren?

Mapbox Studio

MapboxGL.js

Maputnik

Maptiler

QGIS plugin

OpenLayers -- Leaflet.js

Hands on!

Goal of the workshop!

At the end of this workshop, you will have your own web page with an interactive map based on vector tiles! Custom styled by yourself! Your web page will be hosted on Github, so you can immediately share your progress with all your family and friends!

Beginners

For beginners means: if you have NO knowledge of JavaScript, HTML and CSS, this workshop will help you get started!

1. Mapbox Studio proberen
2. Basis kaart zelf ontwikkelen (tekst editor + browser)
3. Kaart van Mapbox gebruiken
4. Eigen Vector tile bron en styling gebruiken
5. Extrusion, Interactie & méér!

Made with previous workshops:

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

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

kiebo009.github.io/Home-sweet-Home

jornhabes.github.io/MGIVectorMap

ingevmanen.github.io/MGIVectorMap

maartjeholtslag.github.io/MGIVectorMap

Making a Web Page

New to HTML & CSS?

Start with Making a web page

Or use Code Academy

Maps with JavaScript

Puts it all together,

Tiles, content, interaction

JavaScript Library

Including a JavaScript library in your code is like copying and pasting someone else's code into yours. You have access to everything in that library.

In our case, it's a bunch of cool tools to make web maps and give them familiar functionality.

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

Aan de slag!

Everything is on Github

www.github.com/NieneB/aeres_workshop

Github?!

Used for code.

Version control.

Sharing.

Documentation.

Use a good text-editor

Nodepad ++

With Syntax Highlighting!

Be creative!

Show & Tell

More info?

My lists of

interesting links, workshops, presentations and background information:

for webmapping in general and d3 & Leaflet

about vector tiles

Feel free to contact me!

Thank you!

Niene Boeijen

niene@webmapper.net

LinkedInn

Twitter @BNiene

www.nieneb.nl