Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Publier vos données sur le Web - Forum TIC de ...
Search
Makina Corpus
June 17, 2014
Technology
0
710
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
Makina Corpus
June 17, 2014
Tweet
Share
More Decks by Makina Corpus
See All by Makina Corpus
Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
makinacorpus
0
120
Team up Django and Web mapping - DjangoCon Europe 2014
makinacorpus
3
850
Petit déjeuner "Les bases de la cartographie sur le Web"
makinacorpus
0
410
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir de rien" le 11 février - Toulouse
makinacorpus
0
260
CoDe, le programme de développement d'applications mobiles de Makina Corpus
makinacorpus
0
100
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes - Sylvain Beorchia
makinacorpus
0
660
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre
makinacorpus
1
380
Tests carto avec Mocha
makinacorpus
0
800
Alternatives libres à Google Maps
makinacorpus
2
3k
Other Decks in Technology
See All in Technology
フロントエンドも盛り上げたい!フロントエンドCBとAmplifyの軌跡
mkdev10
2
280
いつも初心者向けの記事に助けられているので得意分野では初心者向けの記事を書きます
toru_kubota
2
320
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
140
サーバレス、コンテナ、データベース特化型機能をご紹介。CloudWatch をもっと使いこなそう!
o11yfes2023
0
170
Dynamic Reteaming And Self Organization
miholovesq
3
500
SmartHR プロダクトエンジニア求人ガイド_2025 / PdE job guide 2025
smarthr
0
120
アジャイル脅威モデリング#1(脅威モデリングナイト#8)
masakane55
3
200
Amazon S3 Tables + Amazon Athena / Apache Iceberg
okaru
0
270
Amazon CloudWatch を使って NW 監視を行うには
o11yfes2023
0
160
【Λ(らむだ)】最近のアプデ情報 / RPALT20250422
lambda
0
110
はじめてのSDET / My first challenge as a SDET
bun913
1
250
Recap of Next - Google Cloud で実践する クラウドネイティブ最前線 / The Frontlines of Cloud-Native with Insights from Google Cloud
aoto
PRO
1
100
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
670
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Site-Speed That Sticks
csswizardry
5
490
Rails Girls Zürich Keynote
gr2m
94
13k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Applications with DynamoDB
mza
94
6.3k
Into the Great Unknown - MozCon
thekraken
37
1.7k
Fireside Chat
paigeccino
37
3.4k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Agile that works and the tools we love
rasmusluckow
328
21k
Transcript
Publier vos données sur le Web Forum TIC de l'ATEN
2014 Mathieu Leplatre @leplatrem www.makina-corpus.com
Sommaire... • Fondamentaux et stratégie • Web mapping • Architecture
et formats • Outils pour la publication
Fondamentaux et stratégie
Ex. architecture OGC
Web Server Browser Ex. architecture carto
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.
Identifier vos cibles • Internautes ≠ mobinautes • Géomaticiens ≠
grand public • Scientifiques ≠ grand public • Contributeurs ≠ visiteurs • Tout le monde = personne.
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)
Web mapping
None
Une page Web • Document HTML (DOM) • Ressources (images)
• JavaScript (code navigateur) • CSS (apparence)
Une page Web moderne • CSS 3 (animations) • SVG
(vecteur) • Canvas (raster) • JSON (données) • JavaScript (interactions) • « Mobile first » →Navigateur moderne (<3ans)
CSS 3 • Feuille de style (apparence, thème) • Transitions
(apparition, ...) • Animations (rotations, ...) • Effets 3D (perspectives, ...) →Exemples Mozilla Demo Studio
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
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 !
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)
Architecture et formats
« La minimaliste » Serveur Web Navigateur Fonds Fichiers Vecteur
« La classique » Serveur Web Navigateur PostGIS Python Vecteur
Fonds Fichiers
« La complète » Serveur Web Navigateur PostGIS Python Moteur
Rendu Vecteur Tuiles Fonds Fichiers
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 !
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 ?
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...
Outils pour la publication
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>
De nombreux plugins...
LizMap (3Liz, 2012) • Cartothèque « générique » (PHP) •
Assemblage dans QGis • Publication depuis QGis (QgisMapServer) • WMS / WFS (OGC)
TileMill (MapBox, 2011) • Ingestion de multitude de formats (vecteur,
raster, …) • Tuiles avec fond transparent (superposition, …) • Syntaxe CSS • Esthétique
None
Charte et carte ! http://loir-et-cher-2020.makina-corpus.net
mapbox.com stamen.com
Possibilités infinies... http://tolosa1680.makina-corpus.com
Conclusion
• Compromis (projection Google) • Bons outils (Leaflet, TileMill) •
Standards (images + GeoJSON) • Minimaliste (simple, interchangeable) • Ne pas anticiper à outrance • Être réactif et s'adapter !
• TopoJSON • Mapnik • UTFGrid • Protobuf • Vector
Tiles • MBTiles • Clustering • MapServer • QGisServer • … →Besoin d'experts ! Illustration: F. Bonifas, Makina Corpus
Makina Corpus - Free Software | Cartography | Mobile Questions
? ...et réponses ! PostGIS - Leaflet – JavaScript http://makina-corpus.com
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