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