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

44

Merci !

@Nimwendil

benjamin.becquet@gmail.com