Slide 1
Slide 1 text
Publier vos données
sur le Web
Forum TIC de l'ATEN 2014
Mathieu Leplatre
@leplatrem
www.makina-corpus.com
Slide 2
Slide 2 text
Sommaire...
●
Fondamentaux et stratégie
●
Web mapping
●
Architecture et formats
●
Outils pour la publication
Slide 3
Slide 3 text
Fondamentaux et stratégie
Slide 4
Slide 4 text
Ex. architecture OGC
Slide 5
Slide 5 text
Web Server
Browser
Ex. architecture carto
Slide 6
Slide 6 text
Identifier vos besoins
●
Raconter une histoire (joli, concis)
●
Valoriser votre activité (ludique, simple)
●
Présenter un résultat (efficace, optimisé)
●
Partager des données (collaboratif)
●
Outil universel = impossible.
Slide 7
Slide 7 text
Identifier vos cibles
●
Internautes ≠ mobinautes
●
Géomaticiens ≠ grand public
●
Scientifiques ≠ grand public
●
Contributeurs ≠ visiteurs
●
Tout le monde = personne.
Slide 8
Slide 8 text
Stratégie
Pour chaque besoin – cible :
●
Trouver les compromis (précision, rapidité)
●
Choisir les bons outils (« Unix philosophy »)
●
Publier vite, publier souvent (en continu)
●
Outils simples et légers (Libre)
●
Respecter les standards du Web (Formats ouverts)
Slide 9
Slide 9 text
Web mapping
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Une page Web
●
Document HTML (DOM)
●
Ressources (images)
●
JavaScript (code navigateur)
●
CSS (apparence)
Slide 12
Slide 12 text
Une page Web moderne
●
CSS 3 (animations)
●
SVG (vecteur)
●
Canvas (raster)
●
JSON (données)
●
JavaScript (interactions)
●
« Mobile first »
→Navigateur moderne (<3ans)
Slide 13
Slide 13 text
CSS 3
●
Feuille de style (apparence, thème)
●
Transitions (apparition, ...)
●
Animations (rotations, ...)
●
Effets 3D (perspectives, ...)
→Exemples
Mozilla Demo Studio
Slide 14
Slide 14 text
Scalable Vector Graphics
●
Résolution infinie
●
Interprété par le navigateur (DOM)
●
Événements (survol, clic...)
●
Détails volume
→
→Exemples http://d3js.org
Illustration: Logo Parcs Nationaux de France
Slide 15
Slide 15 text
Canvas
●
Zone de dessin (pinceaux, JavaScript)
●
Universel (2D, 3D, images, ...)
●
Pas interprété ()
●
Pas d'événements DOM
→Exemples
http://babylonjs.com
http://ol3js.org
Geotrek
rando !
Slide 16
Slide 16 text
Anatomie d'une carte...
●
JavaScript + DOM
●
Initialisation = remplissage
●
![]()
(Fonds de carte)
●
Lat/Long pixels
→ (SVG, CSS)
●
Vecteur SVG
→
●
Événements (interactions)
(démo tuiles)
Slide 17
Slide 17 text
Architecture et formats
Slide 18
Slide 18 text
« La minimaliste »
Serveur Web Navigateur
Fonds
Fichiers
Vecteur
Slide 19
Slide 19 text
« La classique »
Serveur Web Navigateur
PostGIS Python Vecteur
Fonds
Fichiers
Slide 20
Slide 20 text
« La complète »
Serveur Web Navigateur
PostGIS Python
Moteur
Rendu
Vecteur
Tuiles
Fonds
Fichiers
Slide 21
Slide 21 text
Formats (1/3)
●
Images raster (PNG ou JPG)
●
z/x/y.png
●
WMTS
●
Projection EPSG:3857 (Google)
→Données froides
(fichiers, fournisseur)
…
→ ou chaudes
(moteur de rendu)
Arborescence
de fichiers !
Slide 22
Slide 22 text
Formats (2/3)
●
GeoJSON pour les données vecteurs
●
Projection EPSG:4326 (WGS84)
→Ponctuel (export via QGis …)
→Automatique (Talend spatial ...)
→Dynamique (python, PHP …)
●
Vecteur ?
Interactivité ? Volume ? Fréquence ?
Slide 23
Slide 23 text
Formats (3/3)
●
MBTiles pour les tuiles
●
Tuiles + survol + légende (carte assemblée)
●
Applications mobiles (mode déconnecté)
●
Produits par : Tilemill, Landez...
●
Servis par : Apache, TileStache, Tilestream, django-mbtiles...
●
Consommés : Leaflet, QGIS, GDAL...
Slide 24
Slide 24 text
Outils pour la publication
Slide 25
Slide 25 text
Leaflet (Cloudmade, 2011)
●
World-Wide Web (OSM, Foursquare, Flickr...)
●
Léger (~120 ko)
●
API ultra-simple
●
Mobile
●
Puissant !
var map = L.map('carte')
.fitWorld();
L.tileLayer('http://tile.osm.org/{z}/{x}/{y}.png')
.addTo(map);
Slide 26
Slide 26 text
De nombreux plugins...
Slide 27
Slide 27 text
LizMap (3Liz, 2012)
●
Cartothèque « générique » (PHP)
●
Assemblage dans QGis
●
Publication depuis QGis (QgisMapServer)
●
WMS / WFS (OGC)
Slide 28
Slide 28 text
TileMill (MapBox, 2011)
●
Ingestion de multitude de formats (vecteur, raster, …)
●
Tuiles avec fond transparent (superposition, …)
●
Syntaxe CSS
●
Esthétique
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Charte et carte !
http://loir-et-cher-2020.makina-corpus.net
Slide 31
Slide 31 text
mapbox.com
stamen.com
Slide 32
Slide 32 text
Possibilités infinies...
http://tolosa1680.makina-corpus.com
Slide 33
Slide 33 text
Conclusion
Slide 34
Slide 34 text
●
Compromis (projection Google)
●
Bons outils (Leaflet, TileMill)
●
Standards (images + GeoJSON)
●
Minimaliste (simple, interchangeable)
●
Ne pas anticiper à outrance
●
Être réactif et s'adapter !
Slide 35
Slide 35 text
●
TopoJSON
●
Mapnik
●
UTFGrid
●
Protobuf
●
Vector Tiles
●
MBTiles
●
Clustering
●
MapServer
●
QGisServer
●
…
→Besoin d'experts !
Illustration: F. Bonifas, Makina Corpus
Slide 36
Slide 36 text
Makina Corpus - Free Software | Cartography | Mobile
Questions ?
...et réponses !
PostGIS - Leaflet – JavaScript
http://makina-corpus.com
Slide 37
Slide 37 text
Présentations
●
http://makina-corpus.com/blog/metier/2013/les-alternatives-libres-a-google-maps
●
http://makina-corpus.com/blog/metier/2014/presentation-de-leplatrem-au-petit-dejeuner-les-bases-de-la-cartographie-sur-le-we
Tutoriaux
●
http://makina-corpus.com/blog/metier/2014/reduire-le-poids-dun-geojson
●
http://makina-corpus.com/blog/metier/2013/infrastructure-webmapping-minimaliste-partie-1
●
http://makina-corpus.com/blog/metier/2013/des-cartes-avec-geodjango-et-leaflet
Formations
●
http://makina-corpus.com/formation/formation-portail-webmapping-leger
●
http://makina-corpus.com/formation/leaflet
●
http://makina-corpus.com/formation/formation-introduction-webmapping
●
http://makina-corpus.com/formation/formation-tilemill
Produits
●
http://geotrek.fr