État actuel de la cartographie sur le web, encore dominée par l'offre complète de Google Maps depuis son lancement en 2005. Mise en évidence des alternatives basées sur les données OpenStreetMap et l'écosystème actif qui les entoure. État des lieux sur les plateformes mobiles/tactiles. Émergence d'un nouveau modèle viable de cartographie vectorielle, dont la 3D est une des nombreuses applications. Rapide présentation d'approches plus locales ou plus orientées vers la visualisation de données. Présenté pendant la conférence Paris Web 2012.

1. Les nouveaux horizons
de la cartographie sur le web
Benjamin Becquet
Paris 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
• Interfaces pauvres et lentes
Le web de 2002… • Interactivité = Flash/Java
2

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.
3

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
• « Tuiles » de taille fixe
4

5. Pyramides de tuiles
1;0;0 1;1;0
z=0 ; x=0 ; y=0
1;0;1 1;1;1
http://mts0.google.com/vt/&z={Z}&x={X}&y={Y}
5

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
6

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
7

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.
8

9. http://www.mapofthedead.com/map/
9

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 ? »
10

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
11

12. Des régions « oubliées »
Exemple : le centre ville de Sarajevo
12

13. Mercator pas toujours adapté
Cartographier une mission polaire ?
13

14. Les fails ne sont pas réservés à Apple
14

15. Généralisation / l10n / typographie :(
15

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
16

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
17

18. Couverture ?
• Variable selon les pays
• Globalement excellente dans les grandes villes
18

19. Richesse ?
• Approche exhaustive « cartographier le monde »
• Structure [clef=valeur] extensible
19

20. Fraîcheur ?
Google Maps, OpenStreetMap,
18 octobre 2012 2 janvier 2012
Les 2 communes ont fusionné
le 1er janvier 2012 20

21. #switch2osm en pratique
• Reprise du modèle de Google Maps
• Choix en fonction du niveau de contrôle voulu
Pile existante Approche « à la carte »
• MapQuest Open • Tuiles
• API JavaScript
• Services
21

22. Des serveurs de tuiles ouverts
openstreetmap.org
http://c.tile.openstreetmap.org/16/33179/22532.png
MapQuest Open
http://otile4.mqcdn.com/tiles/1.0.0/osm/16/33179/22532.png
Stamen
http://tile.stamen.com/watercolor/16/33179/22532.jpg
Garanties ?
22

23. Générer / héberger / servir ses tuiles
• Approche la plus flexible
Serveur de tuiles • Les outils existent et sont
bien rodés
Rendu des cartes • Points critiques :
• Scalabilité
Données • Bande passante
géo.
23

24. Générer / héberger / servir ses tuiles
Une chaîne typique : • Approche la plus flexible
Apache + mod_tile / TileStache • Les outils existent et sont
bien rodés
Mapnik + styles (XML/~CSS) • Points critiques :
• Scalabilité
• Bande passante
PostGis
OSM
24

25. Cloud géographique OSM
• CloudMade, MapBox, GeoFabrik, etc.
• Définition de styles personnalisés
• Serveur de tuiles
• Services annexes
25

26. API JavaScript libres : du choix !
• Base : slippy map
• Variations sur overlays, projections, formats, etc.
Modest Maps MapBox API LeafLet OpenLayers
26

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 !
27

28. Mobile : le règne des applis et API natives
iOS Android
< 6 : Google Maps Google Maps
≥ 6 : Apple Maps
Windows Kindle (Android)
Bing/Nokia Maps 1 : Google Maps
2 : Amazon Maps (Nokia)
28

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…
29

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
30

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
31

32. Vectoriel vs. bitmap : une histoire connue
Avantages Inconvénients
• Flexibilité • Charge et rendu en
• Rendu / zoom bout de chaîne
• Métadonnées • Gestion taille vs.
quantité d'information
• Contrôle par Taille Vectoriel
l'utilisateur
Bitmap
Information
32

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
33

34. La stratégie des tuiles reste valable
• Gérer la quantité d'information / généralisation
• GeoJSON Tiles (verbeux !)
TileStache GeoJSON
• Formats plus compacts
• Projets en cours pour Mapnik GeoJSON
Leaflet, OpenLayers, etc.
PostGis
OSM
34

35. Rendu côté client
SVG Canvas
• Gestion native, DOM • Dessin en JS
• Support direct des CSS • Language de style
• « Vrai » vectoriel spécifique
• Mauvaise scalabilité • Accélération matérielle
via WebGL → 3D
35

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 ?
36

37. WebGL Earth
http://www.webglearth.org/ 37

38. OSM Buildings
http://osmbuildings.org/ 38

39. Les outils ne sont rien sans les données
• La 3D, une nouvelle barrière technologique
• Modélisation
• Relevé
• Textures
• Une autre : indoor mapping
39

40. Approches light / dataviz
On n'a pas toujours besoin de pouvoir afficher
la Terre entière à tous les niveaux de zoom
40

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
41

42. Kartograph
• Préparation des données en Python → SVG
• Présentation/projection/manip en JavaScript
42

43. Globes 3d simplifiés
http://www.chromeexperiments.com/globe 43

44. Merci !
@Nimwendil
benjamin.becquet@gmail.com
44