Les nouveaux horizonsde la cartographie sur le web                         Benjamin Becquet                          Paris...
Un peu dhistoire (-géo) : il y a 10 ansGéomatique• Acteurs historiques• Fort écosystème libre,  mais données fermées• Stan...
Publier des cartes sur son site ~ 2002• Pas dAPI accessibles• Travail de cartographe  + graphiste• Ou usines à gaz  propri...
2005 : Google Maps• Principes « à la Google »      • Utilisation des atouts et standards du web      • Interface simple + ...
Pyramides de tuiles                                               1;0;0   1;1;0          z=0 ; x=0 ; y=0                  ...
Aujourdhui• Standard de facto de la cartographie web• « In 50 years, Google will be the self-driving car  company […] and,...
Google Maps JavaScript API• Carte multi-couches + interaction• Overlays• Services haut niveau = accès à dautres API Google...
Styled maps• Outil puissant, sous-employé      • Mise en valeur sélective des éléments      • Lisibilité / Accessibilité  ...
http://www.mapofthedead.com/map/                                   9
Quotas payants• 2005 → 2011 : « gratuit, mais… »• Octobre 2011 : annonce du modèle payant• Juin 2012 : grosse réduction• «...
Dautres raisons de sen passer• Nombreuses restrictions dutilisation      • Sites payants, intra/extranets      • Embarqué,...
Des régions « oubliées »Exemple : le centre ville de Sarajevo                                        12
Mercator pas toujours adaptéCartographier une mission polaire ?                                      13
Les fails ne sont pas réservés à Apple                                         14
Généralisation / l10n / typographie :(                                         15
Alternatives propriétaires• Bing Maps, Nokia Maps, MapQuest, etc.• Solutions plus spécifiques / localesGlobalement les mêm...
OpenStreetMap• Base de données collaborative• Licence libre (CC-BY-SA puis OdbL)• « Le WikiPedia des cartes »• Écosystème ...
Couverture  ?• Variable selon les pays• Globalement excellente dans les grandes villes                                    ...
Richesse  ?• Approche exhaustive « cartographier le monde »• Structure [clef=valeur] extensible                           ...
Fraîcheur ?     Google Maps,            OpenStreetMap,    18 octobre 2012           2 janvier 2012          Les 2 communes...
#switch2osm en pratique• Reprise du modèle de Google Maps• Choix en fonction du niveau de contrôle vouluPile existante    ...
Des serveurs de tuiles ouvertsopenstreetmap.orghttp://c.tile.openstreetmap.org/16/33179/22532.pngMapQuest Openhttp://otile...
Générer / héberger / servir ses tuiles                         • Approche la plus flexible     Serveur de tuiles   • Les o...
Générer / héberger / servir ses tuiles  Une chaîne typique :            • Approche la plus flexible Apache + mod_tile / Ti...
Cloud géographique OSM• CloudMade, MapBox, GeoFabrik, etc.• Définition de styles personnalisés• Serveur de tuiles• Service...
API JavaScript libres : du choix !• Base : slippy map• Variations sur overlays, projections, formats, etc.Modest Maps     ...
ServicesFaire soi-même ou piocher dans lécosystème OSM• Géocodage : Nominatim (OSM / MapQuest)• Itinéraires : nombreux pro...
Mobile : le règne des applis et API natives           iOS                    Android           < 6 : Google Maps      Goog...
Les API web ont aussi leur place• Pensées pour le mobile      • Interfaces tactiles      • Ergonomie inspirée des applis n...
Responsive design ?• Aller plus loin que les CSS      • Contrôles (zoom, boutons, etc)      • Présentation de linfo (popup...
« Responsive cartography » ?• Des cartes optimisées pour le mobile• Plus loin : cartographie contextuelle      • Orientati...
Vectoriel vs. bitmap : une histoire connueAvantages                  Inconvénients• Flexibilité              • Charge et r...
Vectoriel vs. bitmap : pour la cartographie• Projection à la volée• Vrai zoom continu• Éléments indépendants• l10n en bout...
La stratégie des tuiles reste valable• Gérer la quantité dinformation / généralisation• GeoJSON Tiles (verbeux !)         ...
Rendu côté clientSVG                        Canvas• Gestion native, DOM      • Dessin en JS• Support direct des CSS   • La...
Google est déjà en avance• Google Maps en WebGL• Google Maps for Android• Plus de distinction       • Maps / Earth       •...
WebGL Earth http://www.webglearth.org/   37
OSM Buildings http://osmbuildings.org/   38
Les outils ne sont rien sans les données• La 3D, une nouvelle barrière technologique      • Modélisation      • Relevé    ...
Approches light / datavizOn na pas toujours besoin de pouvoir afficherla Terre entière à tous les niveaux de zoom         ...
MapBox TileMill• Atelier de design de cartes, axé publication      • Import de couches de données      • Styles CartoCSS  ...
Kartograph• Préparation des données en Python → SVG• Présentation/projection/manip en JavaScript                          ...
Globes 3d simplifiés http://www.chromeexperiments.com/globe   43
Merci !                        @Nimwendil          benjamin.becquet@gmail.com                                   44
Upcoming SlideShare
Loading in …5
×

Paris Web 2012 - Les nouveaux horizons de la cartographie sur le Web

946 views
847 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
946
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Paris Web 2012 - Les nouveaux horizons de la cartographie sur le Web

  1. 1. Les nouveaux horizonsde la cartographie sur le web Benjamin Becquet Paris Web 2012
  2. 2. Un peu dhistoire (-géo) : il y a 10 ansGéomatique• Acteurs historiques• Fort écosystème libre, mais données fermées• Standards lourds • Interfaces pauvres et lentesLe web de 2002… • Interactivité = Flash/Java 2
  3. 3. Publier des cartes sur son site ~ 2002• Pas dAPI accessibles• Travail de cartographe + graphiste• Ou usines à gaz propriétairesBarrière technologique Le Cartographe, Vermeer. 3
  4. 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. 5. Pyramides de tuiles 1;0;0 1;1;0 z=0 ; x=0 ; y=0 1;0;1 1;1;1http://mts0.google.com/vt/&z={Z}&x={X}&y={Y} 5
  6. 6. Aujourdhui• 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 »• LAPI la plus utilisée sur le web, toutes confondues 6
  7. 7. Google Maps JavaScript API• Carte multi-couches + interaction• Overlays• Services haut niveau = accès à dautres API Google • Géocodage + POIs • Itinéraires, transports en commun • StreetView • Fusion Tables 7
  8. 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. 9. http://www.mapofthedead.com/map/ 9
  10. 10. Quotas payants• 2005 → 2011 : « gratuit, mais… »• Octobre 2011 : annonce du modèle payant• Juin 2012 : grosse réduction• « 0,35% des sites » / Business APICatalyseur : « Est-ce la bonne/seule solution ? » 10
  11. 11. Dautres raisons de sen passer• Nombreuses restrictions dutilisation • Sites payants, intra/extranets • Embarqué, suivi, navigation • Fonds de carte sans lAPI• Épée de Damoclès (tarifs ? publicités ?)• Image / concurrence / philosophie• Pas daccès aux données 11
  12. 12. Des régions « oubliées »Exemple : le centre ville de Sarajevo 12
  13. 13. Mercator pas toujours adaptéCartographier une mission polaire ? 13
  14. 14. Les fails ne sont pas réservés à Apple 14
  15. 15. Généralisation / l10n / typographie :( 15
  16. 16. Alternatives propriétaires• Bing Maps, Nokia Maps, MapQuest, etc.• Solutions plus spécifiques / localesGlobalement les mêmes services et les mêmes contraintes, liées aux données 16
  17. 17. OpenStreetMap• Base de données collaborative• Licence libre (CC-BY-SA puis OdbL)• « Le WikiPedia des cartes »• Écosystème doutils libresMouvement #switch2osm 17
  18. 18. Couverture  ?• Variable selon les pays• Globalement excellente dans les grandes villes 18
  19. 19. Richesse  ?• Approche exhaustive « cartographier le monde »• Structure [clef=valeur] extensible 19
  20. 20. Fraîcheur ? Google Maps, OpenStreetMap, 18 octobre 2012 2 janvier 2012 Les 2 communes ont fusionné le 1er janvier 2012 20
  21. 21. #switch2osm en pratique• Reprise du modèle de Google Maps• Choix en fonction du niveau de contrôle vouluPile existante Approche « à la carte »• MapQuest Open • Tuiles • API JavaScript • Services 21
  22. 22. Des serveurs de tuiles ouvertsopenstreetmap.orghttp://c.tile.openstreetmap.org/16/33179/22532.pngMapQuest Openhttp://otile4.mqcdn.com/tiles/1.0.0/osm/16/33179/22532.pngStamenhttp://tile.stamen.com/watercolor/16/33179/22532.jpgGaranties ? 22
  23. 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. 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. 25. Cloud géographique OSM• CloudMade, MapBox, GeoFabrik, etc.• Définition de styles personnalisés• Serveur de tuiles• Services annexes 25
  26. 26. API JavaScript libres : du choix !• Base : slippy map• Variations sur overlays, projections, formats, etc.Modest Maps MapBox API LeafLet OpenLayers 26
  27. 27. ServicesFaire 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. 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. 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. 30. Responsive design ?• Aller plus loin que les CSS • Contrôles (zoom, boutons, etc) • Présentation de linfo (popups) • Favoriser la géolocalisation • Cartes statiques • Lien vers applis natives 30
  31. 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 localisationLimites de lapproche par images pré-générées 31
  32. 32. Vectoriel vs. bitmap : une histoire connueAvantages Inconvénients• Flexibilité • Charge et rendu en• Rendu / zoom bout de chaîne• Métadonnées • Gestion taille vs. quantité dinformation• Contrôle par Taille Vectoriel lutilisateur Bitmap Information 32
  33. 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. 34. La stratégie des tuiles reste valable• Gérer la quantité dinformation / généralisation• GeoJSON Tiles (verbeux !) TileStache GeoJSON• Formats plus compacts• Projets en cours pour Mapnik GeoJSON Leaflet, OpenLayers, etc. PostGis OSM 34
  35. 35. Rendu côté clientSVG 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. 36. Google est déjà en avance• Google Maps en WebGL• Google Maps for Android• Plus de distinction • Maps / Earth • Maps / StreetViewBientôt le réglage par défaut ? 36
  37. 37. WebGL Earth http://www.webglearth.org/ 37
  38. 38. OSM Buildings http://osmbuildings.org/ 38
  39. 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. 40. Approches light / datavizOn na pas toujours besoin de pouvoir afficherla Terre entière à tous les niveaux de zoom 40
  41. 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. 42. Kartograph• Préparation des données en Python → SVG• Présentation/projection/manip en JavaScript 42
  43. 43. Globes 3d simplifiés http://www.chromeexperiments.com/globe 43
  44. 44. Merci ! @Nimwendil benjamin.becquet@gmail.com 44

×