Les nouveaux horizonsde la cartographie sur le web
Benjamin BecquetParis Web 2012
2
Un peu d'histoire (-géo) : il y a 10 ans
Géomatique
• Acteurs historiques
• Fort écosystème libre, mais données fermées
• Standards lourds
Le web de 2002…• Interfaces pauvres et lentes
• Interactivité = Flash/Java
3
Publier des cartes sur son site ~ 2002
• Pas d'API accessibles
• Travail de cartographe + graphiste
• Ou usines à gaz propriétaires
Barrière technologique
Le Cartographe, Vermeer.
4
2005 : Google Maps
• Principes « à la Google »
• Utilisation des atouts et standards du web
• Interface simple + rapidité → slippy map
• Compromis
• Projection de Mercator simplifiée (sphérique))
• Échelle de zooms fixéeÉchelle de zooms fixée
• « Tuiles » de taille fixe « Tuiles » de taille fixe
5
Pyramides de tuiles
z=0 ; x=0 ; y=0
1 ; 0 ; 0
1 ; 1 ; 1
http://mts0.google.com/vt/&z={Z}&x={X}&y={Y}
1 ; 1 ; 0
1 ; 0 ; 1
6
Aujourd'hui
• Standard de facto de la cartographie web
• « In 50 years, Google will be the self-driving car company […] and, oh, P.S. they still have a search engine somewhere. » , Robin Sloane.
• « More than a map »
• L'API la plus utilisée sur le web, toutes confondues
7
Google Maps JavaScript API
• Carte multi-couches + interaction
• Overlays
• Services haut niveau = accès à d'autres API Google
• Géocodage + POIs
• Itinéraires, transports en commun
• StreetView
• Fusion Tables
8
Styled maps
• Outil puissant, sous-employé
• Mise en valeur sélective des éléments
• Lisibilité / Accessibilité
• Différenciation esthétique
• Mais niveau de contrôle frustrant
• Granularité des éléments
• Typographie, symbologie, etc.
9http://www.mapofthedead.com/map/
10
Quotas payants
• 2005 2011 : « gratuit, mais… » →
• Octobre 2011 : annonce du modèle payant
• Juin 2012 : grosse réduction
• « 0,35% des sites » / Business API
Catalyseur : « Est-ce la bonne/seule solution ? »
11
D'autres raisons de s'en passer
• Nombreuses restrictions d'utilisation
• Sites payants, intra/extranets
• Embarqué, suivi, navigation
• Fonds de carte sans l'API
• Épée de Damoclès (tarifs ? publicités ?)
• Image / concurrence / philosophie
• Pas d'accès aux données
12
Des régions « oubliées »
Exemple : le centre ville de Sarajevo
13
Mercator pas toujours adapté
Cartographier une mission polaire ?
14
Les fails ne sont pas réservés à Apple
15
Généralisation / l10n / typographie :(
16
Alternatives propriétaires
• Bing Maps, Nokia Maps, MapQuest, etc.
• Solutions plus spécifiques / locales
Globalement les mêmes services
et les mêmes contraintes, liées aux données
17
OpenStreetMap
• Base de données collaborative
• Licence libre (CC-BY-SA puis OdbL)
• « Le WikiPedia des cartes »
• Écosystème d'outils libres
Mouvement #switch2osm
18
Couverture ?
• Variable selon les pays
• Globalement excellente dans les grandes villes
19
Richesse ?
• Approche exhaustive « cartographier le monde »
• Structure [clef=valeur] extensible
20
Fraîcheur ?
Google Maps,18 octobre 2012
OpenStreetMap,2 janvier 2012
Les 2 communes ont fusionné le 1er janvier 2012
21
#switch2osm en pratique
• Reprise du modèle de Google Maps
• Choix en fonction du niveau de contrôle voulu
Approche « à la carte »
• Tuiles
• API JavaScript
• Services
Pile existante
• MapQuest Open
22
Des serveurs de tuiles ouverts
openstreetmap.orghttp://c.tile.openstreetmap.org/16/33179/22532.png
MapQuest Openhttp://otile4.mqcdn.com/tiles/1.0.0/osm/16/33179/22532.png
Stamenhttp://tile.stamen.com/watercolor/16/33179/22532.jpg
Garanties ?
23
Générer / héberger / servir ses tuiles
Rendu des cartes
Serveur de tuiles
Donnéesgéo.
• Approche la plus flexible
• Les outils existent et sont bien rodés
• Points critiques :
• Scalabilité
• Bande passante
24
Générer / héberger / servir ses tuiles
Mapnik + styles (XML/~CSS)
Apache + mod_tile / TileStache
PostGis
Une chaîne typique :
OSM
• Approche la plus flexible
• Les outils existent et sont bien rodés
• Points critiques :
• Scalabilité
• Bande passante
25
Cloud géographique OSM
• CloudMade, MapBox, GeoFabrik, etc.
• Définition de styles personnalisés
• Serveur de tuiles
• Services annexes
26
API JavaScript libres : du choix !
Modest Maps MapBox API OpenLayersLeafLet
• Base : slippy map
• Variations sur overlays, projections, formats, etc.
27
Services
Faire soi-même ou piocher dans l'écosystème OSM
• Géocodage : Nominatim (OSM / MapQuest)
• Itinéraires : nombreux projets, mais plus délicat !
28
Mobile : le règne des applis et API natives
iOS < 6 : Google Maps ≥ 6 : Apple Maps
WindowsBing/Nokia Maps
Android Google Maps
Kindle (Android)1 : Google Maps 2 : Amazon Maps (Nokia)
29
Les API web ont aussi leur place
• Pensées pour le mobile
• Interfaces tactiles
• Ergonomie inspirée des applis natives
• Support du HiDPI (Retina & co.)
• Toujours utiles
• Web apps
• Firefox OS…
30
Responsive design ?
• Aller plus loin que les CSS
• Contrôles (zoom, boutons, etc)
• Présentation de l'info (popups)
• Favoriser la géolocalisation
• Cartes statiques
• Lien vers applis natives
31
« Responsive cartography » ?
• Des cartes optimisées pour le mobile
• Plus loin : cartographie contextuelle
• Orientation en fonction de la boussole (légendes ?)
• Couleurs en fonction de la luminosité
• Éléments affichés en fonction de la localisation
Limites de l'approche par images pré-générées
32
Vectoriel vs. bitmap : une histoire connue
Avantages
• Flexibilité
• Rendu / zoom
• Métadonnées
• Contrôle par l'utilisateur
Inconvénients
• Charge et rendu en bout de chaîne
• Gestion taille vs. quantité d'information
Taille
Information
Vectoriel
Bitmap
33
Vectoriel vs. bitmap : pour la cartographie
• Projection à la volée
• Vrai zoom continu
• Éléments indépendants
• l10n en bout de chaîne
• Troisième et quatrième dimensions
34
La stratégie des tuiles reste valable
• Gérer la quantité d'information / généralisation
• GeoJSON Tiles (verbeux !)
• Formats plus compacts
• Projets en cours pourLeaflet, OpenLayers, etc.
Mapnik GeoJSON
TileStache GeoJSON
PostGis
OSM
35
Rendu côté client
SVG
• Gestion native, DOM
• Support direct des CSS
• « Vrai » vectoriel
• Mauvaise scalabilité
Canvas
• Dessin en JS
• Language de style spécifique
• Accélération matérielle via WebGL 3D→
36
Google est déjà en avance
• Google Maps en WebGL
• Google Maps for Android
• Plus de distinction
• Maps / Earth
• Maps / StreetView
Bientôt le réglage par défaut ?
37
WebGL Earth
http://www.webglearth.org/
38
OSM Buildings
http://osmbuildings.org/
39
• La 3D, une nouvelle barrière technologique
• Modélisation
• Relevé
• Textures
• Une autre : indoor mapping
Les outils ne sont rien sans les données
40
Approches light / dataviz
On n'a pas toujours besoin de pouvoir afficherla Terre entière à tous les niveaux de zoom
41
MapBox TileMill
• Atelier de design de cartes, axé publication
• Import de couches de données
• Styles CartoCSS
• Interaction, légende
• Exports
• PNG, PDF, SVG
• MapBox / MBTiles
42
Kartograph
• Préparation des données en Python SVG→
• Présentation/projection/manip en JavaScript
43
Globes 3d simplifiés
http://www.chromeexperiments.com/globe
Recommended
