SlideShare une entreprise Scribd logo
Nouvelles tendances en
webmapping et données libres

 

Toulouse, 12/12/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

 
Un exemple à ne pas suivre

http://tempsreel.nouvelobs.com/politique/20130821.OBS3816/l-ete-mediatique-de-manuel-valls.html

 

 
Évolution du web
●
●

Plus d'interactivité

●

Déporter les traitements vers l'utilisateur

●

 

Allègement des interfaces

Arrivée du mobile

 
Design graphique
 

 
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 !
 
Publicité et contrôles trop nombreux
http://fr.mappy.com/

 

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

 

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

2006

2013
 

 
Visualiser des données géographiques : Leaflet
●
●

Léger (~120 ko)

●

API ultra-simple

●

JS | CSS3 | HTML5

●

Mobile

●

 

Largement utilisé (OSM, Foursquare, Flickr...)

Puissant !
 
Nombreux plugins Leaflet

 

 
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
 
Données disponibles
 

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

 

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

 

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

 

 
Fonds de plan
 

 
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 !
 
TileMill – charte graphique
http://loir-et-cher-2020.makina-corpus.net

 

 
mapbox.com
stamen.com

 

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

 

 
Interactions
 

 
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é...)
 
Calcul d'itinéraires côté client

 

 
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/
 
3D
 

 
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

 

 
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
 

 

Contenu connexe

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

La cartographie Libre avec OpenStreetMap
La cartographie Libre avec OpenStreetMapLa cartographie Libre avec OpenStreetMap
La cartographie Libre avec OpenStreetMap
Florian Lainez
 
1/5 Osm 20141106-l1.1-présentation
1/5 Osm 20141106-l1.1-présentation1/5 Osm 20141106-l1.1-présentation
1/5 Osm 20141106-l1.1-présentation
Frédéric Rodrigo
 
2009 06 04 OpenStreetMap Presentation Geoperspectives09
2009 06 04 OpenStreetMap Presentation Geoperspectives092009 06 04 OpenStreetMap Presentation Geoperspectives09
2009 06 04 OpenStreetMap Presentation Geoperspectives09
fvanderbiest
 
Cdl2013 utiliser open streetmap by cyrille37
Cdl2013   utiliser open streetmap by cyrille37Cdl2013   utiliser open streetmap by cyrille37
Cdl2013 utiliser open streetmap by cyrille37
OpenStreetMap, Artefacts.coop
 
L'Open GeoData en France - Romain Buchaut Crige Paca (F)
L'Open GeoData en France - Romain Buchaut Crige Paca (F)L'Open GeoData en France - Romain Buchaut Crige Paca (F)
L'Open GeoData en France - Romain Buchaut Crige Paca (F)
OpenGeoDataItalia
 
2011-12-12 OpenData, mode d'emploi - OpenStreetMap au CERTU, Lyon
2011-12-12 OpenData, mode d'emploi - OpenStreetMap au CERTU, Lyon2011-12-12 OpenData, mode d'emploi - OpenStreetMap au CERTU, Lyon
2011-12-12 OpenData, mode d'emploi - OpenStreetMap au CERTU, Lyon
fvanderbiest
 
Pres open-data-api-numerique-nantes-sept15
Pres open-data-api-numerique-nantes-sept15Pres open-data-api-numerique-nantes-sept15
Pres open-data-api-numerique-nantes-sept15
NFR21
 
Presentation OpenStreetMap (OSM) au Pole Numerique de la Drome le 06 Juillet ...
Presentation OpenStreetMap (OSM) au Pole Numerique de la Drome le 06 Juillet ...Presentation OpenStreetMap (OSM) au Pole Numerique de la Drome le 06 Juillet ...
Presentation OpenStreetMap (OSM) au Pole Numerique de la Drome le 06 Juillet ...
quicky_osm
 
Osm 20141112-montesquieu
Osm 20141112-montesquieuOsm 20141112-montesquieu
Osm 20141112-montesquieu
Frédéric Rodrigo
 
Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)
Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)
Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)
ACSG - Section Montréal
 
Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)
Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)
Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)
ACSG Section Montréal
 
