-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathindex.html
More file actions
522 lines (467 loc) · 17.5 KB
/
index.html
File metadata and controls
522 lines (467 loc) · 17.5 KB
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
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>QGIS 2018</title>
<link target="_blank" href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<style>
/*
SLIDE STYLES:
All slides are assumed to contain one 'p' element, one 'img' element, or one of each.
<div class="slide">
-- Default style. If no image, text is centered. If image present, it is centered and text is at the top.
-- Arbitrary content could go here too (e.g. I used a couple of iframes), but default behavior will mess with any p or img elements.
<div class="slide image_full">
-- Full 1024x768 img, somewhat faded to black and with bold white text (p) centered on top.
<div class="slide image_bottom">
-- Mostly like default except that image appears at the bottom. (Basically just to give more room for longer text).
Can make additional class styles for p elements and such if you need different text sizes, colors, etc.
(e.g. there is a p.title style with a bigger font)
img elements themselves are not displayed; rather, their src attributes are applied as div backgrounds. This is to make centering easier, basically.
*/
html, body{
margin: 0;
font: 20px/24px "PT Sans", sans-serif;
background-color: #FFF;
}
.slide, .slide div, .slide.black{
position: absolute;
top: 0;
left: 0;
width: 1024px;
height: 768px;
background-position: center center;
background-repeat: no-repeat;
word-wrap: break-word;
}
.slide{
background-color: #FFF;
}
.slide.image_bottom, .slide.black{
background-position: center bottom;
background-size: auto 65%;
}
.slide p {
left: 30px;
position: absolute;
font-size: 45px;
line-height: 50px;
font-weight: bold;
text-align: left;
color: #444444;
margin: 15px 15px 15px 15px;
width: 95%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slide.black p{
left: 30px;
position: absolute;
font-size: 64px;
line-height: 90px;
font-weight: bold;
text-align: left;
margin: 15px 15px 15px 15px;
width: 95%;
color: white;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slide img{
display: none;
}
.slide.image_full{
background-color: black;
}
.slide.black{
background-color: black;
}
.slide.image_full div{
opacity: .5;
}
.slide.image_full p{
color: white;
text-shadow:0px 0px 10px #000000;
}
.slide.image_full.repeat div{
background-position: 0 0;
background-repeat: repeat;
}
.slide p.title{
font-size: 60px;
line-height: 60px;
}
.slide p.small{
font-size: 40px;
line-height: 40px;
}
a{
color: #2859cc;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
a.citation{
position: absolute;
bottom: 5px;
right: 5px;
color: #000;
background-color: rgba(255,255,255,.75);
}
b{
color: #000000;
}
code {
display: inline-block;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #510000;
padding: 2px;
margin: 10px;
word-break: break-all;
background-color: #f2f2f2;
color: #5b5b5b;
font:20px Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace;
-webkit-touch-callout: default;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
h3{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.new{
width: 100%;
background: #f2b910;
font-size: 30px;
color: white;
line-height: 35px;
text-align: center;
margin:0;
}
</style>
</head>
<body>
<div class="slide black">
<p class="title">MaptimeLA presents: <br>Let's make a map with<br>open data and QGIS!<br><br>
<a target="_blank" href="http://github.com/maptimeLA">#maptimeLA</a></p>
</div>
<div class="slide image_bottom">
<p>Thank you to LA Counts & Hack for LA for making today's event possible!</p>
<img src="images/logos.png"/>
</div>
<div class="slide">
<p>You can follow along at:<br><a target="_blank" href="https://maptimela.github.io/opendataday">https://maptimela.github.io/opendataday</a>
</p>
</div>
<div class="slide">
<p>QGIS is a free, open source, geographic information system software.<br></p>
<img src="images/qgislogo.png"/>
</div>
<div class="slide">
<p>You will want to have QGIS version 3.x to follow along: <a target="_blank" href="https://qgis.org/en/site/forusers/download.html">QGIS Download</a><br><br>
For Mac Users with OSX greater than 10.13, install LTR Release 3.4.5 package from here: <a target="_blank" href="https://lutraconsulting.github.io/qgis-mac-packager/">Mac Installer</a></p>
</div>
<div class="slide black">
<p>Today's Topics<br><br>
Task 1: Get data<br>
Task 2: Examine data<br>
Task 3: Make a map</p>
</div>
<div class="slide black">
<p>Task 1: Get data<br></p>
</div>
<div class="slide image_bottom">
<p>Let's find some data!</p>
<img src="images/lacounts.png"/>
</div>
<div class="slide image_bottom">
<p>There are many different open data portals. If you are not sure where to start, <a target="_blank" href="https://www.lacounts.org/">LA Counts</a> aggregates all these sources into one place to search.</p>
<img src="images/lacounts.png"/>
</div>
<div class="slide">
<p>A few of the bigger portals:<br><br>
Spatial Data:<br>
 • <a target="_blank" href="http://geohub.lacity.org/">LA City</a><br>
 • <a target="_blank" href="https://egis3.lacounty.gov/dataportal/">LA County</a><br><br>
All Data:<br>
 • <a target="_blank" href="https://data.lacity.org/">LA City</a><br>
 • <a target="_blank" href="https://data.lacounty.gov/">LA County</a><br>
</p>
</div>
<div class="slide">
<p>For today's exercise, we will use the following datasets (LA Counts links):<br><br>
Shapefile:<br>
 • <a target="_blank" href="https://lacounts.ckan.io/dataset/city-boundaries-scag-region">Cities</a><br>
 • <a target="_blank" href="https://lacounts.ckan.io/dataset/neighborhood-council-boundaries-2018">LA Neighborhood Councils</a><br>
 • <a target="_blank" href="https://lacounts.ckan.io/dataset/protected-open-space-areas-scag-region">Parks</a><br>
Excel table:<br>
 • <a target="_blank" href="https://lacounts.ckan.io/dataset/public-schools-and-districts">Schools</a><br>
</p>
</div>
<div class="slide image_bottom">
<p>A copy of these datasets can also be found in the GitHub repository under the data folder.<br>
<a target="_blank" href="https://github.com/maptimeLA/opendataday">https://github.com/maptimeLA/opendataday</a></p>
<img src="images/datagithub.png"/>
</div>
<div class="slide black">
<p>Task 2: Examine data<br></p>
</div>
<div class="slide image_bottom">
<p>What is in the data you just downloaded?</p>
<img src="images/data.png"/>
</div>
<div class="slide image_bottom">
<p>When you open the zip file, you will see several files. These files together make up a shapefile which is a common GIS file type.</p>
<img src="images/shapefile.png"/>
</div>
<div class="slide image_bottom">
<p>Next let's open the Excel table. This file will need some modifications if we want to map the data.</p>
<img src="images/excel.png"/>
</div>
<div class="slide image_bottom">
<p>Delete the header rows and take note of the names of fields that contain the map coordinates (latitude, longitude). Save as a csv.</p>
<img src="images/excelfields.png"/>
</div>
<div class="slide image_bottom">
<p>Open QGIS Desktop</p>
<img src="images/qgismain.png"/>
</div>
<div class="slide image_bottom">
<p>Drag and drop the 3 zip files (cities, neighborhood councils, parks) from your computer's file explorer into the QGIS window.</p>
<img src="images/layers.png"/>
</div>
<div class="slide image_bottom">
<p>Alternatively, you can navigate to them through the Browser panel (right click on a grey toolbar to add the Browser Panel if needed).</p>
<img src="images/layers.png"/>
</div>
<div class="slide">
<p>If you try to add the schools, it will just show up as a table. However, we want to see the school locations.</p>
</div>
<div class="slide image_bottom">
<p>Go to Layer, Add Layer, Add Delimited Text Layer.</p>
<img src="images/dtext.png"/>
</div>
<div class="slide image_bottom">
<p>Select your csv under File Name. Under Geometry Definition, select Point Coordinates, X = Longitude, Y = Latitude, Geometry CRS = EPSG:4326.</p>
<img src="images/addschools.png"/>
</div>
<div class="slide image_bottom">
<p>Now we see schools!</p>
<img src="images/seeschools.png"/>
</div>
<div class="slide image_bottom">
<p>How do we see what the shapes are? One way is to use the Identify tool (i in a blue circle). Click on the identify tool and then click on a feature.</p>
<img src="images/identify.png"/>
</div>
<div class="slide image_bottom">
<p>Identify works on whatever layer is highlighted in your Layers panel (try selecting another layer and identifying a feature in that layer).</p>
<img src="images/identify2.png"/>
</div>
<div class="slide image_bottom">
<p>If we want to see all the names and information in a layer, we can open a table view. Right click on a layer and select Open Attribute Table.</p>
<img src="images/openatable.png"/>
</div>
<div class="slide image_bottom">
<p>Now you can explore all the data connected to all the shapes on the map. Any rows you select will be highlighted on the map.</p>
<img src="images/tableview.png"/>
</div>
<div class="slide black">
<p>Task 3: Make a map<br></p>
</div>
<div class="slide">
<p>We've got some data in our map, but how do we make it look good?</p>
</div>
<div class="slide image_bottom">
<p>First, let's add some basemaps. Basemaps give context to our layers. We're going to add a Plugin that has basemaps.</p>
<img src="images/osm.png"/>
</div>
<div class="slide image_bottom">
<p>Go to Plugins, Manage & Install Plugins. </p>
<img src="images/plugins.png"/>
</div>
<div class="slide image_bottom">
<p>Search for either QuickMapServices or OpenLayers. Highlight the Plugin you want and click the Install button.</p>
<img src="images/quickmap.png"/>
</div>
<div class="slide image_bottom">
<p>You can find the plugin you just added by going to Web, QuickMapServices (or OpenLayers).</p>
<img src="images/web.png"/>
</div>
<div class="slide image_bottom">
<p>Select OSM Standard from the OSM menu. Please note that some services require an API key to use.</p>
<img src="images/web.png"/>
</div>
<div class="slide image_bottom">
<p>After you click a basemap, it should load as a layer in your map (it may take a few seconds). Drag it to the bottom of the layer list and uncheck some of your layers.</p>
<img src="images/osmadded.png"/>
</div>
<div class="slide image_bottom">
<p>Yea that's great, but I want moooorrreee baselayers
<br><a target="_blank" href="https://raw.githubusercontent.com/klakar/QGIS_resources/master/collections/Geosupportsystem/python/qgis_basemaps.py">Python script for more basemaps!</a>
</p>
<img src="images/emoji_nosmile.png"/>
</div>
<div class="slide image_bottom">
<p>Now that we have a basemap, we might want some of our other layers to have different symbology to see things better. Double click on a Layer to open its Properties.</p>
<img src="images/properties.png"/>
</div>
<div class="slide image_bottom">
<p>Let's make our parks green and semi-transparent. Under Layer Rendering, set Opacity to 50%. Click Apply to see the changes on the map.</p>
<img src="images/transparency.png"/>
</div>
<div class="slide image_bottom">
<p>Let's make our a black outline. Double click on the Cities layer and choose one of the outline templates. Click on Simple Fill and set the Stroke Color to black.</p>
<img src="images/outline.png"/>
</div>
<div class="slide image_bottom">
<p>Let's make our neighborhood councils have different colors. Double click on the Neighborhood Councils layer and select Categorized. Choose the Name column and click Classify at the bottom.</p>
<img src="images/category.png"/>
</div>
<div class="slide image_bottom">
<p>You can add labels to a layer, by clicking on Labels in Properties. Set it to Single Label and pick the Field under Label with.</p>
<img src="images/labels.png"/>
</div>
<div class="slide">
<p>After you've styled everything how you want, it's time to make a map to print!</p>
</div>
<div class="slide image_bottom">
<p>Go to Project, New Print Layout. It will prompt you for a name (you can have multiple print layouts).</p>
<img src="images/printlayout.png"/>
</div>
<div class="slide image_bottom">
<p>You'll see a blank page. Go to Add Item, Add Map. Click on the blank page and drag to create a rectangle for your map.</p>
<img src="images/addmap.png"/>
</div>
<div class="slide image_bottom">
<p>You should see your map. If not, don't fret! Go to Item Properties, Set to map canvas extent. Then scroll up and click Update Preview.</p>
<img src="images/extent.png"/>
</div>
<div class="slide image_bottom">
<p>Go to Add Item, Add Label to add a title to your map. Edit the text on right panel.</p>
<img src="images/titleedit.png"/>
</div>
<div class="slide image_bottom">
<p>Once you are happy with your map, go to Layout and either Print or Export to a PDF/image to share.</p>
<img src="images/export.png"/>
</div>
<div class="slide image_bottom">
<p>We're done w/ the tutorial, but now you should experiment! Modify these tasks to use different data. Then try other tools.</p>
<img src="images/ihazmap.PNG"/>
</div>
<div class="slide image_bottom">
<p>Learn more:<br><br>
 • <a target="_blank" href="https://www.qgistutorials.com/en/">QGIS Tutorials</a><br><br>
 • <a target="_blank" href="https://docs.qgis.org/testing/en/docs/">Latest documentation</a><br>
   everything post 2.18 is "testing" because<br>
   of the huge effort involved in<br>
   translating to global languages<br>
</p>
</div>
<div class="slide black">
<p class="title">Please join us for our next<br>
<a target="_blank" href="https://www.meetup.com/MaptimeLA/">#maptimeLA</a> meeting!<br>
<br>Until then, chat w/ us on Slack!</p>
</div>
<script>
// The following is mostly derived from https://github.com/tmcw/big
var slides = document.getElementsByClassName("slide"),
current = 0;
function go(n){
current = n;
var slide = slides[n],
classes = slide.className.split(" ");
for (var i = 0; i < slides.length; i++) slides[i].style.display = 'none';
slide.style.display = 'block';
slide.style.left = (window.innerWidth - slide.offsetWidth) / 2 + "px";
slide.style.top = (window.innerHeight - slide.offsetHeight) / 2 + "px";
if ( classes[1] && styleSlide[classes[1]] ) styleSlide[classes[1]](slide);
else styleSlide.normal(slide);
resize();
if (window.location.hash !== n) window.location.hash = n;
}
var styleSlide = {
heading: function(slide){
var p = slide.getElementsByTagName("p")[0];
p.style.marginTop = (slide.offsetHeight - p.offsetHeight) / 2 + "px";
},
image_full: function(slide){
var img = slide.getElementsByTagName("img")[0];
var p = slide.getElementsByTagName("p")[0];
var div = slide.getElementsByTagName("div")[0] || document.createElement("div");
div.style.backgroundImage = 'url(' + img.src + ')';
slide.insertBefore(div,p);
img.style.display = 'none';
p.style.marginTop = (slide.offsetHeight - p.offsetHeight) / 2 + "px";
},
image_bottom: function(slide){
var img = slide.getElementsByTagName("img")[0];
if ( !img ) return;
slide.style.backgroundImage = 'url(' + img.src + ')';
img.style.display = 'none';
},
normal: function(slide){
var img = slide.getElementsByTagName("img")[0];
var p = slide.getElementsByTagName("p")[0];
if ( img ){
slide.style.backgroundImage = 'url(' + img.src + ')';
} else if (!img && !slide.getElementsByTagName("iframe")[0]){
if ( p ){
p.style.marginTop = (slide.offsetHeight - p.offsetHeight) / 2 + "px";
}
}
}
}
// document.onclick = function() { go(++current % (slides.length)); };
function fwd() { go(Math.min(slides.length - 1, ++current)); }
function rev() { go(Math.max(0, --current)); }
document.onkeydown = function(e) {
if (e.which === 39 || e.which === 34 || e.which === 40) fwd();
if (e.which === 37 || e.which === 33 || e.which === 38) rev();
};
document.ontouchstart = function(e) {
var x0 = e.changedTouches[0].pageX;
document.ontouchend = function(e) {
var x1 = e.changedTouches[0].pageX;
if (x1 - x0 < 0) fwd();
if (x1 - x0 > 0) rev();
};
};
function parse_hash() {
return Math.max(Math.min(slides.length - 1,
parseInt(window.location.hash.substring(1), 10)), 0);
}
if (window.location.hash) current = parse_hash() || current;
window.onhashchange = function() {
var c = parse_hash();
if (c !== current) go(c);
};
window.onresize = resize;
function resize(){
var s = Math.min( 1, Math.min( window.innerHeight / 768, window.innerWidth / 1024 ) );
slides[current].style.webkitTransform = "scale(" + s + "," + s +")";
slides[current].style.MozTransform = "scale(" + s + "," + s +")";
slides[current].style.msTransform = "scale(" + s + "," + s +")";
slides[current].style.transform = "scale(" + s + "," + s +")";
}
go(current);
</script>
</body>
</html>