Le web mapping pour tous
Transcript of Le web mapping pour tous
Cartographie numérique
LE WEB MAPPING POUR TOUS
Un atelier de géobidouillepour s'initier à la représentation spatiale
de données et contenus numériques sur le weben 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 manipulationsde base
#3 Géovisualisation
de données
#4 Narration cartographique
Introduction au web mapping
Hier Demain
Etat de l’art et concepts de base
Partie #1
?
InformationDonnées et contenusgéoréférencés
GéographieCartes et symbolisation
graphique
WebStandards de fabrication
pour une diffusion en ligne
Web Mapping
SIGArcGIS, QGIS, etc
Cartographie numérique orientée Web
INTERNET
Anatomie simplifiée d’une carte web
Comme le corps humain, une web map est composéede 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
Google Maps Open Street Map
Des données stylisées, rendues sous forme de tuilespar des serveurs, le tout visible dans un navigateur
2 exemples de cartes glissantes* slippy map
Données contributives viaiD (web) ou JOSM (desktop)
Données contributives viaGoogle Map Maker (web)Fermé depuis mai 2015
Les tuiles cartographiquesau cœur du fonctionnement d’une carte glissante
* map tiles, tileset
Grille de localisation des tuilesen fonction du niveau de zoom,puis colonne et ligne z/x/y
A chaque niveau de zoom (+/- 20)le nombre de tuiles croit demanière exponentielle
Les tuiles sont rendues sous la formed’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 !
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
Sans surprise, une collection de tuiles est souventutilisé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 ?
Les langages et outils de personnalisation detuiles diffèrent en fonction de l’environnement
Google Maps vs. Open Street Map
Mapstylr Mapbox Studio
Application web très simple à utiliser maisqui assiste uniquement la productiond’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 MapboxSuccesseur annoncé de TileMill
Les calques ou couches de données permettent d’afficherdes 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’espaceet 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
Plusieurs méthodes, plus ou moins complexes, permettentde récupérer des couches de données géographiques
Données publiques(Geo) Web Social OpenStreetMap
Plate-formes departage de contenuset réseaux sociaux
Par exemple, extraireun flux de photos
géolocalisées (GeoRSS)à partir de Flickr
Les développeurs utilisent les interfaces de programmation (APIs) pour intégrer dynamiquementdes 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échargerun fichier de geodatasur data.gouv.fr ou
sur iledefrance.data.fr
Base de donnéesgéographiqueslibre et ouverte
Par exemple, construireune requête à partird’Overpass Turbo et
exporter son résultat
Différentes sources possibles
L’intégration web permet d’assembler tuiles et couches dedonné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éationpour développeurs(programmation)
Librairies (Leaflet, OpenLayers, etc)et APIs (Google Maps, ArcGIS, etc)
Outils de créationpour tous
(sans coder)
Applications etservices en ligne
Initiation au web mapping
Mise en pratique et manipulations de base
Partie #2
Le géocodage consiste à affecter des coordonnéesgé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
Outil d’édition de données en GeoJSON développé à partir de Mapbox.jsSimple 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éographiquespeut être facilitée par de nombreux outils d’édition en ligne
* online map creator
geojson.io
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 deré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*
La géorectification consiste à déformer une imagepour 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 parla 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
Comment créer ma première carte web ?
Google My Maps Mapbox Editor
Les outils d’édition cartographique en ligne proposentdes fonctionnalités plus ou moins avancées
ou
Nécessite un compte Google Nécessite un compte Mapbox
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 lesfonctionnalités de vos cartes web
Visualisation cartographique interactive* interactive geovisualisation
Visualiser des données avec des cartes web
Partie #3
La géovisualisation interactive est une étape dans lalongue 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
Données séquentiellesQuantitatives / Continues
Données catégoriellesQualitatives / Discrètes
NominalesCatégories nommées
Sans ordre a priori
femmes | hommes
OrdinalesCatégories ordonnées
Classement
groupes d’âge
RelativesVariables de taux
Rapport entre 2 valeurs
nb d’habitants / km2
AbsoluesVariables de stock
Valeur concrète / brute
nb d’habitants
Pour représenter des données sur une carte, il est nécessairede prendre en compte la nature de ces données
Données séquentielles vs. données catégorielles
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 joueravec des variables de rendu graphique
7 variables visuelles pour la représentation cartographique
Bonus #1
Bonus #2
Bonus #3
Bonus #4
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
Cas pratique : cherchez les erreurs sémiologiques oumaladresses de représentation cartographique
Où sont les femmes en Ile-de-France ?
Pourcentage de femmes par commune2011 – Source INSEE
Nombre de femmes par commune2011 – Source INSEE
Parmi la multitude des modes de visualisation cartographiquepossibles, on peut isoler 2 formes principales
Cartes choroplèthes vs. cartes par symboles
Par symbolesChoroplèthes
Dégradé de couleursIndicateur quantitatifen valeurs relatives
Couleurs opposablesIndicateur qualitatif
en valeurs nom. ou ord.
ProportionnelsIndicateur quantitatifen valeurs absolues
Ponctuels simplesIndicateur qualitatif
en valeurs nom. ou ord.
Les valeurs de l’indicateursont découpées en tranches
séparées par des seuils
Plusieurs méthodes dedécoupage (discrétisation)
sont possibles
Les valeurs de l’indicateurcolorisent les entités
géographiques
Chaque couleur représenteet permet de séparer
les catégories
Les valeurs de l’indicateursont représentées par unsymbole dont la surface
est proportionnelle àla valeur représentée
Les valeurs de l’indicateursont représentées par un
symbole dont la forme et/oula couleur varie selon
la catégorie
D’autres modes de représentation permettent d’interpolerou 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 quantitatifen valeurs absolues à l'aide d'un
dégradé de couleurs allant dufroid au chaud
On repère ainsi en un coup d'œilles zones à forte densité (les points chauds)
Une carte de groupement permetde rassembler des symboles
ponctuels en grappes deproximité et d’afficher le nombrede points décomptés en fonction
du niveau de zoom
Elle permet de rendre plus digesteune carte saturée de points
Une carte de carroyage permetd’agréger et de symboliserles données d’un indicateur
quantitatif en valeurs absolues dansdes formes, hexagonales ou carrées,
en faisant varier la couleurcomme on le ferait pour une
carte choroplèthe(dégradé + tranches de décompte)
Cas particulier : la représentation spatialede 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
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
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
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
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
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 narratifinteractif qui permet de lier des contenus multimédia
avec des représentations spatiales
Clermont la nuitLa Montagne
Les grands chantiers dela Genève Internationale
Le Temps
Un Etat voyou le longde deux rivières
The New York Times
Bonus #1 Bonus #2Tout juste émergent, ce format s’appuie une grammaire narrative qui
reste à stabiliser. Plusieurs modèles de maquettes associés à des outilsd’édition web permettent néanmoins de faciliter leur production.
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 SlideNécessite l’ouverture d’un compte
Bonus #1 Bonus #2
Story Maps
Story Maps propose un choix étendu de maquettesapplicatives pour composer des récits cartographiques
Nécessite un compte ArcGIS Online
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 facilementutilisables sont celles qui intègrent un générateur d’application
Odyssey est un projet open source développé par CartoDBavec le soutien de la Knight Foundation
3 maquettes applicatives aujourd’hui disponibles
Utilisable avec des cartes web créées à partir de CartoDBSyntaxe Markdown pour intégrer des contenus et interagir avec la carte
Principales sources web utilisées pourconfectionner 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