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

●
●

Fond de plan trop vu (et pas forcément adapté)

●

 

Pas d'accès aux données (propriétaires)
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
●
●

Plus d'interactivité

●

Déporter les traitements vers l'utilisateur

●

 

Allègement des interfaces

Arrivée du mobile

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

 
2006

2013

 

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

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

Mieux !

→ https://www.mapbox.com/tilemill/gallery
 

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

http://www.caribbeanmaritimetraffic.org/

●

http://cci82.makina-corpus.net/

●

 

Geotrek

http://moodwalkr.makina-corpus.net/

 
Merci !
Avez-vous des questions ?
frederic.bonifas@makina-corpus.com
www.makina-corpus.com
 

 

Atelier "Les nouveautés de la cartographie en ligne"

  • 1.
    Nouvelles tendances en webmappinget données libres   Périgueux, 23/10/2013 Frédéric Bonifas @fbonifas www.makina-corpus.com  
  • 2.
    Makina Corpus ● ● ●   Société deServices 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  
  • 3.
    Aller au-delà deGoogle 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)  
  • 4.
    Un exemple àne pas suivre Nouvel Observateur : L'été médiatique de Manuel Valls    
  • 5.
    OpenStreetMap ? ● Création en2004 (absence de données geographiques libres) ● Données sous licence libre (ODbL) ● Édition collaborative (Wikipedia) → http://www.openstreetmap.org    
  • 6.
    Couverture des donnéesOSM ● Excellente dans les grandes villes ● Variable selon les pays Comparons ! ➔   http://tools.geofabrik.de/mc/  
  • 7.
    Open Data We aredata : Pour un jeu vidéo    
  • 8.
    Évolution du web ● ● Plusd'interactivité ● Déporter les traitements vers l'utilisateur ●   Allègement des interfaces Arrivée du mobile  
  • 9.
    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  
  • 10.
    Allègement des interfaces ● Moinsde 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/ ?  
  • 11.
  • 12.
    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/    
  • 13.
    Avoir son proprestyle - 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  
  • 14.
    Avoir son proprestyle - 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>  
  • 15.
    Avoir son proprestyle - TileMill #roads { line-width:1; line-color:#AA3333; } Mieux ! → https://www.mapbox.com/tilemill/gallery    
  • 16.
    Utiliser des fondsde carte OSM existants Plusieurs fonds librement utilisables    
  • 17.
    Traitements côté client ● Augmentationde 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é...)  
  • 18.
    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/  
  • 19.
    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  
  • 20.
    3D – àutiliser avec modération    
  • 21.
    Utiliser les donnéesOpenStreetMap ● Données et Shapefiles en téléchargement : http://planet.openstreetmap.org/ ➔ http://download.geofabrik.de/ ● Filtrage (Osmosis) ➔ ●   Base de données PostGIS (osm2pgsql)  
  • 22.
    Sur des supportsmobiles ● ●   Android et autres smartphones (en ligne et hors ligne) GPS Garmin (données OpenStreetMap, filtrage, style et autres données)  
  • 23.
  • 24.
    Merci ! Avez-vous desquestions ? frederic.bonifas@makina-corpus.com www.makina-corpus.com