Cartographie numérique
LE WEB MAPPING POUR TOUS
Un atelier de géobidouille
pour s'initier à la représentation spatiale
de données et contenus numériques sur le web
en app...
Introduction au web mapping
Hier Demain
Etat de l’art et concepts de base
Partie #1
?
Information
Données et contenus
géoréférencés
Géographie
Cartes et symbolisation
graphique
Web
Standards de fabrication
po...
Anatomie simplifiée d’une carte web
Comme le corps humain, une web map est composée
de systèmes qui interagissent et se croisent
Cellules = Données (géographi...
Google Maps Open Street Map
Des données stylisées, rendues sous forme de tuiles
par des serveurs, le tout visible dans un ...
Les tuiles cartographiques
au cœur du fonctionnement d’une carte glissante
* map tiles, tileset
Grille de localisation des...
Tile Map Service (TMS) : référence normative pour interroger un serveur de tuiles
Des images collées les unes aux autres o...
Sans surprise, une collection de tuiles est souvent
utilisée comme fond de carte pour créer une web map
* base layer, base...
Les langages et outils de personnalisation de
tuiles diffèrent en fonction de l’environnement
Google Maps vs. Open Street ...
Les calques ou couches de données permettent d’afficher
des informations au-dessus du fond de carte
* data layers, content...
Plusieurs méthodes, plus ou moins complexes, permettent
de récupérer des couches de données géographiques
Données publique...
L’intégration web permet d’assembler tuiles et couches de
données au sein d’une interface cartographique interactive
* web...
Initiation au web mapping
Mise en pratique et manipulations de base
Partie #2
Le géocodage consiste à affecter des coordonnées
géographiques (longitude/latitude) à une adresse
* geocoding
Le géocodage...
Outil d’édition de données en GeoJSON développé à partir de Mapbox.js
Simple et rapide, il permet de créer et publier des ...
Convertir des Shapefile en GeoJSON
ou en TopoJSON et exporter
automatiquement vers Google Fusion
Tables
Convertir des geod...
La géorectification consiste à déformer une image
pour corriger son alignement sur une carte
* map warping, image geo rect...
Comment créer ma première carte web ?
Google My Maps Mapbox Editor
Les outils d’édition cartographique en ligne proposent
...
Comment créer une carte web plus évoluée ?
uMap
Nécessite un compte OpenStreetMap, Bitbucket, Github ou Twitter
Pour aller...
Visualisation cartographique interactive
* interactive geovisualisation
Visualiser des données avec des cartes web
Partie ...
La géovisualisation interactive est une étape dans la
longue histoire de la représentation spatiale de données
La campagne...
Données séquentielles
Quantitatives / Continues
Données catégorielles
Qualitatives / Discrètes
Nominales
Catégories nommée...
La forme * : variation du type de symbole
La taille * : variation de la surface du symbole
La couleur * : variation du % d...
Utilisation de variables visuelles selon l’implantation et la nature des données
Pour représenter des données sur une cart...
Cas pratique : cherchez les erreurs sémiologiques ou
maladresses de représentation cartographique
Où sont les femmes en Il...
Parmi la multitude des modes de visualisation cartographique
possibles, on peut isoler 2 formes principales
Cartes choropl...
D’autres modes de représentation permettent d’interpoler
ou d’agréger des données pour faciliter leur visualisation
Carte ...
Cas particulier : la représentation spatiale
de données temporelles pour combiner espace et temps
Interaction AnimationCla...
Bubble | Cluster | Heatmap | Markers
Comment créer ma première visualisation cartographique ?
Maps Data
Parmi les outils w...
Simple | Cluster | Choropleth | Category | Bubble | Intensity | Density | Torque | Torque Heat | Torque Category
CartoDB
L...
Emplacement (un seul symbole) | Carte de densité | Type (symboles uniques) | Totaux et montants (Couleur) | Totaux et mont...
Comment créer une application à partir d’une carte ArcGIS ?
En fonction de vos besoins,
il peut être nécessaire d’ajouter ...
Narration cartographique interactive
* interactive storymap
Raconter des histoires avec des cartes web
Partie #4
Trois exemples d’usages journalistiques
Slide Scroll Strip
Un récit cartographique (storymap) est un format narratif
inter...
Comment créer mon premier récit cartographique ?
ou
StorymapJS Heganoo
Le modèle du « diaporama cartographique »
est le pl...
Story Maps
Story Maps propose un choix étendu de maquettes
applicatives pour composer des récits cartographiques
Nécessite...
Séquentiel
Série
Comparaison
Maquettes avec générateur d’application intégré
Map Tour Map Journal*
Onglets Accordéon Puces...
Odyssey est un projet open source développé par CartoDB
avec le soutien de la Knight Foundation
3 maquettes applicatives a...
Principales sources web utilisées pour
confectionner ce support d’atelier
Crédits
Survey of the Best Online Mapping Tools ...
Prochain SlideShare
Chargement dans…5
×

Le web mapping pour tous

7 759 vues

Publié le

Support d'intervention pour un atelier de géobidouille organisé dans le cadre d'un stage dataviz à l'INTD-CNAM

Publié dans : Internet
1 commentaire
15 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
7 759
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 325
Actions
Partages
0
Téléchargements
133
Commentaires
1
J’aime
15
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le web mapping pour tous

  1. 1. Cartographie numérique LE WEB MAPPING POUR TOUS
  2. 2. Un atelier de géobidouille pour s'initier à la représentation spatiale de données et contenus numériques sur le web en apprenant à fabriquer des applications cartographiques interactives sans écrire une seule ligne de code (ou presque) #1 Etat de l’art et concepts de base #2 Mise en pratique et manipulations de base #3 Géovisualisation de données #4 Narration cartographique
  3. 3. Introduction au web mapping Hier Demain Etat de l’art et concepts de base Partie #1 ?
  4. 4. Information Données et contenus géoréférencés Géographie Cartes et symbolisation graphique Web Standards de fabrication pour une diffusion en ligne Web Mapping SIG ArcGIS, QGIS, etc Cartographie numérique orientée Web INTERNET
  5. 5. Anatomie simplifiée d’une carte web
  6. 6. Comme le corps humain, une web map est composée de systèmes qui interagissent et se croisent Cellules = Données (géographiques) Système digestif = Styles Système circulatoire = Tuiles O Système nerveux = Serveurs
  7. 7. Google Maps Open Street Map Des données stylisées, rendues sous forme de tuiles par des serveurs, le tout visible dans un navigateur 2 exemples de cartes glissantes * slippy map Données contributives via iD (web) ou JOSM (desktop) Données contributives via Google Map Maker (web) Fermé depuis mai 2015
  8. 8. Les tuiles cartographiques au cœur du fonctionnement d’une carte glissante * map tiles, tileset Grille de localisation des tuiles en fonction du niveau de zoom, puis colonne et ligne z/x/y A chaque niveau de zoom (+/- 20) le nombre de tuiles croit de manière exponentielle Les tuiles sont rendues sous la forme d’images carrées de 256x256 pixels à partir d’un serveur Une pyramide d’images pour améliorer la réactivité et la fluidité Ce modèle de tuilage (raster) est aujourd’hui le plus courant, mais le tuilage vectoriel, moins standardisé, arrive à grands pas !
  9. 9. Tile Map Service (TMS) : référence normative pour interroger un serveur de tuiles Des images collées les unes aux autres o_0 http://d.tile.stamen.com/watercolor/13/4149/2818.jpg Niveau de zoom (z) Paire de localisation (x/y)Nom du serveur de tuiles Format image
  10. 10. Sans surprise, une collection de tuiles est souvent utilisée comme fond de carte pour créer une web map * base layer, basemap Qui fournit et où trouver des collections de tuiles ? Bonus #1 Bonus #2 Et pour Google Maps ?
  11. 11. Les langages et outils de personnalisation de tuiles diffèrent en fonction de l’environnement Google Maps vs. Open Street Map Mapstylr Mapbox Studio Application web très simple à utiliser mais qui assiste uniquement la production d’un code en JSON à réinjecter dans une web map utilisant l’API Google Maps Logiciel à installer, très complet et puissant, mais difficile à prendre en main (CartoCSS) Import / export de données et hébergement sur les serveurs de Mapbox Successeur annoncé de TileMill
  12. 12. Les calques ou couches de données permettent d’afficher des informations au-dessus du fond de carte * data layers, content layers, feature layers Types et formats standards des geodata Rasters Vecteurs Images référencées dans l’espace et composées de pixels (données matricielles) PNG, GeoTIFF, JPEG2000 … MBTiles Objets géométriques (points, lignes et polygones) référencés dans l’espace (données vectorielles) SHP, KML, OSM XML, GeoJSON, GeoRSS, GPX … CSV Dans une web map, rasters et vecteurs sont combinables (tuiles + couches de données vectorielles par exemple) On peut ajouter des interactions avec les géométries vectorielles (ouverture d’une popup au clic par exemple) De nombreux outils permettent de créer des geodata, de les nettoyer ou de les convertir (passer d’un format à un autre) Les sources de données géographiques disponibles en ligne et réutilisables se démultiplient
  13. 13. Plusieurs méthodes, plus ou moins complexes, permettent de récupérer des couches de données géographiques Données publiques(Geo) Web Social OpenStreetMap Plate-formes de partage de contenus et réseaux sociaux Par exemple, extraire un flux de photos géolocalisées (GeoRSS) à partir de Flickr Les développeurs utilisent les interfaces de programmation (APIs) pour intégrer dynamiquement des données tierces dans des applications hybrides (mashups cartographiques) Portails opendata de l’Etat, de collectivités locales ou autres organismes publics Par exemple, télécharger un fichier de geodata sur data.gouv.fr ou sur iledefrance.data.fr Base de données géographiques libre et ouverte Par exemple, construire une requête à partir d’Overpass Turbo et exporter son résultat Différentes sources possibles
  14. 14. L’intégration web permet d’assembler tuiles et couches de données au sein d’une interface cartographique interactive * web stack, interactive web map, online web map creator Comment créer une web map ? Données HTML CSS JAVASCRIPT CalquesTuiles Navigateur Outils de création pour développeurs (programmation) Librairies (Leaflet, OpenLayers, etc) et APIs (Google Maps, ArcGIS, etc) Outils de création pour tous (sans coder) Applications et services en ligne
  15. 15. Initiation au web mapping Mise en pratique et manipulations de base Partie #2
  16. 16. Le géocodage consiste à affecter des coordonnées géographiques (longitude/latitude) à une adresse * geocoding Le géocodage inversé consiste à trouver l'adresse correspondant (ou la plus proche) à des coordonnées XY Comment géocoder des adresses ? Bonus #2 Bonus #3 Le géocodeur CSV d’Etalab est un outil en ligne qui s’appuie sur Addok, moteur de recherche open source de la Base Nationale d’Adresses (BAN) Bonus #1
  17. 17. Outil d’édition de données en GeoJSON développé à partir de Mapbox.js Simple et rapide, il permet de créer et publier des cartes web en WYSIWYG Nécessite un compte Github pour sauvegarder et stocker les données Comment éditer / visualiser les données d’une carte web ? La création de couches de données géographiques peut être facilitée par de nombreux outils d’édition en ligne * online map creator geojson.io
  18. 18. Convertir des Shapefile en GeoJSON ou en TopoJSON et exporter automatiquement vers Google Fusion Tables Convertir des geodata à partir et vers de très nombreux formats (existe depuis 2008) Convertir des geodata (nombreux formats supportés) en KML Convertir des geodata (nombreux formats supportés) en GeoJSON ou transformer du GeoJSON en Shapefile Simplifier des données GeoJSON en les convertissant au format TopoJSON Editer et simplifier des fichiers Shapefile, GeoJSON, TopoJSON, et plusieurs autres formats de données Pour exploiter des geodata, on a souvent besoin de réaliser diverses opérations de traitement Kit applicatif pour la conversion de données géographiques Ogre* Shape Escape Geo Converter* KML Converter* The DistilleryMap Shaper*
  19. 19. La géorectification consiste à déformer une image pour corriger son alignement sur une carte * map warping, image geo rectifying Comment géoréférencer, rectifier et tuiler une image ? Plate-forme développée en open source et déployée par la Bibliothèque Publique de New York qui permet de géorectifier des images D’autres méthodes, plus complexes, sont possibles mais cette plate-forme fournit un service tout en un Map Warper
  20. 20. Comment créer ma première carte web ? Google My Maps Mapbox Editor Les outils d’édition cartographique en ligne proposent des fonctionnalités plus ou moins avancées ou Nécessite un compte Google Nécessite un compte Mapbox
  21. 21. Comment créer une carte web plus évoluée ? uMap Nécessite un compte OpenStreetMap, Bitbucket, Github ou Twitter Pour aller plus loin dans la personnalisation et les fonctionnalités de vos cartes web
  22. 22. Visualisation cartographique interactive * interactive geovisualisation Visualiser des données avec des cartes web Partie #3
  23. 23. La géovisualisation interactive est une étape dans la longue histoire de la représentation spatiale de données La campagne de Russie par Charles Minard (1869) Localisation | Temps | Distance | Température | Nombre de survivants
  24. 24. Données séquentielles Quantitatives / Continues Données catégorielles Qualitatives / Discrètes Nominales Catégories nommées Sans ordre a priori femmes | hommes Ordinales Catégories ordonnées Classement groupes d’âge Relatives Variables de taux Rapport entre 2 valeurs nb d’habitants / km2 Absolues Variables de stock Valeur concrète / brute nb d’habitants Pour représenter des données sur une carte, il est nécessaire de prendre en compte la nature de ces données Données séquentielles vs. données catégorielles
  25. 25. La forme * : variation du type de symbole La taille * : variation de la surface du symbole La couleur * : variation du % des 3 couleurs primaires La valeur * : variation du % du noir et du blanc La texture : variation de la nature du motif Le grain : variation de résolution du motif sans variation de valeur L’orientation : variation de l’angle du motif ou de la forme Pour représenter des données sur une carte, on peut jouer avec des variables de rendu graphique 7 variables visuelles pour la représentation cartographique Bonus #1 Bonus #2 Bonus #3 Bonus #4
  26. 26. Utilisation de variables visuelles selon l’implantation et la nature des données Pour représenter des données sur une carte, on cherche à respecter des règles de sémiologie (carto)graphique Objectif : construire une carte à la fois lisible et véhiculant l’information de façon correcte
  27. 27. Cas pratique : cherchez les erreurs sémiologiques ou maladresses de représentation cartographique Où sont les femmes en Ile-de-France ? Pourcentage de femmes par commune 2011 – Source INSEE Nombre de femmes par commune 2011 – Source INSEE
  28. 28. Parmi la multitude des modes de visualisation cartographique possibles, on peut isoler 2 formes principales Cartes choroplèthes vs. cartes par symboles Par symbolesChoroplèthes Dégradé de couleurs Indicateur quantitatif en valeurs relatives Couleurs opposables Indicateur qualitatif en valeurs nom. ou ord. Proportionnels Indicateur quantitatif en valeurs absolues Ponctuels simples Indicateur qualitatif en valeurs nom. ou ord. Les valeurs de l’indicateur sont découpées en tranches séparées par des seuils Plusieurs méthodes de découpage (discrétisation) sont possibles Les valeurs de l’indicateur colorisent les entités géographiques Chaque couleur représente et permet de séparer les catégories Les valeurs de l’indicateur sont représentées par un symbole dont la surface est proportionnelle à la valeur représentée Les valeurs de l’indicateur sont représentées par un symbole dont la forme et/ou la couleur varie selon la catégorie
  29. 29. D’autres modes de représentation permettent d’interpoler ou d’agréger des données pour faciliter leur visualisation Carte de groupement * cluster map Carte de température * heat map Carte de carroyage * bin map Une carte de température (ou de chaleur) permet de souligner la disparité spatiale d'un indicateur quantitatif en valeurs absolues à l'aide d'un dégradé de couleurs allant du froid au chaud On repère ainsi en un coup d'œil les zones à forte densité (les points chauds) Une carte de groupement permet de rassembler des symboles ponctuels en grappes de proximité et d’afficher le nombre de points décomptés en fonction du niveau de zoom Elle permet de rendre plus digeste une carte saturée de points Une carte de carroyage permet d’agréger et de symboliser les données d’un indicateur quantitatif en valeurs absolues dans des formes, hexagonales ou carrées, en faisant varier la couleur comme on le ferait pour une carte choroplèthe (dégradé + tranches de décompte)
  30. 30. Cas particulier : la représentation spatiale de données temporelles pour combiner espace et temps Interaction AnimationClassique Comment visualiser des données géotemporelles ? AnamorphoseFiltre Utiliser des variables visuelles en traitant les données temporelles comme des données qualitatives ordinales Intégrer un élément d’interface qui permette de filtrer les données représentées sur la carte en fonction du temps Lier représentation spatiale et représentation temporelle dans une interface hybride Déformer une représentation spatiale en fonction de distances temporelles (cartogramme) Intégrer un lecteur dynamique qui permette d’afficher les données spatiales en fonction de jalons temporels Bonus #2 Bonus #3Bonus #1 Bonus #4
  31. 31. Bubble | Cluster | Heatmap | Markers Comment créer ma première visualisation cartographique ? Maps Data Parmi les outils web d’édition cartographique, certains permettent de générer des visualisations de données Nécessite l’ouverture d’un compte utilisateur
  32. 32. Simple | Cluster | Choropleth | Category | Bubble | Intensity | Density | Torque | Torque Heat | Torque Category CartoDB Les modes de représentation proposés sont plus ou moins étendus et paramétrables en fonction de l’outil utilisé Comment accéder à des formes diversifiées de géovisualisation ? Nécessite l’ouverture d’un compte utilisateur
  33. 33. Emplacement (un seul symbole) | Carte de densité | Type (symboles uniques) | Totaux et montants (Couleur) | Totaux et montants (Taille) Ouvrir un compte pour développeur (moins de limitations) Comment trouver un mode de visualisation adapté à mes données ? En fonction de vos besoins, il peut être nécessaire de changer d’outil ArcGIS Online
  34. 34. Comment créer une application à partir d’une carte ArcGIS ? En fonction de vos besoins, il peut être nécessaire d’ajouter des fonctionnalités Web AppBuilder Une bibliothèque de composants (widgets) pour enrichir vos applications
  35. 35. Narration cartographique interactive * interactive storymap Raconter des histoires avec des cartes web Partie #4
  36. 36. Trois exemples d’usages journalistiques Slide Scroll Strip Un récit cartographique (storymap) est un format narratif interactif qui permet de lier des contenus multimédia avec des représentations spatiales Clermont la nuit La Montagne Les grands chantiers de la Genève Internationale Le Temps Un Etat voyou le long de deux rivières The New York Times Bonus #1 Bonus #2 Tout juste émergent, ce format s’appuie une grammaire narrative qui reste à stabiliser. Plusieurs modèles de maquettes associés à des outils d’édition web permettent néanmoins de faciliter leur production.
  37. 37. Comment créer mon premier récit cartographique ? ou StorymapJS Heganoo Le modèle du « diaporama cartographique » est le plus simple et rapide à mettre en oeuvre Application open source (Knight Lab) Personnalisation des tuiles (OSM) 2 versions possible : Map ou Gigapixel (Zoomify) Nécessite un compte Google (accès Drive) Service freemium (2 maps et 20 points/map) Personnalisation des tuiles (Google Maps) 2 versions possibles : Map Slide ou Image Map Slide Nécessite l’ouverture d’un compte Bonus #1 Bonus #2
  38. 38. Story Maps Story Maps propose un choix étendu de maquettes applicatives pour composer des récits cartographiques Nécessite un compte ArcGIS Online
  39. 39. Séquentiel Série Comparaison Maquettes avec générateur d’application intégré Map Tour Map Journal* Onglets Accordéon Puces Swipe Spyglass Les maquettes les plus immédiatement et facilement utilisables sont celles qui intègrent un générateur d’application
  40. 40. Odyssey est un projet open source développé par CartoDB avec le soutien de la Knight Foundation 3 maquettes applicatives aujourd’hui disponibles Utilisable avec des cartes web créées à partir de CartoDB Syntaxe Markdown pour intégrer des contenus et interagir avec la carte
  41. 41. Principales sources web utilisées pour confectionner ce support d’atelier Crédits Survey of the Best Online Mapping Tools - Toptal Anatomy of a Web Map - Alan McConchie Anatomy of a Web Map - Chase Gruber Hello Web Maps - Joey Lee Introduction libre à la cartographie - Mapschool Play With Data - Jean Abbiateci Manuel de Cartographie - Arctique Thematic Cartography Guide - Axismaps Aide Geoclip - emc3 Interfaces for Geotemporal Visualization - Nick Rabinowitz

×