Nouvelles tendances en webmapping et données libres Périgueux, 23/10/2013 Frédéric Bonifas @fbonifas www.makina-corpus.com

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 ● Toulouse, Nantes et Tunis

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

Un exemple à ne pas suivre Nouvel Observateur : L'été médiatique de Manuel Valls

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

Couverture des données OSM ● Excellente dans les grandes villes ● Variable selon les pays Comparons ! ➔ http://tools.geofabrik.de/mc/

Open Data We are data : Pour un jeu vidéo

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

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

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 ! ➔ http://fr.mappy.com/ ? ➔ http://www.viamichelin.fr/ ?

2013 2006

Visualiser des données ● Leaflet.js : Bilbiothèque javascript cartographique légère – http://leafletjs.com/plugins.html ● D3.js : – http://mbostock.github.io/d3/talk/20111018/choropleth.html – http://bl.ocks.org/mbostock/3711652 ● Kartograph : – http://kartograph.org/showcase/choropleth/ – http://kartograph.org/showcase/symbols/

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

Avoir son propre style - GeoServer Simple Roads Default Styler for simple road segments Light red line, 2px wide Roads #AA3333 2 ???

Avoir son propre style - TileMill #roads { line-width:1; line-color:#AA3333; } →https://www.mapbox.com/tilemill/gallery Mieux !

Utiliser des fonds de carte OSM existants Plusieurs fonds librement utilisables

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é...)

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/

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

3D – à utiliser avec modération

Utiliser les données OpenStreetMap ● Données et Shapefiles en téléchargement : ➔ http://planet.openstreetmap.org/ ➔ http://download.geofabrik.de/ ● Filtrage (Osmosis) ● Base de données PostGIS (osm2pgsql)

Sur des supports mobiles ● Android et autres smartphones (en ligne et hors ligne) ● GPS Garmin (données OpenStreetMap, filtrage, style et autres données)

Chez Makina Corpus ● Geotrek ● http://www.caribbeanmaritimetraffic.org/ ● http://cci82.makina-corpus.net/ ● http://moodwalkr.makina-corpus.net/

[email protected] www.makina-corpus.com Merci ! Avez-vous des questions ?