-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
239 lines (228 loc) · 17.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
<style type='text/css'>
body {
font-family: 'Helvetica';
letter-spacing: -5px;
background: #000;
background-size: 100%;
color: #fff;
margin: 0;
padding: 0;
font-weight: bold;
}
h1,
h2,
h3,
p {
margin: 0;
}
em,
a {
font-style: normal;
color: #8dbd0c;
}
a {
background: #34d0e7;
color: #000;
text-decoration: none;
}
img {
width: 100%;
}
div {
cursor: pointer;
cursor: hand;
position: absolute;
top: 0;
left: 0;
}
</style>
<script type='text/javascript'>
window.onload = function() {
var s = document.getElementsByTagName('div'),
cur = 0;
if (!s) return;
function go(n) {
cur = n;
var i = 1e3,
e = s[n];
for (var k = 0; k < s.length; k++) s[k].style.display = 'none';
e.style.display = 'inline';
e.style.fontSize = i + 'px';
if (e.firstChild.nodeName === 'IMG') {
document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')';
e.firstChild.style.display = 'none';
} else {
document.body.style.backgroundImage = '';
document.body.style.backgroundColor = e.style.backgroundColor;
}
while (
e.offsetWidth > window.innerWidth ||
e.offsetHeight > window.innerHeight) {
e.style.fontSize = (i -= 10) + 'px';
if (i < 0) break;
}
e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px';
if (window.location.hash !== n) window.location.hash = n;
document.title = e.textContent || e.innerText;
}
document.onclick = function() {
go(++cur % (s.length));
};
document.onkeydown = function(e) {
(e.which === 39) && go(Math.min(s.length - 1, ++cur));
(e.which === 37) && go(Math.max(0, --cur));
};
function parse_hash() {
return Math.max(Math.min(
s.length - 1,
parseInt(window.location.hash.substring(1), 10)), 0);
}
if (window.location.hash) cur = parse_hash() || cur;
window.onhashchange = function() {
var c = parse_hash();
if (c !== cur) go(c);
};
go(cur);
};
</script>
</head>
<body>
<div>Anatomie d'une <em>carte web</em></div>
<div>Auteurs : <a href="http://stamen.com/studio/alan">Alan McConchie</a> :) et <a href="http://stamen.com/studio/beth">Beth Schechter</a> :D<br/>Traduction de <a href="https://github.com/lducerf">Laurent Ducerf</a></div>
<div>Maintenance !<br>Source ici : <a href="http://bit.ly/1YLFzW2">bit.ly/1YLFzW2</a>.<br>Les liens sont sur fond bleu, le <em>vert</em> met en relief. Vous pouvez commenter et modifier sur <a href="https://github.com/MaptimeAlpes/anatomie-d-une-webmap">github</a> !</div>
<div>Allez, c'est parti ! :)</div>
<div>Nous allons parler des <em>principes de bases</em> de la cartographie web.</div>
<div>Nous commencerons par un petit historique, pour que vous compreniez comment les cartes web sont devenues ce quelles sont aujourd'hui.</div>
<div>Il y a toujours des exceptions ! Nous en parlerons également.</div>
<div>Nous parlerons beaucoup de <em>Google</em>, mais nous allons aussi vous montrer une solution<em>100% ouverte</em> sans Google</div>
<div>Tout d'abord, quel rapport entre l'<em>anatomie</em> et une carte web ?</div>
<div>Et bien,</div>
<div>Les corps et les cartes web possèdent des composants et des systèmes qui <em>interagissent et s'entrelacent</em></div>
<div><img src="images/0-anatomy-dude/anatomy1.png"></div>
<div><img src="images/0-anatomy-dude/anatomy2.png"></div>
<div><img src="images/0-anatomy-dude/anatomy3.png"></div>
<div><img src="images/0-anatomy-dude/anatomy4.png"></div>
<div>Au lieu des cellules, les cartes sont constituées de <em>données.</em></div>
<div>Au lieu de systèmes digestif, circulatoire ou nerveux, les cartes web sont basées sur <em>des styles, des tuiles et des serveurs.</em><br>!!!</div>
<div>Donc,</div>
<div>Qu'est ce qu'une carte web ?</div>
<div>Pour répondre à cette question, peut-être est-ce plus utile de demander...</div>
<div>En quoi une <em>carte web</em> diffère d'une <em>carte numérique</em> ?</div>
<div><em>Numérique</em> : implique un ordinateur, mais pas nécessairement accessible par internet.</div>
<div>Une <em>carte web</em> est une <em>carte numérique</em>. Et toutes deux sont bien sûr très différentes des cartes <em>analogiques</em>, telles que les cartes papier et les atlas !</div>
<div>Nous parlons des cartes web que vous voyez dans un navigateur, comme...</div>
<div><img src="images/osm.png"><a href="http://www.openstreetmap.org/">OpenStreetMap.org</a></div>
<div><img src="images/google-map.png"><a href="https://www.google.com/maps/preview">maps.google.com</a></div>
<div><img src="images/mapsdotstamen.png"><a href="http://maps.stamen.com">maps.stamen.com</a></div>
<div><img src="images/iphone_maps.jpg">Faire des cartes pour les <em>terminaux mobiles</em> peut être très similaire, mais nous ne parlerons pas de cela aujourd'hui.</div>
<div><img src="images/google-earth.png">Nous ne parlerons pas non plus des<em>globes numériques</em> comme <a href="http://www.google.com/earth/">Google Earth</a></div>
<div><em>bon...</em></div>
<div>Voici une petite histoire :<br><em>Comment sont arrivées les cartes web ?</em></div>
<div style="color: black"><img src="images/3-map-history/1-arcGIS.jpg">D'abord, il y avait des cartes numériques comme <a href="http://www.esri.com/software/arcgis">ArcGIS</a>.</div>
<div>Quoiqu'utile, un SIG pour le Web n'est pas très convivial :( </div>
<div style="color: black"><img src="images/3-map-history/2-Ridgefield-CT-Mapquest-out.jpg">En 1996, MapQuest lance son premier service web.</div>
<div><img src="images/3-map-history/2-Ridgefield-CT-Mapquest-out.jpg"><em>tada !</em></div>
<div>Des itinéraires ! En ligne ! Révolutionnaire !</div>
<div>Le problème ? C'était trop lent à charger :(</div>
<div>MapQuest imposait un rafraîchissement complet de la page pour faire défiler ou zoomer, et il était toujours aligné sur les limites de tuiles.</div>
<div>Début 2005, Google Maps a vraiment ouvert la voie à la cartographie web.</div>
<div><img src="images/3-map-history/3-old-google-maps-1.JPG"></div>
<div><em>Mais où était la révolution ?</em><br>Était-ce dans l'interface ?<br>Le repère rouge ?<br>L'encart pour la météo ?</div>
<div>Non !</div>
<div>C'était la <em>tuile.<img src="images/tiles/toner.jpg"></em></div>
<div>Parlons un peu des tuiles. Et pour ce faire, empruntons un peu de matériel à l'incroyable cartographe <a href="http://lyzidiamond.com/">Lyzi Diamond</a> qui possède un paquet d'informations sur les tuiles de <a href="https://www.mapbox.com/">Mapbox</a>.</div>
<!-- <div><em>Merci à tous ! <3 <3 <3</em><br>Maintenant allons-y...</div> -->
<div>Toutes les tuiles<br>=<br>même taille ! 256x256 pixels<br>mêmes limites<img src="images/tiles.gif"></div>
<div>Les tuiles peuvent être une carte routière, une image satellite, ou n'importe quelle image raster !</div>
<div><img src="images/tiles-loading.gif">Toutes ces petites tuiles se chargent <em>bien plus vite</em> qu'une seule grande carte.</div>
<div>Les cartes web comme celle-là chargent les tuiles qui s'affichent sur votre écran. Si la carte est “intelligente”, elle préchargera les tuiles situées autour de l'écran.</div>
<div><img src="images/slippy-map.gif">Ce type de carte est communément appelée une <em>carte glissante</em></div>
<div>Chaque <em>niveau de zoom</em> a son propre jeu de tuiles !</div>
<div><img src="images/tiles/zoom0.png"><em>Zoom niveau 0 : une tuile unique pour le monde.</em></div>
<div>A chaque niveau de zoom supplémentaire, le nombre de tuiles augmente de façon exponentielle.</div>
<div><img src="images/tiles/zoom1.png"><em>Zoom niveau 1: 4 tuiles pour le monde.</em></div>
<div><img src="images/tiles/zoom2-3-4-5.png"><em>Zoom niveau 2, 3, 4, 5</em></div>
<div><img src="images/tiles/zoom13.png"><em>Zoom niveau 13</em></div>
<div>Les tuiles sont <em>calculées</em> à l'avance (généralement) puis stockées dans un cache</div>
<div>Les tuiles des cartes sont de simples images en ligne, vous pouvez pointer dessus individuellement.</div>
<div>Exemple : <a href="http://tile.openstreetmap.org/4/8/5.png">http://tile.openstreetmap.org/4/8/5.png</a></div>
<div>Pour comprendre comment ça fonctionne, décomposons l'URL.</div>
<div>http://<em>tile.openstreetmap.org</em>/4/8/5.png -- le nom du serveur de tuiles.</div>
<div>http://tile.openstreetmap.org/<em>4</em>/8/5.png -- z, le niveau de zoom.</div>
<div>http://tile.openstreetmap.org/4/<em>8/5</em>.png -- x/y, la position de la tuile sur la grille.</div>
<div>Google Maps utilise la <em>projection Mercator</em>, conçue pour la navigation maritime MAIS qui convient bien pour les cartes plates.</div>
<div><a href="http://commons.wikimedia.org/wiki/File:1855_Colton_Map_of_the_World_on_Mercator_Projection_-_Geographicus_-_WorldMercator-colton-1855.jpg"><img src="images/mercator.jpg"></a></div>
<div>Nous verrons d'autres projections plus tard...!</div>
<div>Bref, toutes les autres cartes glissantes et les logiciels associés ont adopté la solution de Google à base de tuiles.</div>
<div>Sans surprise, une collection de tuiles <em>raster</em> constitue ce qu'on appelle le <em>fond de plan</em> de la carte.</div>
<div>Lorsqu'on ajoute des éléments par-dessus, on parle de <em>couche de données</em>, <em>couche de contenu</em> ou <em>couche d'entités</em>.</div>
<div>*(Toutes les cartes web ne possèdent pas de couche de contenu, mais elles sont assez courantes.)</div>
<div>Il s'agit généralement de couches <em>vectorielles</em> (des points, des lignes, des polygones). Parfois elles sont interactives (un clic peut faire surgir une fenêtre par exemple).</div>
<div>Types de fichiers : les SIG utilisent des <em>fichiers de formes</em>, mais les cartes web préfèrent le <em>KML</em>, ou plus récemment le <a href="http://github.com/lyzidiamond/learn-geojson">GeoJSON</a></div>
<div>Voici comment ces pièces s'assemblent :</div>
<div><img src="images/basemap-datalayers-01.png"></div>
<div><img src="images/basemap-datalayers-02.png"></div>
<div><img src="images/basemap-datalayers-03.png"></div>
<div><img src="images/basemap-datalayers-04.png"></div>
<div><img src="images/basemap-datalayers-05.png"></div>
<div><img src="images/basemap-datalayers-06.png"></div>
<div>Compris ?</div>
<div>Super !</div>
<div>Nous pouvons donc plonger un peu plus profond dans l'<em>anatomie d'une carte web !</em></div>
<div><img src="images/leaflet-toner-snapshot-giant.png"><em>La carte web la plus simple possible :</em> <a href="http://bit.ly/1KPoq46">bit.ly/1KPoq46</a></div>
<div><img src="images/leaflet_code.png"></div>
<div><img src="images/anatomy-of-a-web-map.png"></div>
<div>Que fait la bibliothèque javascript ? Elle s'empare des tuiles, ajoute la couche de contenu, gère l'interaction.</div>
<div>Javascript : nous recommandons <a href="http://leafletjs.com">Leaflet</a>, quoiqu'il en existe d'autres : <a href="http://openlayers.org">OpenLayers</a> (qui opère un “comeback”) / <a href="http://modestmaps.com">Modest Maps</a> / <a href="http://polymaps.org">Polymaps</a></div>
<div>Et n'oubliez pas : <a href="https://developers.google.com/maps/documentation/javascript/">Google Maps API</a> / <a href="http://www.microsoft.com/maps/choose-your-bing-maps-API.aspx">Bing Maps API</a> / <a href="https://developer.here.com/javascript-apis">Nokia HERE Maps API</a> / <a href="https://developers.arcgis.com/javascript/">ESRI ArcGIS API</a></div>
<div>3 exceptions à cette histoire simplifiée !</div>
<div>Exception n°1 : Les tuiles sont toujours des rasters <em>SAUF</em> quand elles ne le sont pas !</div>
<div><img src="images/vector_tiles.png"><em>Des tuiles vectorielles !</em> Kezako ?<br> <a href="http://bl.ocks.org/wboykinm/7393674">(démo sans rapport)</a></div>
<div>Les <a href="https://www.mapbox.com/blog/vector-tiles/">tuiles vectorielles</a> sont une alternative à une base de donnée qui fabrique des tuiles rasters. Elles sont tout de même calculées en raster pour l'affichage</div>
<div><em>Raster :</em> je demande les données à placer sur la tuile</div>
<div><em>Vectoriel :</em> j'ai déjà les données vectorielles, découpées pour fabriquer des tuiles raster</div>
<div>Donc quelqu'un doit parcourir et hacher ces données, par exemple <a href="https://www.mapbox.com/blog/vector-tiles/">MapBox</a>.</div>
<div>Exception n°2 : Pas d'interaction possible sur une image raster. MAIS <a href="https://www.mapbox.com/guides/an-open-platform/#utfgrid">UTFGrid</a> (une création Mapbox) la rend possible.</div>
<div style="color: black"><img src="images/utfgrid.png">UTFGrid est une couche invisible de lettres qui servent d'index dans les données cliquables</div>
<div style="color: black"><img src="images/parks-conservancy.png">Stamen a utilisé cette technique sur la <a href="http://www.parksconservancy.org/map/#/?coords=15:37.8016:-122.4659&date=1394668684907">carte des parcs naturels préservés.</a></div>
<div>Exception n°3 : <a href="http://d3js.org">D3</a> existe en-dehors du monde des tuiles</div>
<div>Vous ne pouvez pas facilement faire une carte routière en D3 <em>MAIS</em> vous pouvez faire des choses périlleuses sur des cartes glissantes, comme...</div>
<div style="color: black"><img src="images/d3-examples/d3_choropleth.png">Des cartes choroplèthes, ou... <a href="http://sta.mn/jyx">sta.mn/jyx</a></div>
<div style="color: black"><img src="images/d3-examples/d3_cartogram.png">Des cartogrammes, ou... <a href="http://sta.mn/q99">sta.mn/q99</a></div>
<div style="color: black"><img src="images/d3-examples/projection_transitions2.png">Différentes projections cartographiques (dans le navigateur !) <a href="http://sta.mn/jfs">sta.mn/jfs</a></div>
<div style="color: black"><img src="images/d3-examples/geo.png">D3</div>
<div style="color: black"><img src="images/d3-examples/racial-divide.png">EST</div>
<div style="color: black"><img src="images/d3-examples/topojson.png">DÉ</div>
<div style="color: black"><img src="images/d3-examples/drought.png">MENT</div>
<div>Retrouvez ces exemples et plus dans la <a href="http://exposedata.com/talk/d3-geo/">présentation d3.geo</a> de Kai Chang</div>
<div>Très puissant, mais une courbe d'apprentissage un peu raide</div>
<div>Bien.<br>Concrètement, par où je commence ?</div>
<div>Ai-je besoin de tuiles personnalisées ?</div>
<div>Non ? Utilisez celles-ci ! <a href="http://wiki.openstreetmap.org/wiki/Tiles">OpenStreetMap</a>, <a href="http://maps.stamen.com">Stamen</a>, <a href="https://www.mapbox.com/tour/#maps">MapBox</a>,<a href="https://developer.mapquest.com/products/maps">MapQuest</a></div>
<div>Oui ? Utilisez <a href="https://www.mapbox.com/tilemill/">TileMill</a> pour dessiner vos propres tuiles.</div>
<div><img src="images/worldwide-wood.png"><em>Joli !</em>
</div>
<div>Stylisez vos cartes avec <a href="https://www.mapbox.com/carto">CartoCSS</a></div>
<div>Vous pouvez héberger ces tuiles sur <a href="https://www.mapbox.com/plans/">MapBox</a>, ou...</div>
<div>ou les servir avec votre propre serveur de tuiles.<br>Par exemple : <a href="https://github.com/klokantech/tileserver-php/">TileServer.php</a> / <a href="http://tilestache.org">TileStache</a> / <a href="http://tilecache.org">TileCache</a> / <a href="https://github.com/mapbox/tilestream">TileStream</a> /<a href="https://github.com/chelm/mbtiles-server">mbtiles-server</a> / <a href="http://wiki.openstreetmap.org/wiki/Mod_tile">mod_tile</a></div>
<div>Voir le <a href="http://erictheise.github.io/geostack-deck/">tutoriel Géo-Plateforme</a> d'Eric Theise pour les détails pratiques</div>
<div>Ai-je besoin d'une couche de contenu ?</div>
<div>Non ? Mettez toutes vos données dans les tuiles, en utilisant éventuellement UTFGrid pour l'interactivité</div>
<div>Oui ? Convertissez votre fichier de formes en GeoJSON avec <a href="http://ogre.adc4gis.com/ ">OGRE</a> ou écrivez votre propre GeoJSON avec <a href="http://geojson.io">geojson.io</a></div>
<div>Sinon, <a href="http://cartodb.com">CartoDB</a> gère presque tout ça pour vous !</div>
<div><img src="images/random/lurn_moar.jpg ">En savoir plus :<br><a href="http://maptime.io/lessons-resources/">maptime.io/lessons-resources/</a> et <a href="http://maptime-alpes.com">maptime-alpes.com</a></div>
<div>Remerciements :</div>
<div><a href="https://github.com/lyzidiamond ">Lyzi Diamond</a></div>
<div><a href="http://stamen.com">Stamen</a></div>
<div>Tout le monde à <a href="http://maptime.io/">#maptime</a></div>
<div>Vous !</div>
<div>Présentation faite avec <a href="http://www.macwright.org/big/ ">big</a></div>
</body>
</html>