Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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 !

Makina Corpus

April 24, 2014
Tweet

More Decks by Makina Corpus

Other Decks in Technology

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. Coordonnées : position sur la Terre • Longitude (x) –

    Latitude (y) • Degrés décimaux (-180 +180, -90 +90) → → • GPS
  4. Géodésie : la forme de la Terre Ellipsoid (GPS, WGS

    84) Illustration: http://mapschool.io
  5. Projections • Équations (lat/lng pixels) ↔ • Représentation plane (

    compromis) → • Changement de référentiel spatial Illustration: http://mapschool.io
  6. 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)
  7. Données « vecteur » • Point (x, y, z) •

    Ligne (liste ordonnée de points) • Polygone (enveloppe + trous) Illustration: http://mapschool.io
  8. Données « raster » • ~ Images • Fonds de

    carte (satellite, plan, …) • Données d'élévation Illustration: http://mapschool.io
  9. 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;
  10. 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
  11. Une page Web • Document HTML (DOM) • Ressources (images)

    • JavaScript (code navigateur) • CSS (apparence)
  12. Une page Web moderne • SVG (vecteur) • Canvas (raster)

    • CSS 3 (animations) • JSON (données) • JavaScript (interactions) • « Mobile first » →Navigateur moderne (<3ans)
  13. 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
  14. 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 !
  15. CSS 3 • Feuille de style (apparence, thème) • Interprété

    par le navigateur • Transitions (apparition, ...) • Animations (rotations, ...) • Effets 3D (perspectives, ...) →Exemples Mozilla Demo Studio
  16. 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
  17. Anatomie d'une carte... • →JS + DOM • Initialisation =

    remplissage <div> • <img> (Fonds de carte) • Lat/Long pixels → (SVG, CSS) • Vecteur SVG → • Événements (interactions)
  18. 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/
  19. 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é) →
  20. 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é) →
  21. « La classique » Serveurs Web Navigateur PostGIS Python Moteur

    Rendu Vecteur Tuiles Fonds Fichiers Apache, Nginx... Django, TileStache... Mapnik, QGisServer... Leaflet, Openlayers3...
  22. 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 !
  23. 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 ...
  24. 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.
  25. … 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.
  26. • TopoJSON • Mapnik • UTFGrid • Protobuf • Vector

    Tiles • MBTiles • Clustering • MapServer • QGisServer • … →Besoin d'experts ! Illustration: F. Bonifas, Makina Corpus
  27. Makina Corpus - Logiciels Libres | Cartographie | Mobile Formations

    - Développement – Conseil • PostGIS - Leaflet – JavaScript http://makina-corpus.com