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
700
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
840
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
650
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
php-conference-nagoya-2025
fuwasegu
0
130
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
1.2k
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
230
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
190
OPENLOGI Company Profile
hr01
0
59k
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
150
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
5
1.7k
OPENLOGI Company Profile for engineer
hr01
1
20k
EDRの検知の仕組みと検知回避について
chayakonanaika
8
4.1k
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
220
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
74k
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
140
Featured
See All Featured
Scaling GitHub
holman
459
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
A Modern Web Designer's Workflow
chriscoyier
693
190k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Fireside Chat
paigeccino
34
3.2k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Writing Fast Ruby
sferik
628
61k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
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