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 l'ATEN 2014
Search
Makina Corpus
June 17, 2014
Technology
0
660
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
98
Team up Django and Web mapping - DjangoCon Europe 2014
makinacorpus
3
800
Petit déjeuner "Les bases de la cartographie sur le Web"
makinacorpus
0
400
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
81
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes - Sylvain Beorchia
makinacorpus
0
640
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre
makinacorpus
1
360
Tests carto avec Mocha
makinacorpus
0
790
Alternatives libres à Google Maps
makinacorpus
2
3k
Other Decks in Technology
See All in Technology
アプリ・TVで"旅なか体験"をもっとスマートにしてみた_team 4@NOT A HOTEL
xx23xy
0
110
OPENLOGI Company Profile
hr01
0
46k
AWS CLIの起動が重くてつらいので aws-sdk-client-go を書いた / kamakura.go#6
fujiwara3
6
3.4k
20240516 OpenID TechNight Vol.21 「OIDFシェアードシグナルフレームワーク(ID2)を利用してリアルタイムでセキュリティシグナルを共有するための最新情報」
oidfj
0
140
エムスリーマルチデバイスチーム紹介資料 / Introduction of M3 Multi Device Team
m3_engineering
1
170
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
140
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
10
1.8k
20240516 OpenID TechNight Vol.21 OpenIDファウンデーション・ジャパンの 今後の活動について
oidfj
0
140
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
nabeliwo
2
390
使われないものを作るな!出口から作るデータ分析基盤 / Data Platform Development Starting from the User Needs
amaotone
16
4.7k
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
36k
【SORACOM UG 四国】今だからこそ学ぶ!IoTの全体像と最新事例、生成AIの基礎
soracom
PRO
2
170
Featured
See All Featured
The Invisible Customer
myddelton
114
12k
Debugging Ruby Performance
tmm1
70
11k
A better future with KSS
kneath
231
16k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
The Mythical Team-Month
searls
217
42k
Documentation Writing (for coders)
carmenintech
60
4k
How to name files
jennybc
65
94k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
It's Worth the Effort
3n
180
27k
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