forked from maptime/anatomy-of-a-web-map
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
184 lines (178 loc) · 10.5 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
<!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" /><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>Super fast 5-minute-crash-course on... </div>
<div><img src="images/cartodbgal4.png"><em>web maps!</em></div>
<div>emilyashley.github.io/crash-course-on-web-maps/</div>
<div><img src="images/leaflet_code.png"> </div>
<div><img src="images/leaflet_code.png"/> This is not a map</div>
<div><em>kidding</em></div>
<div>First, let's start with <em>anatomy</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>Instead of cells, maps have <em>data.</em></div>
<div>Instead of circulatory and digestive systems, web maps have <em>styles, tiles, and servers.</em> oh my...</div>
<div> or something like that <em>A&P</em> is not my strongsuit. But here's <em>THIS:</em></div>
<div><img src="images/anatomy-of-a-web-map.png"></div>
<div>What is a web map? We've all seen them... </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/osm.png"><a href="http://www.openstreetmap.org/">OpenStreetMap.org</a></div>
<div><img src="images/mapsdotstamen.png"><a href="http://maps.stamen.com">maps.stamen.com</a></div>
<div>a little history:</div>
<div style="color: black"><img src="images/3-map-history/2-Ridgefield-CT-Mapquest-out.jpg">In 1996, Mapquest launched its web service.</div>
<div><img src="images/3-map-history/2-Ridgefield-CT-Mapquest-out.jpg"> <em>ta da!</em></div>
<div>Directions! Online! Revolutionary!</div>
<div>full page refresh to scroll or zoom. *sad trombone* </div>
<div>Google Maps to the rescue!</div>
<div><img src="images/3-map-history/3-old-google-maps-1.JPG"></div>
<div><em>But what was the revolution?</em><br>Was it the interface?<br>The red marker?<br>The weather widget?</div>
<div><img src="images/tiles-loading.gif">It was the tile. They load <em>way faster</em> than one big map.</div>
<div><img src="images/slippy-map.gif">Pre-loading the edges is colloquially called a <em>slippy map</em></div>
<div>Fun fact: Tiles can be any thing that's a raster!</div>
<div><img src ="images/aerialtiles.png"></div>
<div><img src ="images/handdrawntiles.png"></div>
<div>All tiles<br>=<br>same size! 256x256 pixels<br>same boundaries<img src="images/tiles.gif"></div>
<div>Each <em>zoom level</em> has its own set of tiles!</div>
<div><img src="images/tiles/zoom0.png"><em>Zoom level 0: one tile for the world.</em></div>
<div><img src="images/tiles/zoom1.png"><em>Zoom level 1: 4 tiles for the world.</em></div>
<div><img src="images/tiles/zoom2-3-4-5.png"><em>Zoom level 2, 3, 4, 5</em></div>
<div><img src="images/tiles/zoom13.png"><em>Zoom level 13</em></div>
<div>you can link to them individually: <a href="http://tile.openstreetmap.org/4/2/6.png">http://tile.openstreetmap.org/4/2/6.png</a></div>
<div><img src="images/leaflet_code.png"></div>
<div>http://<em>tile.openstreetmap.org</em>/4/2/6.png <br>-- tile server.</div>
<div>http://tile.openstreetmap.org/<em>4</em>/2/6.png <br>-- zoom level.</div>
<div>http://tile.openstreetmap.org/4/<em>2/6</em>.png <br>-- place in the grid where the tile lives.</div>
<div>Exception: <a href="http://d3js.org">D3</a> exists outside the world of tiles</div>
<div>you can’t easily make reference maps in D3 <em>BUT</em> can do things that are clumsy in tiled maps like...</div>
<div style="color: black"><img src="images/d3-examples/d3_choropleth.png">choropleth maps or... </div>
<div style="color: black"><img src="images/d3-examples/d3_cartogram.png">cartograms or... </div>
<div style="color: black"><img src="images/d3-examples/projection_transitions2.png">different map projections (in the browser!)</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">IS</div>
<div style="color: black"><img src="images/d3-examples/topojson.png">IN</div>
<div style="color: black"><img src="images/d3-examples/drought.png">SANE</div>
<div> Out of the clouds and back to tile-based maps...</div>
<div><img src="images/anatomy-of-a-web-map.png"></div>
<div><em>data layers</em> or <em>content layers</em> or <em>feature layers</em>.</div>
<div><img src="images/basemap-datalayers-01.png"></div>
<div><img src="images/basemap-datalayers-03.png"></div>
<div><img src="images/basemap-datalayers-05.png"></div>
<div>GIS users like the Gov use <em>shapefiles</em>, but web maps prefer KML, or more recently, <em>topoJSON</em> & <em>geoJSON</em></div>
<div><img src="images/leaflet_code.png"></div>
<div>What does the javascript library do? Grabs the tiles, adds content layer, handles interaction.</div>
<div>this is why the javascript, imho. interaction.</div>
<div>a good place to start is <a href="http://leafletjs.com">Leaflet</a>, although there are others: <a href="http://openlayers.org">OpenLayers</a> / <a href="http://modestmaps.com">Modest Maps</a> / <a href="http://polymaps.org">Polymaps</a>, turf.js, cartodb.js..</div>
<div><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="http://developer.here.com/web/guest/javascript-apis">Nokia HERE Maps API</a> / <a href="https://developers.arcgis.com/en/javascript/">ESRI ArcGIS API</a></div>
<div>So.You may be thinking,<br>Where do I start?</div>
<div>Here are some <em>99*% open source</em> tools and stacks that can meet your mapping needs</div>
<div>Do I need to make my own custom tiles?</div>
<div>No? Use these! <a href="http://wiki.openstreetmap.org/wiki/Tiles">OpenStreetMap</a>, <a href="http://cloudmade.com/products/map-tiles">CloudMade</a>, <a href="http://maps.stamen.com">Stamen</a>, <a href="https://www.mapbox.com/tour/#maps">MapBox</a>, <a href="http://developer.mapquest.com/web/products/open/map">MapQuest</a></div>
<div>Yes? Use <a href="https://www.mapbox.com/tilemill/">TileMill</a> to design your own tiles.</div>
<div><img src="images/kkowalski-lichstenstein-tiles.png">pow</div>
<div><img src="images/worldwide-wood.png"></div>
<div>Style your map elements with <a href="https://www.mapbox.com/carto">CartoCSS</a> (or just carto)</div>
<div><img src="images/cartocss8.png"></div>
<div>Serve the tiles somewhere like <em>MapBox</em> or run your own tile server. For example: <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>Do I need a content layer?</div>
<div>No? Put all desired information into the tiles. Nightmare mode: use a UTFGrid for interactivity</div>
<div>Yes? Upload your own or grab data from open portals / API's.</div>
<div>Convert between file types using <a href="http://ogre.adc4gis.com/">OGRE</a></div>
<div>or write your own GeoJSON with <a href="http://geojson.io">geojson.io</a></div>
<div><img src="images/geojson-io-screen.png"/></div>
<div>Not good with color theory or data vis? Grab a palette from ColorBrewer</div>
<div><img src="images/colorbrewerscreen.png"></div>
<div>Finally, <a href="http://cartodb.com">CartoDB</a> takes care of almost all of this for you! It's kinda a one-stop shop to explore</div>
<div><img src="images/cartoDBscreen.png"/></div>
<div>Design wizards, basemaps, spatio-temporal (..uh.. timelapse) rendering! Available with a click & point!</div>
<div> Spatial analysis with SQL/PostgreSQL/PostGIS, map hosting, imbed in html or drop it in your js code.</div>
<div><img src="images/cartodbgal1.png"></div>
<div><img src="images/cartodbgal2.png"></div>
<div><img src="images/cartodbgal3.png"></div>
<div><img src="images/cartodbgal4.png"></div>
<div>So next time a project needs a map, you know where to start!</div>
<div><img src="images/anatomy-of-a-web-map.png"></div>
<div> And basically... </div>
<div><img src="images/leaflet_code.png"/> This is totally a map</div>
<div>phewwww</div>
<div>Thanks!></div>
<div>For carto-curious --> <a href="http://maptime.io/lessons-resources/">#maptime</a> </div>
<div>Presentation made with <a href="http://www.macwright.org/big/">big</a></div>