1 of 87

SLIPPY MAP STYLE

geo-canvas design with CartoCSS

Aurelia Moser | Mozilla Science Lab | @auremoser

https://mzl.la/cartocss

2 of 87

3 of 87

4 of 87

5 of 87

6 of 87

slide from j. larson, geojournews, 2015

7 of 87

8 of 87

iceland isomap, https://mzl.la/iceland

9 of 87

indian election map, https://mzl.la/cdb-india

10 of 87

null island isomap

11 of 87

null island css

12 of 87

null island twitter

13 of 87

null island flag

14 of 87

carto null island

15 of 87

null island archipelago

16 of 87

xkcd #442

17 of 87

CARTOCSS is the onomatopoeia of SLIPPY MAPS

18 of 87

ORIGIN STORIES

the magic of POP maps

19 of 87

20 of 87

21 of 87

22 of 87

23 of 87

24 of 87

BROWSER

CartoDB.JS

Odyssey.JS

Torque.JS

Vecnik.JS

Leaflet/GMaps/OLayers

Varnish Stuff

PostgreSQL

PostGIS

Maps API

SQL API

Mapnik

Torque

Redis

CartoDB Server API

AWS Elastics

ImportsAPI

RESTAPI

PostgreSQL/GIS

AWS Elastics

EDITOR

25 of 87

BROWSER

CartoDB.JS

Odyssey.JS

Torque.JS

Vecnik.JS

Leaflet/GMaps/OLayers

Varnish Stuff

PostgreSQL

PostGIS

Maps API

SQL API

Mapnik

Torque

Redis

CartoDB Server API

AWS Elastics

ImportsAPI

RESTAPI

PostgreSQL/GIS

AWS Elastics

EDITOR

CARTO CSS

26 of 87

ANATOMY OF CARTOCSS

structuring your styles

27 of 87

CSS

CARTOCSS

selectors for el + datasets

selectors for el

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

28 of 87

make human maps

nested styles

named variables

“attachments” = pseudo el

29 of 87

30 of 87

TILEMILL

batch create tiles

CARTO

create tiles on the fly

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

31 of 87

TURBO CARTO

data driven auto-styling

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

32 of 87

turbo cartoCSS

33 of 87

symbolizers: superheroes with special properties

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Line (for lines & polygons)
Polygon (for polygons)
Point (for points)

...

Text (points, lines, + polygons)
Shield (points & lines)
Line Pattern (lines + polygons)
Polygon Pattern (polygons)
Raster (rasters)
Markers (points, lines, & polygons)
Buildings

34 of 87

some AWEsome maps

35 of 87

SIMPLE

STYLES

36 of 87

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

37 of 87

SQL

CARTOCSS

38 of 87

39 of 87

BANG-UP

BASEMAPS

40 of 87

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

41 of 87

TONER

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

42 of 87

toner-labels.mss

toner-lines.mss

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

43 of 87

TONER

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

44 of 87

mapstack - stamen

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

45 of 87

LABEL MAGIC

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

46 of 87

LABEL CHEATS

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

47 of 87

COMPOSITE OPERATIONS

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

48 of 87

COMPOSITE OPERATIONS

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

49 of 87

COMPOSITE OPERATIONS

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

50 of 87

COMPOSITE OPERATIONS

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

51 of 87

CONDITIONAL

ZOOM

52 of 87

53 of 87

54 of 87

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

55 of 87

56 of 87

COLOR BY

57 of 87

58 of 87

SQL

CARTOCSS

cat zoom

cat conditionals

59 of 87

60 of 87

TORQUE

TILE STYLE

61 of 87

fires in the amazon (2012-2014), https://mzl.la/cdb-fire

62 of 87

torque snowplow heatmaps: https://mzl.la/cdb-snow

63 of 87

bird migrations: https://mzl.la/cdb-birds

64 of 87

65 of 87

66 of 87

67 of 87

SQL

CARTOCSS

68 of 87

VecNik

https://mzl.la/vecnik

MapNik

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

https://github.com/CartoDB/vecnik

https://github.com/CartoDB/VECNIK/tree/master/examples

Vecnik includes an implementation of the Carto language for dynamically styling features using its CSS language.

It does it by turning CartoCSS into html canvas rendering instructions.

Having the browser render the style of the geospatial data allows for a new world of possibilities in terms of interactivity and display. Think for example you can animate render based on attributes without having to reload new tiles. At the same time the geometries are on the browser which enables things like hover over features, highlights, modifications.

This is a prototype implementation to showcase the use of Carto for rendering maps on the client, not on the server. The library retrieves vector data from CartoDB using the SQL API on geojson format.

69 of 87

make human maps

animate render w/o loading tiles

geom amenable to interaction

zoom, rotate, pop

70 of 87

Torque Bubble Maps

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

71 of 87

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

Platform

Data services

Your data

Editor

72 of 87

cartocss and its complements

POP MAPS

73 of 87

“ART is what you can get away with”

~ Andy Warhol

74 of 87

“Ceci n’est pas une carte”

75 of 87

almost DONE...

but just for FUN...

76 of 87

77 of 87

78 of 87

CARTOCSS

79 of 87

SQL

80 of 87

81 of 87

82 of 87

83 of 87

84 of 87

85 of 87

86 of 87

make pop maps

aim for awe

render with reflex

87 of 87

@auremoser

aurelia@mozillafoundation.org

https://mzl.la/cartocss-refs

¡GRACIAS!