Webmapping et tuilage vectoriel

avec mapbox-gl

ESIPE

Cartographie

Visualisation + Géographie

Carte et dataviz

Charles-Joseph Minard

Carte et dataviz

Charles Dupin

Carte et dataviz

John Snow

Semiologie graphique

Webmapping

Cartographie + Web

+ interaction

+ zoom

Pyramide de tuile

Pyramide de tuile

Pyramide de tuile, Webmercator

lat,long + z ↔ x,y,z

• http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/
• https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
• https://wiki.openstreetmap.org/wiki/Zoom_levels

Différents composants

Différents formats

Pour continuer l'exploration

• http://fr.slideshare.net/loichay/le-web-mapping-pour-tous
• http://maptime.io/anatomy-of-a-web-map
• http://maptimeboston.github.io/web-maps-101
• http://slides.com/cpgruber/maptime-cape-cod-webmaps/

Backend : un serveur de tuile

Frontend : du code javascript

! Si les tuiles sont vectorielles le rendu ce fait côté client et un fichier de style (json) défini les rêgle de dessins à appliquer

Mapbox-gl-js

• https://www.mapbox.com/mapbox-gl-js/api/
• https://www.mapbox.com/mapbox-gl-js/style-spec
• https://www.mapbox.com/mapbox-gl-js/examples/
• https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/

Fichier de style

Fichier json

Eléments importants :

• source : vector, raster,...
• layers : background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade

Editeur graphique

• Mapbox studio
• Maputnik

Serveur de tuiles vectorielles

Fondations

• postgis 2.4 ST_AsMVT : export en tuile vectorielles depuis postgres
• mbtiles : stockages de tuiles précalculées dans une base sqllite au schéma défini

Exemple de solutions :

• postgres / t-rex : https://github.com/t-rex-tileserver/t-rex
• mbtiles / tileserver-php : https://github.com/klokantech/tileserver-php

! Simplification suivant le niveau de zoom

• géometries quelconques : tippecanoe
• grille pypixgrid +git

Fond de carte et style Français pré-définis :

• documentation IGN
• documentation data.gouv.fr