/
index.html
138 lines (122 loc) · 5.59 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
<!DOCTYPE html>
<html><head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='medium.css' rel='stylesheet' type='text/css' />
<link href='prettyprint.css' rel='stylesheet' type='text/css' />
<meta charset='utf8' />
<script src='medium.js'></script>
<script src='prettify.js'></script>
<script type='text/javascript'>window.addEventListener('load', prettyPrint);</script>
</head>
<body>
<!-- Intro to web mapping: what can you make? -->
<div><h3>An Open Web Mapping Toolbox</h3>
<span style='font-size:85px;line-heivertical-align:top;'>Dave Cole & Tom MacWright</span>
</div>
<div>What kind of web maps can you make?</div>
<div><h3>A base map:</h3>
<img src="img/base-map-features.png">
</div>
<div><h3>Or tiled overlays</h3>
<img src="img/tile-overlay.png">
</div>
<div><h3>Or tiled overlays</h3>
<img src="img/tile-overlay-grid.png">
</div>
<div><h3>With dynamic features</h3>
<img src="img/base-map.png">
</div>
<!-- What are the steps -->
<div><h3>Process:</h3></div>
<div><h3><strong>1.</strong> Sourcing data</h3> Where do you find reliable open data?</div>
<div><h3><strong>2.</strong> Processing data</h3> Adding geographic information, projections, summarization</h3></div>
<div><img src='design_bg.png' /><h3><strong>3.</strong> Design</h3> visualizing the data; telling a story</div>
<div><h3><strong>4.</strong> Map distribution</h3> rendering → serving tiles → interfaces on web & mobile</div>
<!-- Making a base layer: tiled -->
<div><h3>Where to find open data:</h3></div>
<div><h3>OpenStreetMap</h3>openstreet<br>map.org</div>
<div><h3>US Census</h3>census.gov/<br>geo/www/tiger</div>
<div><h3>Local government open data</h3></div>
<div><h3>Natural Earth</h3>http://www.natural<br>earthdata.com</div>
<div><h3>Data you create</h3>Like a <strong>spreadsheet</strong> or <strong>list</strong> of addresses</div>
<div><h3>Processing data:</h3></div>
<div><h3>Tools</h3>QGIS, ORG / GDAL, PostGIS, scripting</div>
<div><h3>Formats</h3> shp, geojson, kml, geotiff, csv</div>
<div><h3>Geocoding</h3> <strong>55 4th Street, San Francisco, CA 94103</strong> -> <pre class='prettyprint'>
{
lng: -122.404883,
lat: 37.785034
}
</pre></div>
<div><h3>Projections</h3>Converting a 3d globe to a flat map</div>
<div><h3>Spherical <strong>mercator</strong></h3>
<img src='img/mercator.png'></div>
<div><h3><strong>Albers</strong> equal area</h3>
<img src='img/albers.png'></div>
<div><h3>Summarization</h3>Viewing data in aggregate</div>
<div><h3>Pivot tables</h3>Aggregate records of data on an attribute</div>
<div><h3>Pivot tables</h3><img src='img/unsummed.png'></div>
<div><h3>Pivot tables</h3><img src='img/summed.png'></div>
<div><h3>Points in areas</h3><img src='img/points-in-poly.png'></div>
<div><h3>Nearest neighbors</h3><img src='img/nearest.png'></div>
<div><h3>Gridding</h3><img src='img/gridded.png'></div>
<div>Designing the map</div>
<div>Applying styles to data: TileMill and Carto</div>
<div>Zoom-dependent design: What to show and when</div>
<div>Interactive features: overlays add context</div>
<!-- Tile-based overlays -->
<div>Tiled overlays: when design and scale matter</div>
<div>Chrolopleths across thousands of features</div>
<div>Load data, classify on a certain field</div>
<div>Use color or patterns to quantify values</div>
<div>Show millions of points precisely without sacrificing speed</div>
<div>Other possibilities: dot densities; custom shapes</div>
<div>Serving tiles == serving images</div>
<div>(and maybe interactivity)</div>
<div>Mapnik -> cached images</div>
<!-- Adding client-side features -->
<div><h3>The Client Side</h3> putting web maps on web pages</div>
<div>generally <strong>Javascript</strong> libraries that deal in <strong>images</strong></div>
<div>lots of options:</div>
<div><h3>OpenLayers</h3>established, monolithic, 'hefty'</div>
<div><h3>Leaflet</h3> OpenLayers post-web renassiance & workout time</div>
<div><h3>Modest Maps</h3> nothing but tiles: wafer thin & light</div>
<div><h3>'Theme'</h3> open source libraries > their © equivalents</div>
<div><pre class='prettyprint'>
// The world-famous
// Google Maps API
new google.maps.Map($('map')[0], {
zoom: 8,
center: new google.maps.LatLng(
-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
});</pre></div>
<div><img src='img/google_maps_one.png' /></div>
<div><pre class='prettyprint'>
// Leaflet with MapBox Streets
var mylayer = 'http://a.tiles.mapbox.com/v3/tmcw.map-rnesfyru';
var map = new L.Map('map', {
center: new L.LatLng(-34.397, 150.644),
zoom: 8,
layers: [new L.TileLayer(mylayer + '/{z}/{x}/{y}.png')]
});</pre></div>
<div><img src='img/leaflet_one.png' /></div>
<div>'red dot fever'</div>
<div><pre class='prettyprint'>
// Making a marker in Google Maps
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-34.397, 150.644),
map: map
});</pre></div>
<div><img src='img/google_maps_two.png'></div>
<div><pre class='prettyprint'>
// Making a marker in Leaflet
map.addLayer(new L.Marker(new L.LatLng(-34.397, 150.644)));
</pre></div>
<div><img src='img/leaflet_two.png' /></div>
<div>What about...</div>
<div><h3>Performance</h3> Multiple kinds.</div>
</body>
</html>