DataViz Festival 2018

Niene Boeijen

This presentation and materials:

github.com/NieneB/geo_visualisatie_workshop

About me

Web Cartographer & Geo ICT developer

Event Organizer: Maptime Amsterdam & Utrecht

Internship Geo Web Visualization[1]
[2] [3]

Msc Geo Information Science & Remote Sensing [1]

We make interactive maps and visualizations.

Geo Data Visualizations

for the web

everything is related to everything else, but near things are more related than distant things
Tobler's first law of geography

Power of Maps

Our brains organise by location

We have no choice but to think and see spatially [1]

Goal of these 50 min..

What is Geo Data ?

Geo Data = Data + Location

Vector vs Raster

Maps = Collection of Geo data

Maps organise complex data about the environment.

Reveal patterns and relationships.

Maps allow us to communicate about location using a common framework

Coordinate system

Communicate locations & distances on the Earth's surface

Shape of the earth?

The real shape of the earth is too complex to be useful as a reference for measurement..

Geographic coordinate system

3D model

Longitude Latitude

Projected coordinate system

Mathematical projection / translation

Geographic Coordinate System:

WGS84 EPSG:4326

Lon Lat in decimal degrees

GPS

Standard way to store most geodata for the Web:

GeoJSON


{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [5.2394137,52.0819662]
  },
  "properties": {
    "name": "Hotel Theater Figi"
  }
}

Projected Coordinate System:

Spherical/Web Mercator EPSG:3857

Square, scale not relevant, shapes important

We store data in EPSG:4326, but display it in EPSG:3857!

Why is Mercator wrong?

True Size puzzle

West Wing

Projected Coordinate System:

RD New EPSG:28992

Netherlands!

Geographic Coordinate System:

WGS84 EPSG:4326

Projected Coordinate System:

Web Mercator EPSG:3857

Projected Coordinate System:

RD New EPSG:28992

[1]

[2]

Getting my map to the web

Maker-driven vs User-driven view

Interactive

[1]

Maker-driven: D3.js

Interactive

Graphic

More about coordinate systems and projections

User-driven: Leaflet.js

Tiled Web Map

Static Background. Raster based

Interactive layers

User-driven: MapboxGL.js

Customized Background map

Interactive Data

WebGL rendering!

D3.js

Maker-driven Web Maps

Scale-dependent styling is a hassle

From real-world to screen coordinates?

The solution?

d3.geo

Geo data = big data?

The solution?

TopoJSON

More geo data = bigger data?

The solution

d3.queue

Let's code!

Basic GeoJSON map

From GeoJSON to TopoJSON

Add multiple sources

Visualise the data

Add a base map

Leaflet.js

Interactive Web Maps

One big image is really slow to load..

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!

Zoom level 0: 1 tile for the whole world.

Increases exponentially...

Zoom level 1: 4 tiles

Zoom level 2: 16 tiles

etc.

Map with tile bounds

Styling & Serving tiles

Tiles are styled and rendered in advance

Tiles are just images on the web

http://tile.openstreetmap.org/5/16/10.png

/z/x/y

Web Map Building blocks

Lot's of GeoData

Styled

Rendered Cached Served

Base Layer

Interface and Interaction

Zoom, panning, clicking etc.

Leaflet.js

An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps

simplicity, performance and usability

Developed by: Vladimir Agafonkin.

Weighing about 38 KB of JS.

Has all the mapping features most developers ever need.

Can be extended with Plugins

Well documented

What Leaflet does not do:

Provide data for you.

Provide the basemap.

Its not GIS

Leaflet is a framework

Let's make a basic map!

bl.ocks.org > Base map in WebMercator

Sooo many styles provided have a look

bl.ocks.org > adding WMS overlay

Projections in Leaflet

bl.ocks.org > Base map in RDnew

Proj4Leaflet

Proj4js

Layers

bl.ocks.org > Adding GeoJSON

Base Layer

Raster

Data Layer / Feature Layer

Vector

Vector tiles!

Mapbox GL.js

From Raster to Vector

Vector Tile

No colours

Arrays in a 256 x 256 matrix

Same tiling schema as Raster png tiles.

Binary format

Simplifies geometries

Disadvantages Raster Tiles

No interaction with objects

No information available about objects

Multiple visualizations = multiple tile sets

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.

Direct access to feature information.

Standards

Mapbox Vector Tile Standard.

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

Standard already used by Esri.

Web Mercator projection, Google tiling scheme.

Formats

.mvt - .pbf

.mbtiles

Where to get them?

osm2vectortiles

https://openmaptiles.org/

Mapbox Studio

https://openmaptiles.com/hosting/

https://tile.mapzen.com/mapzen/vector/v1/{layers}/{z}/{x}/{y}.{format}

https://free.tilehosting.com/data/v3.json?key=*****

Bake them yourself

More command line tools

GeoServer

Tegola

NL Amsterdam Datalab.

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

PDOK BRT+BGT

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

How to visualize them?

OpenLayers -- Leaflet

JavaScript

Let's code!

Simple Mapbox GL.js example

WGS84 data only!!

Using PDOK vector tiles

GeoJSON data earthquakes

Bl.ocks.org Fonts

Bl.ocks.org Extrusion

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