map-website/index.html at master · maptimeLA/map-website · GitHub

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
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>Map Website</title>

		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/simple.css">

		<!-- Theme used for syntax highlighting of code -->
		<link rel="stylesheet" href="lib/css/monokai.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section>
					<h2>MaptimeLA presents:</h2>
					<p>Let's make our own map website!</p>
					<img src="images/maptimelalogo.png"></img>
				</section>

				<section>
					Follow along with this presentation at: <a href="https://maptimela.github.io/map-website/">https://maptimela.github.io/map-website/</a>
				</section>

				<section>
					<h3>Thank you to <a href="https://www.arup.com/">Arup</a> for hosting!!</h3>
					<img src="images/arup.jpg"></img>
				</section>

				<section data-markdown data-background="#fb9fa4">
					<textarea data-template>
					## Topics
					1. What is GitHub?
					2. Make a GitHub repository
					3. What is QGIS?
					4. Map mock election sites in QGIS
					5. Make a webmap using QGIS2Web
					6. Upload your map to GitHub
					7. Use GitHub Pages to create a web page
					8. Add your map to your GitHub pages site
				</textarea>
				</section>

				<section data-background="#fb9fa4">
					What is GitHub?
				</section>

				<section>
					GitHub is online version control that uses Git.
					<img src="images/github.png"></img>
				</section>

				<section>
					What is Version Control?<br>
					<img src="images/version-control.png"></img>
				</section>

				<section>
					What is Git?<br>
					<img src="images/git-logo.png"></img>
				</section>

				<section>
					Why Git?<br>
					<ul>
						<li>a Version Control system</li>
						<li>Software</li>
						<li>Free</li>
						<li>Open Source</li>
						<li>Commonly Used</li>
					</ul>
				</section>

				<section>
					NOW, what is GitHub?<br>
					A website that hosts your projects and uses Git to track the files. Use it to:<br>
					<ul>
						<li>Collaborate with a team of people</li>
						<li>Share your code with others so they can use it</li>
						<li>Ask others to help you find ways to improve your code</li>
					</ul>
				</section>

				<section>
					It uses "repositories" to store files related to a project.
					<img src="images/maptimerepo.png"></img>
				</section>

				<section>
					Multiple people can collaborate on a project.
					<img src="images/contributors.png"></img>
				</section>

				<section>
					You can see all the changes made to the files and revert to a prior version if you made a mistake.
					<img src="images/history.png"></img>
				</section>

				<section data-background="#fb9fa4">
					Let's make a GitHub repository
				</section>

				<section>
					Login to your GitHub account and plus sign (+) in the upper right.
					<img src="images/repo.jpg"></img>
				</section>

				<section>
					Give your repository a name (no spaces) and a description.
					<img src="images/repo2.jpg"></img>
				</section>

				<section>
					You've created a repository!
					<img src="images/repo3.jpg"></img>
				</section>

				<section data-background="#fb9fa4">
					What is QGIS?
				</section>

				<section>
					QGIS is free, open source, mapping and analysis software.
					<img src="images/qgis-logo.png"></img>
				</section>

				<section>
					You can use it to make maps,
					<img src="images/qgismap.png"></img>
				</section>

				<section>
					perform analysis,
					<img src="images/qgisanalysis.png"></img>
				</section>

				<section>
					and manage geographic data (create/edit).
					<img src="images/qgisdata.png"></img>
				</section>

				<section data-background="#fb9fa4">
					Let's map mock election sites in QGIS
				</section>

				<section>
					We want to save the geojson file from: <a href="https://raw.githubusercontent.com/maptimeLA/map-website/master/mock-election-locations.geojson">https://github.com/maptimeLA/map-website</a>
					<img src="images/geojson.png"></img>
				</section>

				<section>
					Open QGIS Desktop.
					<img src="images/qgisdesktop.png"></img>
				</section>

				<section>
					Drag and drop the geojson file into the map (or go to Layer, Add Layer, Add Vector Layer)
					<img src="images/addlayer.png"></img>
				</section>

				<section>
					You should see points. Click the "i" in a blue circle icon and click on a point.
					<img src="images/explore.png"></img>
				</section>

				<section>
					A basemap would be helpful for context. It is a plugin (go to Plugins, Manage & Install Plugins).
					<img src="images/plugin.png"></img>
				</section>

				<section>
					Search for and install the OpenLayers plugin.
					<img src="images/openlayers.png"></img>
				</section>

				<section>
					Go to Web, OpenLayers and add a basemap (I recommend OpenStreetMap or Stamen Toner Lite).
					<img src="images/basemap.png"></img>
				</section>

				<section data-background="#fb9fa4">
					Let's make a webmap using QGIS2Web
				</section>

				<section>
					We need another plugin. Search for and install QGIS2Web.
					<img src="images/qgis2web.png"></img>
				</section>

				<section>
					Click the icon that looks like a blue tile with a leaf on it.
					<img src="images/qgis2web2.png"></img>
				</section>

				<section>
					Toggle the button at the bottom for Leaflet.
					<img src="images/qgis2web3.png"></img>
				</section>

				<section>
					On the Appearance tab you can add several widgets. Experiment & click the Update Preview button.
					<img src="images/qgis2web4.png"></img>
				</section>

				<section>
					On the Export tab select a folder on your computer named qgis2web and click Export.
					<img src="images/qgis2web5.png"></img>
				</section>

				<section>
					Go to that folder and you will see several folders/files. If you have Atom, open the QGIS2Web folder & look at the code.
					<img src="images/atom.png"></img>
				</section>

				<section data-background="#fb9fa4">
					Let's upload the map to GitHub
				</section>

				<section>
					Drag and drop your qgis2web folder into your repository.
					<img src="images/addmap.jpg"></img>
				</section>

				<section data-background="#fb9fa4">
					Let's use GitHub Pages to create a web page
				</section>

				<section>
					Go to the Settings tab.
					<img src="images/settings.jpg"></img>
				</section>

				<section>
					Scroll down to GitHub Pages
					<img src="images/githubpages.jpg"></img>
				</section>

				<section>
					Select your Master branch and click on Choose a Theme.
					<img src="images/theme.png"></img>
				</section>

				<section>
					Pick any theme and click Select Theme and Commit.
					<img src="images/theme2.png"></img>
				</section>

				<section>
					You can see your site by going to: https://youraccount.github.io/yourrepo
				</section>

				<section>
					Create an index.md file (this will be your home page)
					<img src="images/createfile.png"></img>
				</section>

				<section>
					You can use html or <a href="https://www.markdownguide.org/basic-syntaxMarkdown">Markdown</a>.
					<img src="images/markdown.png"></img>
				</section>

				<section data-background="#fb9fa4">
					Let's add your map to your GitHub pages site
				</section>

				<section>
					You can see your map by going to https://youraccount.github.io/yourrepo/qgis2web
					<img src="images/webmap.png"></img>
				</section>

				<section>
					Let's embed your map into your main web page.
					<img src="images/embed.png"></img>
				</section>

				<section>
					Open your index.md file in GitHub and click the pencil icon.
					<img src="images/edit.png"></img>
				</section>

				<section>
					Add this code wherever you want your map to appear:
					<pre><code data-trim>
						<iframe width="100%" height="315" src="qgis2web/index.html" frameborder="0" allowfullscreen></iframe>
					</code></pre>
				</section>

				<section>
					Now people can use your map on your site!
					<img src="images/embed.png"></img>
				</section>

				<section>
					<h2>Good job!</h2>
					<p></p>
					<img src="images/maptimelalogo.png"></img>
				</section>

			</div>
		</div>

		<script src="js/reveal.js"></script>

		<script>
			// More info about config & dependencies:
			// - https://github.com/hakimel/reveal.js#configuration
			// - https://github.com/hakimel/reveal.js#dependencies
			Reveal.initialize({
				dependencies: [
					{ src: 'plugin/markdown/marked.js' },
					{ src: 'plugin/markdown/markdown.js' },
					{ src: 'plugin/notes/notes.js', async: true },
					{ src: 'plugin/highlight/highlight.js', async: true }
				]
			});
		</script>
	</body>
</html>