Slide 1
Slide 1 text
Les bases de la
cartographie sur le Web
(version courte)
Mathieu Leplatre
@leplatrem
www.makina-corpus.com
Slide 2
Slide 2 text
Au programme...
●
Fondements de la cartographie (projections, base de données)
●
Anatomie d'une carte sur le Web (Leaflet)
●
Architecture pour la cartographie (Tuiles, GeoJSON)
●
Questions (… et réponses !)
Slide 3
Slide 3 text
Données géographiques
Slide 4
Slide 4 text
Coordonnées : position sur la Terre
●
Longitude (x) – Latitude (y)
●
Degrés décimaux (-180 +180, -90 +90)
→ →
●
GPS
Slide 5
Slide 5 text
Géodésie : la forme de la Terre
Ellipsoid (GPS, WGS 84)
Illustration: http://mapschool.io
Slide 6
Slide 6 text
Projections
●
Équations (lat/lng pixels)
↔
●
Représentation plane ( compromis)
→
●
Changement de référentiel spatial
Illustration: http://mapschool.io
Slide 7
Slide 7 text
Référentiel spatial
●
Système de coordonnées (cartésien)
●
Ellipsoïde, géoïde (WGS 84)
●
Axes majeurs (équateur, Greenwich)
●
Unité (degrés, mètres)
●
…
●
Conique, cylindrique, conforme, ...
→WGS 84 (GPS, EPSG :4326)
→Mercator cylindrique (Google, EPSG :3857)
Slide 8
Slide 8 text
Données « vecteur »
●
Point (x, y, z)
●
Ligne (liste ordonnée de points)
●
Polygone (enveloppe + trous)
Illustration: http://mapschool.io
Slide 9
Slide 9 text
Données « raster »
●
~ Images
●
Fonds de carte (satellite, plan, …)
●
Données d'élévation
Illustration: http://mapschool.io
Slide 10
Slide 10 text
Base de données PostGIS
●
Type de colonnes (Point, LineString, Polygon...)
●
Fonctions géographiques (distance, surface, emprises ...)
●
Indexes spatiaux (arbres de rectangles...)
$ sudo apt-get install postgis
$ psql -d mabase
> CREATE EXTENSION postgis;
Slide 11
Slide 11 text
Exemple (1/2)
CREATE TABLE bureau_vote (
commune VARCHAR(128),
numero INTEGER,
geom geometry(Polygon, 4326)
)
Table classique
Attributs
Colonne
géométrie
vecteur
Type de géométrie Référentiel
spatial
Slide 12
Slide 12 text
Une carte sur le Web
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Une page Web
●
Document HTML (DOM)
●
Ressources (images)
●
JavaScript (code navigateur)
●
CSS (apparence)
Slide 15
Slide 15 text
Une page Web moderne
●
SVG (vecteur)
●
Canvas (raster)
●
CSS 3 (animations)
●
JSON (données)
●
JavaScript (interactions)
●
« Mobile first »
→Navigateur moderne (<3ans)
Slide 16
Slide 16 text
Scalable Vector Graphics
●
Dérivé de XML
●
Résolution infinie
●
Interprété par le navigateur (DOM)
●
Événements (survol, clic...)
●
Détails volume
→
→Exemples http://d3js.org
Illustration: Logo Parcs Nationaux de France
Slide 17
Slide 17 text
Canvas
●
Zone de dessin (pinceaux, JavaScript)
●
Universel (2D, 3D, images, ...)
●
Pas interprété ()
●
Pas d'événements DOM
→Exemples
http://babylonjs.com
http://ol3js.org
Geotrek
rando !
Slide 18
Slide 18 text
CSS 3
●
Feuille de style (apparence, thème)
●
Interprété par le navigateur
●
Transitions (apparition, ...)
●
Animations (rotations, ...)
●
Effets 3D (perspectives, ...)
→Exemples
Mozilla Demo Studio
Slide 19
Slide 19 text
Bibliothèque cartographique
var map = L.map('carte')
.fitWorld();
L.tileLayer('http://tile.osm.org/{z}/{x}/{y}.png')
.addTo(map);
L.marker([51.5, -0.09])
.addTo(map);
http://leafletjs.com
Slide 20
Slide 20 text
Anatomie d'une carte...
●
→JS + DOM
●
Initialisation = remplissage
●
![]()
(Fonds de carte)
●
Lat/Long pixels
→ (SVG, CSS)
●
Vecteur SVG
→
●
Événements (interactions)
Slide 21
Slide 21 text
Exemples et devinettes
●
http://municipalestoulouse2014.makina-corpus.com/
●
http://dessine-moi-une-ville.makina-corpus.net/
●
http://leaflet.github.io/Leaflet.heat/demo/
●
http://leplatrem.github.io/Leaflet.gribouille/
●
http://ol3js.org/en/master/examples/animation.html
●
http://danzel.github.io/Leaflet.utfgrid/example/map.html
●
http://bl.ocks.org/nrenner/raw/8184978
●
http://rbspd3.herokuapp.com/
●
http://forecast.io/
Slide 22
Slide 22 text
Architecture pour la cartographie
Slide 23
Slide 23 text
Le navigateur
●
Téléchargement (page, bibliothèques…)
●
Initialisation de la carte (emprise, couches)
●
Obtention des données (vecteur + raster)
--- optionel ---
●
Rendu des données (géométrie + style tracé)
→
Slide 24
Slide 24 text
Le serveur
●
Servir des fichiers (application + données)
--- optionel ---
●
Exécution des requêtes PostGIS (filtrage, attributs, …)
●
Formatage des résultats (XML, JSON, …)
●
Rendu des données (géométrie + style tracé)
→
Slide 25
Slide 25 text
« La classique »
Serveurs Web Navigateur
PostGIS Python
Moteur
Rendu
Vecteur
Tuiles
Fonds
Fichiers
Slide 26
Slide 26 text
« La classique »
Serveurs Web Navigateur
PostGIS Python
Moteur
Rendu
Vecteur
Tuiles
Fonds
Fichiers
Apache, Nginx...
Django, TileStache...
Mapnik, QGisServer...
Leaflet,
Openlayers3...
Slide 27
Slide 27 text
Formats (1/2)
●
Images raster (PNG ou JPG)
●
z/x/y.png
●
WMTS
●
Projection EPSG:3857 (Google)
→Données fixes
(fournisseur)
…
→ ou dynamiques
(moteur de rendu)
Arborescence
de fichiers !
Slide 28
Slide 28 text
Formats (2/2)
●
GeoJSON pour les données vecteurs
●
Projection EPSG:4326 (WGS84)
●
Interactivité ?
●
Volume ?
●
Fréquence ?
→Dynamique
(python, PHP, Java …)
SELECT
ST_AsGeoJSON(geom)
FROM ...
Slide 29
Slide 29 text
Tout le monde peut faire de la cartographie...
La cartographie, c'est simple.
●
Juste un type de données spécial
●
Lib JS représentation sexy
→
●
Pas ou peu de code
Illustration: Chef Gusteau, Pixar Inc.
Slide 30
Slide 30 text
… avec les bons outils et compromis !
La cartographie, c'est compliqué.
●
Performance (Web)
●
Volumétrie (précision)
●
Fréquence de rafraîchissement (cache)
●
Besoin trop éloigné des données (mal structurées)
●
INSPIRE (quand l'interopérabilité empêche l'opérabilité)
Illustration: Anton Ego, Pixar Inc.
Slide 31
Slide 31 text
●
TopoJSON
●
Mapnik
●
UTFGrid
●
Protobuf
●
Vector Tiles
●
MBTiles
●
Clustering
●
MapServer
●
QGisServer
●
…
→Besoin d'experts !
Illustration: F. Bonifas, Makina Corpus
Slide 32
Slide 32 text
Makina Corpus - Logiciels Libres | Cartographie | Mobile
Formations - Développement – Conseil
●
PostGIS - Leaflet – JavaScript
http://makina-corpus.com
Slide 33
Slide 33 text
Questions ?
...et réponses !