Nous vous avions invité à partager un petit déjeuner pour découvrir les nouvelles tendances en webmapping et les possibilités offertes par les données géographiques libres dont OpenStreetMap. Utilisées habituellement pour calculer des itinéraires ou comme fonds de plan pour afficher des informations, les cartes en ligne sont en pleine révolution grâce à l'arrivée de données géographiques libres. Elles permettent à tout un chacun d'imaginer des applications cartographiques innovantes et inattendues, de personnaliser le style de sa carte et de se passer des solutions techniques lourdes et complexes.

1. Nouvelles tendances en
webmapping et données libres
Toulouse, 12/12/2013
Frédéric Bonifas
@fbonifas
www.makina-corpus.com

2. Makina Corpus
●
●
Société de Services en Logiciels Libres (SSLL), indépendante,
créée en 2001
Domaines d'activité : ingénierie logicielle, applications
métiers innovantes, Web Carto Mobile

3. Un exemple à ne pas suivre
http://tempsreel.nouvelobs.com/politique/20130821.OBS3816/l-ete-mediatique-de-manuel-valls.html

4. Évolution du web
●
●
Plus d'interactivité
●
Déporter les traitements vers l'utilisateur
●
Allègement des interfaces
Arrivée du mobile

5. Design graphique

6. Allègement des interfaces
●
Moins de contenu écrit
●
Design graphique épuré
●
La carte véhicule plus d'informations
●
Toutes les informations connues ne doivent pas forcément
être représentées !

7. Publicité et contrôles trop nombreux
http://fr.mappy.com/

8. Publicité et style de carte pas adapté
http://www.viamichelin.fr/

9. Évolution positive
http://maps.google.fr
2006
2013

10. Visualiser des données géographiques : Leaflet
●
●
Léger (~120 ko)
●
API ultra-simple
●
JS | CSS3 | HTML5
●
Mobile
●
Largement utilisé (OSM, Foursquare, Flickr...)
Puissant !

11. Nombreux plugins Leaflet

12. Mobile

13. Supports mobiles
●
●
Ergonomie (Natif)
●
Petits écrans (Allègement)
●
Tout l'écran est occupé par la carte
●
Nouvelle façon d'interagir (Tactile)
Possibilités offertes par la géolocalisation

14. Données disponibles

15. Aller au-delà de Google Maps
●
Utilisations interdites (mode déconnecté, mise en cache,
géocodage en masse...)
●
●
Fond de plan trop vu (et pas forcément adapté)
●
Pas d'accès aux données (propriétaires)
Usage payant (fort trafic)

16. Explosion des données disponibles
●
●
Ouverture de certaines données par l'IGN
●
Données libres gouvernementales (MNT SRTM ou ASTER)
●
APIs des réseaux sociaux (Twitter)
●
Open data des collectivités
OpenStreetMap

17. OpenStreetMap ?
●
Création en 2004 (absence de données geographiques libres)
●
Base de données mondiale
●
Données sous licence libre (ODbL)
●
Édition collaborative (Wikipedia)
→ http://www.openstreetmap.org

18. Orthophoto libre
http://vuduciel.loire-atlantique.fr/

19. Analyse du territoire et itinéraires
http://moodwalkr.com

20. Fonds de plan

21. Avoir son propre style - MapServer
MAP
NAME "mapfile_1"
EXTENT -180 -90 180 90
LAYER
???
NAME "mp_roads"
TYPE POLYGON
DATA "midi_pyrennees/mp_roads.shp"
CLASS
STYLE
COLOR 20 10 110
WIDTH 2
END
END
END
END

22. Avoir son propre style - GeoServer
<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<NamedLayer>
???
<Name>Simple Roads</Name>
<UserStyle>
<Title>Default Styler for simple road segments</Title>
<Abstract>Light red line, 2px wide</Abstract>
<FeatureTypeStyle>
<Rule>
<Title>Roads</Title>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#AA3333</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>2</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>

23. Avoir son propre style - TileMill
#roads {
line-width:1;
line-color:#AA3333;
}
Mieux !

24. TileMill – charte graphique
http://loir-et-cher-2020.makina-corpus.net

25. mapbox.com
stamen.com

26. TileMill & open data
http://tolosa1680.makina-corpus.com

27. Interactions

28. Traitements côté client
●
Augmentation de la puissance des machines
●
Serveur cartographique de moins en moins indispensable
●
Maturité du JavaScript
●
Interaction avec les données directement dans le navigateur
(UTFGrid, GeoJSON tuilé...)

29. Calcul d'itinéraires côté client

30. En pratique : tuiles vectorielles
●
Stockage aisé (pas de création d'images sur le serveur)
●
Rendu sur le terminal (puissance de calcul suffisante)
➔
http://gijs.github.io/vectorstyling-demo/
➔
➔
OpenStreetMap :
http://openstreetmap.us/~migurski/vector-datasource/
Google Maps : https://www.google.fr/maps/

31. 3D

32. En pratique : 3D
●
OSMBuildings : http://osmbuildings.org
●
Jeux vidéo : http://map.f4-group.com
●
Montagne :
http://thematicmapping.org/playground/webgl/terrain/texture/jotunheimen.html
●
HERE :
http://here.com/41.3907764,2.1650211,19.23,0,54,3d.day

33. 3D – à utiliser avec modération

34. Merci !
Présentation à retrouver :
http://makina-corpus.com/blog/societe/presentation-du-petit-dejeuner-sur-les-nouveautes-de-la-cartographie-en-ligne
frederic.bonifas@makina-corpus.com
www.makina-corpus.com