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