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
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
Culture Deck
optfit
0
330
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
プロセス改善による品質向上事例
tomasagi
1
1.6k
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
SCSAから学ぶセキュリティ管理
masakamayama
0
140
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
335
57k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Designing for Performance
lara
604
68k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Documentation Writing (for coders)
carmenintech
67
4.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
How to train your dragon (web standard)
notwaldorf
90
5.8k
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