Le trio gagnant d'IGO : communauté, mise en commun et services web (Géomatiqu...
Le trio gagnant d'IGO : communauté, mise en commun et services web (Géomatiqu...Le trio gagnant d'IGO : communauté, mise en commun et services web (Géomatiqu...
Le trio gagnant d'IGO : communauté, mise en commun et services web (Géomatiqu...
igouverte
 
#HackFrancophonie @Etalab @CFImedias - Projet Espace OSM Francophone #ProjetE...
#HackFrancophonie @Etalab @CFImedias - Projet Espace OSM Francophone #ProjetE...#HackFrancophonie @Etalab @CFImedias - Projet Espace OSM Francophone #ProjetE...
#HackFrancophonie @Etalab @CFImedias - Projet Espace OSM Francophone #ProjetE...
chavent nicolas
 
Web 2.0 - GTI780 & MTI780 - ETS - A08
Web 2.0 - GTI780 & MTI780 - ETS - A08Web 2.0 - GTI780 & MTI780 - ETS - A08
Web 2.0 - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
Chef de Projet - Ergonome (UX Design) - Architecte de l'Information
Chef de Projet - Ergonome (UX Design) - Architecte de l'InformationChef de Projet - Ergonome (UX Design) - Architecte de l'Information
Chef de Projet - Ergonome (UX Design) - Architecte de l'Information
Wierzbicki Nicolas
 
Chef de Projet - Ergonome (UX Design) - Architecte de l'Information
Chef de Projet - Ergonome (UX Design) - Architecte de l'InformationChef de Projet - Ergonome (UX Design) - Architecte de l'Information
Chef de Projet - Ergonome (UX Design) - Architecte de l'Information
Wierzbicki Nicolas
 
Chef de Projet - Ergonome (UX Design) - Architecte de l'Information
Chef de Projet - Ergonome (UX Design) - Architecte de l'InformationChef de Projet - Ergonome (UX Design) - Architecte de l'Information
Chef de Projet - Ergonome (UX Design) - Architecte de l'Information
Wierzbicki Nicolas
 
OpenStreetMap - Allons cartographier le monde - Fontenay le Comte
OpenStreetMap - Allons cartographier le monde - Fontenay le ComteOpenStreetMap - Allons cartographier le monde - Fontenay le Comte
OpenStreetMap - Allons cartographier le monde - Fontenay le Comte
Frédéric Rodrigo
 
Futur des Maps lafrenchmobile Octobre 2013
Futur des Maps  lafrenchmobile Octobre 2013Futur des Maps  lafrenchmobile Octobre 2013
Futur des Maps lafrenchmobile Octobre 2013
servicesmobiles.fr
 
Journée de la géomatique (GIS Day) du 18 novembre 2009 - Conférence d'ouvertu...
Journée de la géomatique (GIS Day) du 18 novembre 2009 - Conférence d'ouvertu...Journée de la géomatique (GIS Day) du 18 novembre 2009 - Conférence d'ouvertu...
Journée de la géomatique (GIS Day) du 18 novembre 2009 - Conférence d'ouvertu...
BALIZ
 

Similaire à Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre (20)

La cartographie Libre avec OpenStreetMap
La cartographie Libre avec OpenStreetMapLa cartographie Libre avec OpenStreetMap
La cartographie Libre avec OpenStreetMap
 
1/5 Osm 20141106-l1.1-présentation
1/5 Osm 20141106-l1.1-présentation1/5 Osm 20141106-l1.1-présentation
1/5 Osm 20141106-l1.1-présentation
 
2009 06 04 OpenStreetMap Presentation Geoperspectives09
2009 06 04 OpenStreetMap Presentation Geoperspectives092009 06 04 OpenStreetMap Presentation Geoperspectives09
2009 06 04 OpenStreetMap Presentation Geoperspectives09
 
Cdl2013 utiliser open streetmap by cyrille37
Cdl2013   utiliser open streetmap by cyrille37Cdl2013   utiliser open streetmap by cyrille37
Cdl2013 utiliser open streetmap by cyrille37
 
L'Open GeoData en France - Romain Buchaut Crige Paca (F)
L'Open GeoData en France - Romain Buchaut Crige Paca (F)L'Open GeoData en France - Romain Buchaut Crige Paca (F)
L'Open GeoData en France - Romain Buchaut Crige Paca (F)
 
2011-12-12 OpenData, mode d'emploi - OpenStreetMap au CERTU, Lyon
2011-12-12 OpenData, mode d'emploi - OpenStreetMap au CERTU, Lyon2011-12-12 OpenData, mode d'emploi - OpenStreetMap au CERTU, Lyon
2011-12-12 OpenData, mode d'emploi - OpenStreetMap au CERTU, Lyon
 
Pres open-data-api-numerique-nantes-sept15
Pres open-data-api-numerique-nantes-sept15Pres open-data-api-numerique-nantes-sept15
Pres open-data-api-numerique-nantes-sept15
 
Presentation OpenStreetMap (OSM) au Pole Numerique de la Drome le 06 Juillet ...
Presentation OpenStreetMap (OSM) au Pole Numerique de la Drome le 06 Juillet ...Presentation OpenStreetMap (OSM) au Pole Numerique de la Drome le 06 Juillet ...
Presentation OpenStreetMap (OSM) au Pole Numerique de la Drome le 06 Juillet ...
 
Osm 20141112-montesquieu
Osm 20141112-montesquieuOsm 20141112-montesquieu
Osm 20141112-montesquieu
 
Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)
Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)
Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)
 
Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)
Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)
Act 00071 le trio gagnang de l'infrastructure géomatique ouverte (igo)
 
