Styling Vector Tiles

Niene Boeijen

nieneb.github.io/styling_vector_tiles

Niene Boeijen

Propedeuse Art Academy

MSc Geo Information Science

Internship Geo Web Visualization

Maptime Amsterdam & Utrecht

Web Cartographer

Webmapper

Utrecht, the Netherlands





Data - Design - Technology

Webmapper

Utrecht, the Netherlands





We make interactive maps & geo data visualizations

Our expertise is open {source; data; standards}

We combine cartography with web technology

This presentation:

All about visualization: Tips & Tricks!

4 map examples!

4 Maps

Made by me!

Using Mapbox-GL.js

Tiles from Cartiqo

Fonts & sprites by me

No access tokens needed!

Click along!

A lot of links, tools & code examples!

Go to:

nieneb.github.io/
styling_vector_tiles

Map 1

Paradijs in de Polder

> the app <

Take-Away #1:
    Know your tiles & tiling scheme

cartiqo

Consistent

Accurate

Simple

Fast

Easy understandable layers and naming

Uniform throughout all zoom levels and source data

cartiqo.nl

Documentation

More about Cartiqo later today (this room - 11:20): Steven Ottens, Building a national vector tile set for the Netherlands

I code my map!

Text editor

Online hex color tools like: color-hex.com

Browser

Take-Away #2:
   a Polygon does not have to be a Polygon!!

Use sprites

Map 2

Take me to 1943!

> the app <

What is a sprite?

sprite.json

sprite.png

Mapbox

Tools & tutorials for icon sprites

Not only for icons!!

Fills, Symbols, background patterns

..visual "special" effects!

..we will have to make them by hand!

Make `sprite.json` by hand in text-editor 

{
  "iconname" : {
    "width": 32,
    "height": 32,
    "x" : 0,
    "y": 0,
    "pixelRatio": 1
  }
}

Sprite spec by Mapbox

Make `sprite.png` with GIMP!

One image, or combined canvas!

Finding coördinates with the pointer dialog

Export as png

Inspiration

Final files:

Take-Away #3:
    Know your technology and change those defaults!

Map 3

Bevrijdingskaart.nl

> the app <

Radom (handdrawn/printed) effects?

Take-Away #4:
    Color Blender Tool https://meyerweb.com/eric/tools/color-blend/

No opacity

Take-Away #5:
    Draw like Bob Ross. Visually combine your layers

Transparant sprites

Take-Away #6:
    Background on top! www.transparenttextures.com

example json

Map 4

Crafty map

> the app <

What comes after styling?

Interactivity with JavaScript!

( ^ this is CSS )

Take-Away #7:
    Combine those libraries!

Turf D3 CSS React Vue

turf.js

Advanced geospatial analysis for browsers

Creating a simple GeoJSON with Turf.js

let bounds =  map.getBounds();

let points = turf.randomPoint(25, {bbox: [-180, -90, 180, 90]});

Take-Away #8:
    Use Map events 


map.on("load", function(e) {
  //Initialize Balloons! 
};

map.on("moveend", function() {
  //draw new balloons! 
};

Seen the coffee stain in Take me to 1943 ?! 


if (!turf.booleanPointInPolygon(point, poly)){
  map.getSource('point').setData(drawRandomPoint());
};

Alright. Fun.

"But I can't read those labels! Where are my reading glasses?"

Take-Away #9:
    Making a good map is more then only desinging the map

Map 5

A little extra

> the map <

just because I made this last week

Take-Away #10:
    Looking even further: use CSS 


#background {
  background-image: url("../img/old-wooden-texture-background.jpg");
  background-repeat: no-repeat;
  background-size:cover;
  mix-blend-mode: overlay;
}

Presentation made with: Reveal.js - Idyll - MapboxGL.js - React-map-gl - CodeSandbox - Giphy

cartiqo
niene@webmapper.net
@BNiene
NieneB
NieneB.nl
Niene Boeijen
volvo_343_dl_1980

Questions?