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
690
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
110
Team up Django and Web mapping - DjangoCon Europe 2014
makinacorpus
3
820
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
93
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
370
Tests carto avec Mocha
makinacorpus
0
800
Alternatives libres à Google Maps
makinacorpus
2
3k
Other Decks in Technology
See All in Technology
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
150
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
180
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
200
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
Emacs x Nostr
hakkadaikon
1
150
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
130
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.3k
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
170
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
Nix入門パラダイム編
asa1984
2
200
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.7k
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
Featured
See All Featured
RailsConf 2023
tenderlove
29
880
Why Our Code Smells
bkeepers
PRO
334
57k
Unsuck your backbone
ammeep
668
57k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Side Projects
sachag
452
42k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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