Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Design graphique

Slide 6

Slide 6 text

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 !

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Nombreux plugins Leaflet

Slide 12

Slide 12 text

Mobile

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Données disponibles

Slide 15

Slide 15 text

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)

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Fonds de plan

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

mapbox.com stamen.com

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Interactions

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Calcul d'itinéraires côté client

Slide 30

Slide 30 text

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/

Slide 31

Slide 31 text

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

3D – à utiliser avec modération

Slide 34

Slide 34 text

Présentation à retrouver : http://makina-corpus.com/blog/societe/presentation-du-petit-dejeuner-sur-les-nouveautes-de-la-cartographie-en-ligne [email protected] www.makina-corpus.com Merci !