Du stockage de la donnée à la carte sur le Web, venez découvrir les fondements de la cartographie en ligne autour d'un café et quelques viennoiseries. Nous vous avons présenté les fondements des SIG : comment représenter, stocker, éditer, assembler, publier les données géographiques... Nous avons détaillé l'anatomie d'une carte moderne sur le web. Ce petit déjeuner s'adresse à tous les curieux qui souhaitent découvrir les bases et comprendre la mécanique en abordant quelques éléments techniques !

1. Lesbasesdela
cartographiesurleWeb
(versioncourte)
MathieuLeplatre
@leplatrem
www.makina-corpus.com

2. Auprogramme...
●
Fondementsdelacartographie (projections,basededonnées)
●
Anatomied'unecartesurleWeb(Leaflet)
●
Architecturepourlacartographie (Tuiles,GeoJSON)
●
Questions(…etréponses !)

3. Donnéesgéographiques

4. Coordonnées :positionsurlaTerre
●
Longitude(x) – Latitude (y)
●
Degrésdécimaux(-180 +180, -90 +90)→ →
●
GPS

5. Géodésie :laformedelaTerre
Ellipsoid (GPS,WGS84)
Illustration:http://mapschool.io

6. Projections
●
Équations (lat/lng pixels)↔
●
Représentationplane ( compromis)→
●
Changementderéférentielspatial
Illustration:http://mapschool.io

7. Référentielspatial
●
Systèmedecoordonnées(cartésien)
●
Ellipsoïde,géoïde (WGS84)
●
Axesmajeurs(équateur,Greenwich)
●
Unité(degrés,mètres)
●
…
●
Conique, cylindrique,conforme,...
→WGS84(GPS,EPSG :4326)
→Mercatorcylindrique(Google,EPSG :3857)

8. Données«vecteur»
●
Point(x,y,z)
●
Ligne(listeordonnéedepoints)
●
Polygone(enveloppe+trous)
Illustration:http://mapschool.io

9. Données« raster »
●
~Images
●
Fondsdecarte(satellite,plan,…)
●
Donnéesd'élévation
Illustration:http://mapschool.io

10. BasededonnéesPostGIS
●
Typedecolonnes(Point,LineString,Polygon...)
●
Fonctionsgéographiques (distance,surface,emprises...)
●
Indexesspatiaux(arbresderectangles...)
$ sudo apt-get install postgis
$ psql -d mabase
> CREATE EXTENSION postgis;

11. Exemple (1/2)
CREATE TABLE bureau_vote (
commune VARCHAR(128),
numero INTEGER,
geom geometry(Polygon, 4326)
)
Table classique
Attributs
Colonne
géométrie
vecteur
Type de géométrie Référentiel
spatial

12. UnecartesurleWeb

14. UnepageWeb
●
DocumentHTML(DOM)
●
Ressources(images)
●
JavaScript(codenavigateur)
●
CSS(apparence)

15. UnepageWebmoderne
●
SVG(vecteur)
●
Canvas(raster)
●
CSS3(animations)
●
JSON(données)
●
JavaScript(interactions)
●
« Mobilefirst »
→Navigateurmoderne(<3ans)

16. ScalableVectorGraphics
●
DérivédeXML
●
Résolutioninfinie
●
Interprétéparlenavigateur (DOM)
●
Événements(survol,clic...)
●
Détails volume→
→Exemples http://d3js.org
Illustration:LogoParcsNationauxdeFrance

17. Canvas
●
Zonededessin(pinceaux,JavaScript)
●
Universel (2D,3D,images,...)
●
Pasinterprété(<canvas>)
●
Pasd'événementsDOM
→Exemples
http://babylonjs.com
http://ol3js.org
Geotrek
rando !

18. CSS3
●
Feuilledestyle(apparence,thème)
●
Interprétéparlenavigateur
●
Transitions(apparition,...)
●
Animations(rotations,...)
●
Effets3D(perspectives,...)
→Exemples
MozillaDemoStudio

