a big problem

earth is not flat, it's not even a sphere, it's a pain to unfold

each projection system has pros and cons, 

no silver bullet

proprietary beginnings

cartography is an indispensable tool, both in civilian and military fields

harmonisation

in 2005, an american SME (Google) released a web application (Google Maps) that uses a projection format called EPSG 3857 or srid: 900913 (1337, lol) and some square rasterised tiles (XYZ tiles). their user base did the rest and it became a standard for internet maps

harmonisation²

another SME (Microsoft) brings a major improvement by normalising the tiles naming

To convert tile coordinates into a quadkey, the bits of the Y and X coordinates are interleaved, and the result is interpreted as a base-4 number (with leading zeros maintained) and converted into a string

and then, OSM

OpenStreetMap is an international project launched in 2004 to create a free map of the world

crowdsourcing

OpenStreetMap supported by some companies and maintained by passionate users. since 2007 (birth of the modern mobile phones), everybody is a GPS

API

OpenStreetMap exposes a public API as well as planet dumps (snapshots of the entire database that can be downloaded separately)

format .OSM

an OSM XML node:

<node id="24909856" visible="true" version="4" changeset="3707436" timestamp="2010-01-24T23:35:50Z" user="lapinos03" uid="33634" lat="48.8478046" lon="2.3991444"/>

XML, verbose, heavy, comprehensive

user="lapinos03"

format .PBF

00000010  __ __ __ __ __ 78 9c e3  92 e2 b8 70 eb da 0c 7b  ||.q.xx.....p...{|
00000020  81 0b 7b 7a ff 39 49 34  3c 5c bb bd 9f 59 a1 61  |..{z.9I4<\...Y.a|
00000030  ce a2 df 5d cc 4a 7c fe  c5 b9 c1 c9 19 a9 b9 89  |...].J|.........|
00000040  ba 61 06 7a 66 4a 5c 2e  a9 79 c5 a9 7e f9 29 a9  |.a.zfJ\..y..~.).|
00000050  c5 4d 8c fc c1 7e 8e 01  c1 1e fe 21 ba 45 46 26  |.M...~.....!.EF&|
00000060  96 16 26 5d 8c 2a 19 25  25 05 56 fa fa e5 e5 e5  |..&].*.%%.V.....|
00000070  7a f9 05 40 a5 25 45 a9  a9 25 b9 89 05 7a f9 45  |z..@.%E..%...z.E|
00000080  e9 fa 89 05 99 fa 40 43  00 c0 94 29 0c

binary, compact, comprehensive and unsuitable for manual processing

format .JSON

very compact, much lacunary, such internet.

var result = {
    type:"FeatureCollection",
    features:[{
        geometry:{
            type:"Polygon",
            coordinates:[[[-122.26777,37.81545],[-122.26758,37.81596],...]]},
        type:"Feature",
        id:"4d2aa2869f",
        properties:{}
    }/*[...]*/ ]
}

.mbtiles format

an exchange format that lets us store a tile set as a SQL Lite Database.

OSM does not export to this format, it has to be compiled elsewhere but it proves useful for offline apps

MOBAC creation utility, adding a custom tileset et performing PHP requests (demo & source)

a big graph

OpenStreetMap is a giant graph, made of nodes & relations of different types and there are many

it's a vector data source before being a raster source, some providers let you customise these vector tiles

GIS: Geographic Information System

natural earth sets of ratser & vector resources

Overpass simplified web API to call the OSM API

FreeGISData resources collection of varying quality

QGIS Open Source data editor (and bloody robust)

rasterising by hand

maperitive tilesets creation utility

maptiler can be handy for smaller things

QGIS the path of the samouraï

leave it to

the professionals 

cartoDB non topographic data

mapzen tiles server + customisation

mapbox the same but for hipsters

this page gathers different maps' renditions: leaflet-providers

beyond maps

a graph allows us to model data beyond geography. we can therefore extend the definition of cartography to some kind of networkgraphy or historiography (as OSM keeps track of all the changes) or to any neologism that ends up with graphy...

wonder women

GPS => OSM

