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 !