Petit déjeuner "Les bases de la cartographie sur le Web"

Du stockage de la donnée à la carte sur le Web, venez découvrir les fondements de la cartographie en ligne autour d'un café et quelques viennoiseries.

Nous vous avons présenté les fondements des SIG : comment représenter, stocker, éditer, assembler, publier les données géographiques...

Nous avons détaillé l'anatomie d'une carte moderne sur le web.

Ce petit déjeuner s'adresse à tous les curieux qui souhaitent découvrir les bases et comprendre la mécanique en abordant quelques éléments techniques !

Transcript

1. Les bases de la cartographie sur le Web (version courte) Mathieu Leplatre @leplatrem www.makina-corpus.com
2. 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 !)
3. Données géographiques
4. Coordonnées : position sur la Terre • Longitude (x) – Latitude (y) • Degrés décimaux (-180 +180, -90 +90) → → • GPS
5. Géodésie : la forme de la Terre Ellipsoid (GPS, WGS 84) Illustration: http://mapschool.io
6. Projections • Équations (lat/lng pixels) ↔ • Représentation plane ( compromis) → • Changement de référentiel spatial Illustration: http://mapschool.io
7. 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)
8. Données « vecteur » • Point (x, y, z) • Ligne (liste ordonnée de points) • Polygone (enveloppe + trous) Illustration: http://mapschool.io
9. Données « raster » • ~ Images • Fonds de carte (satellite, plan, …) • Données d'élévation Illustration: http://mapschool.io
10. 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;
11. 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
12. Une carte sur le Web
14. Une page Web • Document HTML (DOM) • Ressources (images) • JavaScript (code navigateur) • CSS (apparence)
15. Une page Web moderne • SVG (vecteur) • Canvas (raster) • CSS 3 (animations) • JSON (données) • JavaScript (interactions) • « Mobile first » →Navigateur moderne (<3ans)
16. 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
17. Canvas • Zone de dessin (pinceaux, JavaScript) • Universel (2D, 3D, images, ...) • Pas interprété (<canvas>) • Pas d'événements DOM →Exemples http://babylonjs.com http://ol3js.org Geotrek rando !
18. CSS 3 • Feuille de style (apparence, thème) • Interprété par le navigateur • Transitions (apparition, ...) • Animations (rotations, ...) • Effets 3D (perspectives, ...) →Exemples Mozilla Demo Studio
19. Bibliothèque cartographique <script src="leaflet.js"></script> <link rel="stylesheet" href="leaflet.css" /> <div id="carte"></div> <script> 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); </script> http://leafletjs.com
20. Anatomie d'une carte... • →JS + DOM • Initialisation = remplissage <div> • <img> (Fonds de carte) • Lat/Long pixels → (SVG, CSS) • Vecteur SVG → • Événements (interactions)
21. 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/
22. Architecture pour la cartographie
23. 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é) →
24. 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é) →
25. « La classique » Serveurs Web Navigateur PostGIS Python Moteur Rendu Vecteur Tuiles Fonds Fichiers
26. « La classique » Serveurs Web Navigateur PostGIS Python Moteur Rendu Vecteur Tuiles Fonds Fichiers Apache, Nginx... Django, TileStache... Mapnik, QGisServer... Leaflet, Openlayers3...
27. 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 !
28. 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 ...
29. 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.
30. … 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.
31. • TopoJSON • Mapnik • UTFGrid • Protobuf • Vector Tiles • MBTiles • Clustering • MapServer • QGisServer • … →Besoin d'experts ! Illustration: F. Bonifas, Makina Corpus
32. Makina Corpus - Logiciels Libres | Cartographie | Mobile Formations - Développement – Conseil • PostGIS - Leaflet – JavaScript http://makina-corpus.com
33. Questions ? ...et réponses !