amongst the broad variety of maps construction techniques, I found this book that was co authored by 3 women

In a field that remains vastly masculine, I wanted to pay tribute to these shy heroins who make our lives better

HOW DO THEY DO?

user data, it requires a database of GPS coordinates that also store a timestamp.

then, aggregation / decimation. the book's companion site gathers most of the publications and also sometimes their implementation.

my favourite

On Vehicle Tracking Data-Based Road Network Generation

because it uses a Fréchet distance

art?

for the past sixty years, an Computer Assisted Art form emerged. this practice has acquired a huge momentum with the birth of personal computers in the 1980's

since the end of the 90's, thanks to internet and to more accessible tools, the digital artistic practices have explored many fields usually considered scientific.

for the past ten years, open data & data visualisation appeared, popularizing an aesthetic of complexity and,  of course, the artists rushed into this new field.

data visualisation is generally divided into two sub categories: informative and explorative. cartography is the field of exploratory data visualisation.

being an all-time visual complexity fanboy, I acquired the book about network cartography

a bit disappointed, the trees section is ok, the rest presents but few interesting things. his new shapes taxonomy is unthoughtful.

the author evokes the networkism, an artistic trend initiated after... Visual Complexity.

Networkism

Networkism is a growing artistic trend, characterized by the portrayal of figurative graph structures—illustrations of network topologies revealing convoluted patterns of nodes and links

Sharon Molloy

Emma McNally

Janice Caswell

Katie Lewis

Chiharu Shiota

down and dirty

still time to run for your life

leaflet.js the JS tile engine.

openlayers same but... different

mapbox.GL WebGL 2D MapBox tiles renderer

tangram.js WebGL 3D Mapzen tiles renderer

vizicities & OSM Buildings 3D cities in the browser

cesium & WebGLearth open source 3D globe

doing maps by hand

4 metrics

• latitude/longitude

• quadkeys

• meters

• pixels

some variable variables

on a sphere, latitudes / longitudes do not have a constant ratio to the earth' radius (that also changes...)

curvy straight lines

function latLngDistance(lat1, lng1, lat2, lng2){

    var RAD = Math.PI / 180;
    var p1 = lat1 * RAD;
    var p2 = lat2 * RAD;
    var tp = (lat2-lat1) * RAD;
    var td = (lng2-lng1) * RAD;
    var a = Math.sin(tp/2) * Math.sin(tp/2) +
            Math.cos(p1) * Math.cos(p2) *
            Math.sin(td/2) * Math.sin(td/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

    var R = EARTH_RADIUS ; // meters or km
    return R * c;
}

Hic sunt dracones

when projecting a sphere in 2D, the longitudes are stretched as we get closer to the poles, not the prettiest thing but that's usually ok-ish (who needs poles anyway?)

on the other hand, as we use a logarithmic scale to project the latitudes, it is merely impossible to represent anything beyond +/- ~85.0519°...

many a way

Mike Bostock from D3.js has studied many projections systems.  some of which are ridiculously complex (background image is the Hammer Retroazimuthal )

order and beauty

when working at a city scale, these variations are almost negligible. but we still need to convert units between meters, angles, zoom levels, pixels and quadkeys

I aworld where everything seems lost,

a hero will arises from the nihil,

and this hero is called...

MERCATOR!

MERCATOR!

source marvel.com

light-map

thanks to the previous class, I built my own API to build XYZ tile maps (so,it IS possible after all)

pros: lightweight (6Ko zipped), renders vector and raster tiles to a 2D canvas, licensed under MIT but basically a WTFPL

cons: slow, incomplete, buggy, not responsive, not up to date, not mobile friendly, not retina, only obeys its master...

github

STOP!

to wrap it up

a simplified access to open source data allows for new representations of the world, beyond geography.

the interfaces are accessible and performant, if we still don't know what to do with them, the tools are ready.

THANKS BRO!

takeaway:

slides http://slides.com/nicolasbarradeau/cartography/

repo https://github.com/nicoptere/cartography​

• https://www.its-rde.net/data/showde
• http://cartography.oregonstate.edu/
• https://fr.pinterest.com/stamendesign/terrain/