Le trio gagnant d'IGO : communauté, mise en commun et services web (Géomatiqu...
Le trio gagnant d'IGO : communauté, mise en commun et services web (Géomatiqu...Le trio gagnant d'IGO : communauté, mise en commun et services web (Géomatiqu...
Le trio gagnant d'IGO : communauté, mise en commun et services web (Géomatiqu...
 
#HackFrancophonie @Etalab @CFImedias - Projet Espace OSM Francophone #ProjetE...
#HackFrancophonie @Etalab @CFImedias - Projet Espace OSM Francophone #ProjetE...#HackFrancophonie @Etalab @CFImedias - Projet Espace OSM Francophone #ProjetE...
#HackFrancophonie @Etalab @CFImedias - Projet Espace OSM Francophone #ProjetE...
 
Web 2.0 - GTI780 & MTI780 - ETS - A08
Web 2.0 - GTI780 & MTI780 - ETS - A08Web 2.0 - GTI780 & MTI780 - ETS - A08
Web 2.0 - GTI780 & MTI780 - ETS - A08
 
Chef de Projet - Ergonome (UX Design) - Architecte de l'Information
Chef de Projet - Ergonome (UX Design) - Architecte de l'InformationChef de Projet - Ergonome (UX Design) - Architecte de l'Information
Chef de Projet - Ergonome (UX Design) - Architecte de l'Information
 
Chef de Projet - Ergonome (UX Design) - Architecte de l'Information
Chef de Projet - Ergonome (UX Design) - Architecte de l'InformationChef de Projet - Ergonome (UX Design) - Architecte de l'Information
Chef de Projet - Ergonome (UX Design) - Architecte de l'Information
 
Chef de Projet - Ergonome (UX Design) - Architecte de l'Information
Chef de Projet - Ergonome (UX Design) - Architecte de l'InformationChef de Projet - Ergonome (UX Design) - Architecte de l'Information
Chef de Projet - Ergonome (UX Design) - Architecte de l'Information
 
OpenStreetMap - Allons cartographier le monde - Fontenay le Comte
OpenStreetMap - Allons cartographier le monde - Fontenay le ComteOpenStreetMap - Allons cartographier le monde - Fontenay le Comte
OpenStreetMap - Allons cartographier le monde - Fontenay le Comte
 
Futur des Maps lafrenchmobile Octobre 2013
Futur des Maps  lafrenchmobile Octobre 2013Futur des Maps  lafrenchmobile Octobre 2013
Futur des Maps lafrenchmobile Octobre 2013
 
Journée de la géomatique (GIS Day) du 18 novembre 2009 - Conférence d'ouvertu...
Journée de la géomatique (GIS Day) du 18 novembre 2009 - Conférence d'ouvertu...Journée de la géomatique (GIS Day) du 18 novembre 2009 - Conférence d'ouvertu...
Journée de la géomatique (GIS Day) du 18 novembre 2009 - Conférence d'ouvertu...
 

Plus de Makina Corpus

Happy hacking with Plone
Happy hacking with PloneHappy hacking with Plone
Happy hacking with Plone
Makina Corpus
 
Développer des applications mobiles avec phonegap
Développer des applications mobiles avec phonegapDévelopper des applications mobiles avec phonegap
Développer des applications mobiles avec phonegap
Makina Corpus
 
Running a Plone product on Substance D
Running a Plone product on Substance DRunning a Plone product on Substance D
Running a Plone product on Substance D
Makina Corpus
 
Why CMS will not die
Why CMS will not dieWhy CMS will not die
Why CMS will not die
Makina Corpus
 
Publier vos données sur le Web - Forum TIC de l'ATEN 2014
Publier vos données sur le Web -  Forum TIC de l'ATEN 2014Publier vos données sur le Web -  Forum TIC de l'ATEN 2014
Publier vos données sur le Web - Forum TIC de l'ATEN 2014
Makina Corpus
 
Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
Créez votre propre fond de plan à partir de données OSM en utilisant TileMillCréez votre propre fond de plan à partir de données OSM en utilisant TileMill
Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
Makina Corpus
 
Team up Django and Web mapping - DjangoCon Europe 2014
Team up Django and Web mapping - DjangoCon Europe 2014Team up Django and Web mapping - DjangoCon Europe 2014
Team up Django and Web mapping - DjangoCon Europe 2014
Makina Corpus
 
Petit déjeuner "Les bases de la cartographie sur le Web"
Petit déjeuner "Les bases de la cartographie sur le Web"Petit déjeuner "Les bases de la cartographie sur le Web"
Petit déjeuner "Les bases de la cartographie sur le Web"
Makina Corpus
 
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...
Makina Corpus
 
CoDe, le programme de développement d'applications mobiles de Makina Corpus
CoDe, le programme de développement d'applications mobiles de Makina Corpus CoDe, le programme de développement d'applications mobiles de Makina Corpus
CoDe, le programme de développement d'applications mobiles de Makina Corpus
Makina Corpus
 
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...
Makina Corpus
 
Alternatives libres à Google Maps
Alternatives libres à Google MapsAlternatives libres à Google Maps
Alternatives libres à Google Maps
Makina Corpus
 
Importing Wikipedia in Plone
Importing Wikipedia in PloneImporting Wikipedia in Plone
Importing Wikipedia in Plone
Makina Corpus
 
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.
Makina Corpus
 
Geotrek
GeotrekGeotrek
Geotrek
Makina Corpus
 
Plomino
Plomino Plomino
Plomino
Makina Corpus
 
Des cartes d'un autre monde - DjangoCong 2012
Des cartes d'un autre monde - DjangoCong 2012Des cartes d'un autre monde - DjangoCong 2012
Des cartes d'un autre monde - DjangoCong 2012
Makina Corpus
 

Plus de Makina Corpus (17)

Happy hacking with Plone
Happy hacking with PloneHappy hacking with Plone
Happy hacking with Plone
 
Développer des applications mobiles avec phonegap
Développer des applications mobiles avec phonegapDévelopper des applications mobiles avec phonegap
Développer des applications mobiles avec phonegap
 
Running a Plone product on Substance D
Running a Plone product on Substance DRunning a Plone product on Substance D
Running a Plone product on Substance D
 
Why CMS will not die
Why CMS will not dieWhy CMS will not die
Why CMS will not die
 
Publier vos données sur le Web - Forum TIC de l'ATEN 2014
Publier vos données sur le Web -  Forum TIC de l'ATEN 2014Publier vos données sur le Web -  Forum TIC de l'ATEN 2014
Publier vos données sur le Web - Forum TIC de l'ATEN 2014
 
Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
Créez votre propre fond de plan à partir de données OSM en utilisant TileMillCréez votre propre fond de plan à partir de données OSM en utilisant TileMill
Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
 
Team up Django and Web mapping - DjangoCon Europe 2014
Team up Django and Web mapping - DjangoCon Europe 2014Team up Django and Web mapping - DjangoCon Europe 2014
Team up Django and Web mapping - DjangoCon Europe 2014
 
Petit déjeuner "Les bases de la cartographie sur le Web"
Petit déjeuner "Les bases de la cartographie sur le Web"Petit déjeuner "Les bases de la cartographie sur le Web"
Petit déjeuner "Les bases de la cartographie sur le Web"
 
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...
 
CoDe, le programme de développement d'applications mobiles de Makina Corpus
CoDe, le programme de développement d'applications mobiles de Makina Corpus CoDe, le programme de développement d'applications mobiles de Makina Corpus
CoDe, le programme de développement d'applications mobiles de Makina Corpus
 
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...
 
Alternatives libres à Google Maps
Alternatives libres à Google MapsAlternatives libres à Google Maps
Alternatives libres à Google Maps
 
Importing Wikipedia in Plone
Importing Wikipedia in PloneImporting Wikipedia in Plone
Importing Wikipedia in Plone
 
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.
 
Geotrek
GeotrekGeotrek
Geotrek
 
Plomino
Plomino Plomino
Plomino
 
Des cartes d'un autre monde - DjangoCong 2012
Des cartes d'un autre monde - DjangoCong 2012Des cartes d'un autre monde - DjangoCong 2012
Des cartes d'un autre monde - DjangoCong 2012
 

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

  • 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  
  • 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/    
  • 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 !  
  • 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  
  • 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    
  • 19. Analyse du territoire et itinéraires http://moodwalkr.com    
  • 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    
  • 26. TileMill & open data http://tolosa1680.makina-corpus.com    
  • 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é...)  
  • 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/  
  • 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