Publier vos données sur le Web - Forum TIC de l'ATEN 2014

Présentation de Mathieu Leplatre au Forum TIC de l'ATEN 2014

Transcript

1. Publier vos données sur le Web Forum TIC de l'ATEN 2014 Mathieu Leplatre @leplatrem www.makina-corpus.com
2. Sommaire... • Fondamentaux et stratégie • Web mapping • Architecture et formats • Outils pour la publication
3. Fondamentaux et stratégie
4. Ex. architecture OGC
5. Web Server Browser Ex. architecture carto
6. 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.
7. Identifier vos cibles • Internautes ≠ mobinautes • Géomaticiens ≠ grand public • Scientifiques ≠ grand public • Contributeurs ≠ visiteurs • Tout le monde = personne.
8. 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)
9. Web mapping
11. Une page Web • Document HTML (DOM) • Ressources (images) • JavaScript (code navigateur) • CSS (apparence)
12. Une page Web moderne • CSS 3 (animations) • SVG (vecteur) • Canvas (raster) • JSON (données) • JavaScript (interactions) • « Mobile first » →Navigateur moderne (<3ans)
13. CSS 3 • Feuille de style (apparence, thème) • Transitions (apparition, ...) • Animations (rotations, ...) • Effets 3D (perspectives, ...) →Exemples Mozilla Demo Studio
14. 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
15. Canvas • Zone de dessin (pinceaux, JavaScript) • Universel (2D, 3D, images, ...) • Pas interprété (<canvas>) • Pas d'événements DOM →Exemples http://babylonjs.com http://ol3js.org Geotrek rando !
16. Anatomie d'une carte... • JavaScript + DOM • Initialisation = remplissage <div> • <img> (Fonds de carte) • Lat/Long pixels → (SVG, CSS) • Vecteur SVG → • Événements (interactions) (démo tuiles)
17. Architecture et formats
18. « La minimaliste » Serveur Web Navigateur Fonds Fichiers Vecteur
19. « La classique » Serveur Web Navigateur PostGIS Python Vecteur Fonds Fichiers
20. « La complète » Serveur Web Navigateur PostGIS Python Moteur Rendu Vecteur Tuiles Fonds Fichiers
21. 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 !
22. 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 ?
23. 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...
24. Outils pour la publication
25. Leaflet (Cloudmade, 2011) • World-Wide Web (OSM, Foursquare, Flickr...) • Léger (~120 ko) • API ultra-simple • Mobile • Puissant ! <script> var map = L.map('carte') .fitWorld(); L.tileLayer('http://tile.osm.org/{z}/{x}/{y}.png') .addTo(map); </script>
26. De nombreux plugins...
27. LizMap (3Liz, 2012) • Cartothèque « générique » (PHP) • Assemblage dans QGis • Publication depuis QGis (QgisMapServer) • WMS / WFS (OGC)
28. TileMill (MapBox, 2011) • Ingestion de multitude de formats (vecteur, raster, …) • Tuiles avec fond transparent (superposition, …) • Syntaxe CSS • Esthétique
30. Charte et carte ! http://loir-et-cher-2020.makina-corpus.net
31. mapbox.com stamen.com
32. Possibilités infinies... http://tolosa1680.makina-corpus.com
33. Conclusion
34. • Compromis (projection Google) • Bons outils (Leaflet, TileMill) • Standards (images + GeoJSON) • Minimaliste (simple, interchangeable) • Ne pas anticiper à outrance • Être réactif et s'adapter !
35. • TopoJSON • Mapnik • UTFGrid • Protobuf • Vector Tiles • MBTiles • Clustering • MapServer • QGisServer • … →Besoin d'experts ! Illustration: F. Bonifas, Makina Corpus
36. Makina Corpus - Free Software | Cartography | Mobile Questions ? ...et réponses ! PostGIS - Leaflet – JavaScript http://makina-corpus.com
37. 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