19. Bibliothèquecartographique
<script src="leaflet.js"></script>
<link rel="stylesheet" href="leaflet.css" />
<div id="carte"></div>
<script>
var map = L.map('carte')
.fitWorld();
L.tileLayer('http://tile.osm.org/{z}/{x}/{y}.png')
.addTo(map);
L.marker([51.5, -0.09])
.addTo(map);
</script>
http://leafletjs.com

20. Anatomied'unecarte...
●
→JS+DOM
●
Initialisation=remplissage<div>
●
<img> (Fondsdecarte)
●
Lat/Long pixels→ (SVG,CSS)
●
Vecteur SVG→
●
Événements (interactions)

21. Exemplesetdevinettes
●
http://municipalestoulouse2014.makina-corpus.com/
●
http://dessine-moi-une-ville.makina-corpus.net/
●
http://leaflet.github.io/Leaflet.heat/demo/
●
http://leplatrem.github.io/Leaflet.gribouille/
●
http://ol3js.org/en/master/examples/animation.html
●
http://danzel.github.io/Leaflet.utfgrid/example/map.html
●
http://bl.ocks.org/nrenner/raw/8184978
●
http://rbspd3.herokuapp.com/
●
http://forecast.io/

22. Architecturepourlacartographie

23. Lenavigateur
●
Téléchargement(page,bibliothèques…)
●
Initialisationdelacarte(emprise,couches)
●
Obtentiondesdonnées(vecteur+raster)
---optionel---
●
Rendudesdonnées(géométrie+style tracé)→

24. Leserveur
●
Servirdesfichiers(application+données)
---optionel---
●
ExécutiondesrequêtesPostGIS (filtrage,attributs,…)
●
Formatagedesrésultats (XML,JSON,…)
●
Rendudesdonnées(géométrie+style tracé)→

25. « Laclassique »
ServeursWeb Navigateur
PostGIS Python
Moteur
Rendu
Vecteur
Tuiles
FondsFichiers

26. « Laclassique »
ServeursWeb Navigateur
PostGIS Python
Moteur
Rendu
Vecteur
Tuiles
FondsFichiers
Apache, Nginx...
Django, TileStache...
Mapnik, QGisServer...
Leaflet,
Openlayers3...

27. Formats(1/2)
●
Imagesraster(PNGouJPG)
●
z/x/y.png
●
WMTS
●
ProjectionEPSG:3857(Google)
→Donnéesfixes
(fournisseur)
…→ oudynamiques
(moteurderendu)
Arborescence
de fichiers !

28. Formats(2/2)
●
GeoJSONpourlesdonnéesvecteurs
●
ProjectionEPSG:4326(WGS84)
●
Interactivité ?
●
Volume ?
●
Fréquence ?
→Dynamique
(python,PHP,Java…)
SELECT
ST_AsGeoJSON(geom)
FROM ...

29. Toutlemondepeutfairedelacartographie...
Lacartographie,c'estsimple.
●
Justeuntypededonnéesspécial
●
LibJS représentationsexy→
●
Pasoupeudecode
Illustration:ChefGusteau,PixarInc.

30. …aveclesbonsoutilsetcompromis !
Lacartographie,c'estcompliqué.
●
Performance(Web)
●
Volumétrie(précision)
●
Fréquencederafraîchissement (cache)
●
Besointrop éloignédesdonnées(malstructurées)
●
INSPIRE(quandl'interopérabilitéempêche l'opérabilité)
Illustration:AntonEgo,PixarInc.

31. ●
TopoJSON
●
Mapnik
●
UTFGrid
●
Protobuf
●
VectorTiles
●
MBTiles
●
Clustering
●
MapServer
●
QGisServer
●
…
→Besoind'experts !
Illustration:F.Bonifas,MakinaCorpus

32. MakinaCorpus -LogicielsLibres|Cartographie|Mobile
Formations-Développement–Conseil
●
PostGIS -Leaflet–JavaScript
http://makina-corpus.com

33. Questions ?
...etréponses !