Les nouveaux horizons de la cartographie sur le web. Benjamin Becquet Paris Web 2012

Transcription

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 1;0;1 1;1;1 z=0 ; x=0 ; y=0 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 9

10 Quotas payants : «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, 18 octobre 2012 OpenStreetMap, 2 janvier 2012 Les 2 communes ont fusionné le 1er janvier

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 MapQuest Open Stamen 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 géo. Bande passante 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é PostGis Bande passante 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 6 : Apple Maps Google 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 bout de chaîne Rendu / zoom Gestion taille vs. quantité d'information Métadonnées Contrôle par l'utilisateur Taille Vectoriel 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 Leaflet, OpenLayers, etc. Mapnik GeoJSON PostGis OSM 34

35 Rendu côté client SVG Canvas Gestion native, DOM Dessin en JS Support direct des CSS Language de style spécifique «Vrai» vectoriel 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 37

38 OSM Buildings 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 43

44 44