/
what-is-web-mapping.html
513 lines (473 loc) · 56.2 KB
/
what-is-web-mapping.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The Open Digital Archaeology Textbook</title>
<meta name="description" content="The Open Digital Archaeology Textbook combines instructive text with a computational DA laboratory">
<meta name="generator" content="bookdown 0.7 and GitBook 2.6.7">
<meta property="og:title" content="The Open Digital Archaeology Textbook" />
<meta property="og:type" content="book" />
<meta property="og:image" content="images/word-cloud-proposal.jpg" />
<meta property="og:description" content="The Open Digital Archaeology Textbook combines instructive text with a computational DA laboratory" />
<meta name="github-repo" content="o-date/draft" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="The Open Digital Archaeology Textbook" />
<meta name="twitter:description" content="The Open Digital Archaeology Textbook combines instructive text with a computational DA laboratory" />
<meta name="twitter:image" content="images/word-cloud-proposal.jpg" />
<meta name="author" content="Shawn Graham, Neha Gupta, Jolene Smith, Andreas Angourakis, Andrew Reinhard, Michael Carter, & Beth Compton">
<meta name="date" content="2018-08-14">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="prev" href="storytelling-and-the-archaeological-cms-omeka-kora-and-mukurtu.html">
<link rel="next" href="virtual-archaeology.html">
<script src="libs/jquery-2.2.3/jquery.min.js"></script>
<link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" />
<script src="https://hypothes.is/embed.js" async></script>
<style type="text/css">
div.sourceCode { overflow-x: auto; }
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
code > span.dt { color: #902000; } /* DataType */
code > span.dv { color: #40a070; } /* DecVal */
code > span.bn { color: #40a070; } /* BaseN */
code > span.fl { color: #40a070; } /* Float */
code > span.ch { color: #4070a0; } /* Char */
code > span.st { color: #4070a0; } /* String */
code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
code > span.ot { color: #007020; } /* Other */
code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
code > span.fu { color: #06287e; } /* Function */
code > span.er { color: #ff0000; font-weight: bold; } /* Error */
code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
code > span.cn { color: #880000; } /* Constant */
code > span.sc { color: #4070a0; } /* SpecialChar */
code > span.vs { color: #4070a0; } /* VerbatimString */
code > span.ss { color: #bb6688; } /* SpecialString */
code > span.im { } /* Import */
code > span.va { color: #19177c; } /* Variable */
code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code > span.op { color: #666666; } /* Operator */
code > span.bu { } /* BuiltIn */
code > span.ex { } /* Extension */
code > span.pp { color: #bc7a00; } /* Preprocessor */
code > span.at { color: #7d9029; } /* Attribute */
code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
</style>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">
<div class="book-summary">
<nav role="navigation">
<ul class="summary">
<li><a href="./">ODATE</a></li>
<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>notice</a></li>
<li class="chapter" data-level="" data-path="about-the-authors.html"><a href="about-the-authors.html"><i class="fa fa-check"></i>About the Authors</a><ul>
<li class="chapter" data-level="" data-path="about-the-authors.html"><a href="about-the-authors.html#shawn-graham"><i class="fa fa-check"></i>Shawn Graham</a></li>
<li class="chapter" data-level="" data-path="about-the-authors.html"><a href="about-the-authors.html#neha-gupta"><i class="fa fa-check"></i>Neha Gupta</a></li>
<li class="chapter" data-level="" data-path="about-the-authors.html"><a href="about-the-authors.html#michael-carter"><i class="fa fa-check"></i>Michael Carter</a></li>
<li class="chapter" data-level="" data-path="about-the-authors.html"><a href="about-the-authors.html#beth-compton"><i class="fa fa-check"></i>Beth Compton</a></li>
<li class="chapter" data-level="" data-path="about-the-authors.html"><a href="about-the-authors.html#jolene-smith"><i class="fa fa-check"></i>Jolene Smith</a></li>
<li class="chapter" data-level="" data-path="about-the-authors.html"><a href="about-the-authors.html#andreas-angourakis"><i class="fa fa-check"></i>Andreas Angourakis</a></li>
<li class="chapter" data-level="0.0.1" data-path="about-the-authors.html"><a href="about-the-authors.html#andrew-reinhard"><i class="fa fa-check"></i><b>0.0.1</b> Andrew Reinhard</a></li>
<li class="chapter" data-level="" data-path="about-the-authors.html"><a href="about-the-authors.html#editorial-board"><i class="fa fa-check"></i>Editorial Board</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="getting-started.html"><a href="getting-started.html"><i class="fa fa-check"></i>Getting Started</a><ul>
<li class="chapter" data-level="" data-path="students-how-to-use-this-text.html"><a href="students-how-to-use-this-text.html"><i class="fa fa-check"></i>Students: How to use this text</a></li>
<li class="chapter" data-level="" data-path="how-to-contribute-changes-or-make-your-own-version.html"><a href="how-to-contribute-changes-or-make-your-own-version.html"><i class="fa fa-check"></i>How to contribute changes, or make your own version</a></li>
<li class="chapter" data-level="" data-path="how-to-access-and-use-the-computational-environment.html"><a href="how-to-access-and-use-the-computational-environment.html"><i class="fa fa-check"></i>How to access and use the computational environment</a></li>
<li class="chapter" data-level="" data-path="colophon.html"><a href="colophon.html"><i class="fa fa-check"></i>Colophon</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="welcome.html"><a href="welcome.html"><i class="fa fa-check"></i>Welcome!</a></li>
<li class="chapter" data-level="1" data-path="going-digital.html"><a href="going-digital.html"><i class="fa fa-check"></i><b>1</b> Going Digital</a><ul>
<li class="chapter" data-level="1.1" data-path="so-what-is-digital-archaeology.html"><a href="so-what-is-digital-archaeology.html"><i class="fa fa-check"></i><b>1.1</b> So what is Digital Archaeology?</a><ul>
<li class="chapter" data-level="1.1.1" data-path="so-what-is-digital-archaeology.html"><a href="so-what-is-digital-archaeology.html#a-distant-view"><i class="fa fa-check"></i><b>1.1.1</b> A distant view</a></li>
<li class="chapter" data-level="1.1.2" data-path="so-what-is-digital-archaeology.html"><a href="so-what-is-digital-archaeology.html#is-digital-archaeology-part-of-the-digital-humanities"><i class="fa fa-check"></i><b>1.1.2</b> Is digital archaeology part of the digital humanities?</a></li>
<li class="chapter" data-level="1.1.3" data-path="so-what-is-digital-archaeology.html"><a href="so-what-is-digital-archaeology.html#archaeological-glitch-art"><i class="fa fa-check"></i><b>1.1.3</b> Archaeological Glitch Art</a></li>
<li class="chapter" data-level="1.1.4" data-path="so-what-is-digital-archaeology.html"><a href="so-what-is-digital-archaeology.html#the-cool-factor"><i class="fa fa-check"></i><b>1.1.4</b> The ‘cool’ factor</a></li>
<li class="chapter" data-level="1.1.5" data-path="so-what-is-digital-archaeology.html"><a href="so-what-is-digital-archaeology.html#takeaways"><i class="fa fa-check"></i><b>1.1.5</b> Takeaways</a></li>
<li class="chapter" data-level="1.1.6" data-path="so-what-is-digital-archaeology.html"><a href="so-what-is-digital-archaeology.html#exercises"><i class="fa fa-check"></i><b>1.1.6</b> Exercises</a></li>
</ul></li>
<li class="chapter" data-level="1.2" data-path="project-management-basics.html"><a href="project-management-basics.html"><i class="fa fa-check"></i><b>1.2</b> Project Management Basics</a><ul>
<li class="chapter" data-level="1.2.1" data-path="project-management-basics.html"><a href="project-management-basics.html#take-aways"><i class="fa fa-check"></i><b>1.2.1</b> Take-aways</a></li>
<li class="chapter" data-level="1.2.2" data-path="project-management-basics.html"><a href="project-management-basics.html#exercises-1"><i class="fa fa-check"></i><b>1.2.2</b> exercises</a></li>
</ul></li>
<li class="chapter" data-level="1.3" data-path="github-version-control.html"><a href="github-version-control.html"><i class="fa fa-check"></i><b>1.3</b> Github & Version Control</a><ul>
<li class="chapter" data-level="1.3.1" data-path="github-version-control.html"><a href="github-version-control.html#the-core-functions-of-git"><i class="fa fa-check"></i><b>1.3.1</b> The core functions of Git</a></li>
<li class="chapter" data-level="1.3.2" data-path="github-version-control.html"><a href="github-version-control.html#key-terms"><i class="fa fa-check"></i><b>1.3.2</b> Key Terms</a></li>
<li class="chapter" data-level="1.3.3" data-path="github-version-control.html"><a href="github-version-control.html#take-aways-1"><i class="fa fa-check"></i><b>1.3.3</b> Take-aways</a></li>
<li class="chapter" data-level="1.3.4" data-path="github-version-control.html"><a href="github-version-control.html#further-reading"><i class="fa fa-check"></i><b>1.3.4</b> Further Reading</a></li>
<li class="chapter" data-level="1.3.5" data-path="github-version-control.html"><a href="github-version-control.html#exercises-2"><i class="fa fa-check"></i><b>1.3.5</b> Exercises</a></li>
<li class="chapter" data-level="1.3.6" data-path="github-version-control.html"><a href="github-version-control.html#warnings"><i class="fa fa-check"></i><b>1.3.6</b> Warnings</a></li>
</ul></li>
<li class="chapter" data-level="1.4" data-path="open-notebook-research-scholarly-communication.html"><a href="open-notebook-research-scholarly-communication.html"><i class="fa fa-check"></i><b>1.4</b> Open Notebook Research & Scholarly Communication</a><ul>
<li class="chapter" data-level="1.4.1" data-path="open-notebook-research-scholarly-communication.html"><a href="open-notebook-research-scholarly-communication.html#how-to-ask-questions"><i class="fa fa-check"></i><b>1.4.1</b> How to Ask Questions</a></li>
<li class="chapter" data-level="1.4.2" data-path="open-notebook-research-scholarly-communication.html"><a href="open-notebook-research-scholarly-communication.html#discussion"><i class="fa fa-check"></i><b>1.4.2</b> discussion</a></li>
<li class="chapter" data-level="1.4.3" data-path="open-notebook-research-scholarly-communication.html"><a href="open-notebook-research-scholarly-communication.html#take-aways-2"><i class="fa fa-check"></i><b>1.4.3</b> Take-aways</a></li>
<li class="chapter" data-level="1.4.4" data-path="open-notebook-research-scholarly-communication.html"><a href="open-notebook-research-scholarly-communication.html#further-reading-1"><i class="fa fa-check"></i><b>1.4.4</b> Further Reading</a></li>
<li class="chapter" data-level="1.4.5" data-path="open-notebook-research-scholarly-communication.html"><a href="open-notebook-research-scholarly-communication.html#on-privilege-and-open-notebooks"><i class="fa fa-check"></i><b>1.4.5</b> On Privilege and Open Notebooks</a></li>
<li class="chapter" data-level="1.4.6" data-path="open-notebook-research-scholarly-communication.html"><a href="open-notebook-research-scholarly-communication.html#exercises-3"><i class="fa fa-check"></i><b>1.4.6</b> exercises</a></li>
</ul></li>
<li class="chapter" data-level="1.5" data-path="failing-productively.html"><a href="failing-productively.html"><i class="fa fa-check"></i><b>1.5</b> Failing Productively</a><ul>
<li class="chapter" data-level="1.5.1" data-path="failing-productively.html"><a href="failing-productively.html#a-taxonomy-of-fails"><i class="fa fa-check"></i><b>1.5.1</b> A taxonomy of fails</a></li>
<li class="chapter" data-level="1.5.2" data-path="failing-productively.html"><a href="failing-productively.html#exercises-4"><i class="fa fa-check"></i><b>1.5.2</b> Exercises</a></li>
</ul></li>
<li class="chapter" data-level="1.6" data-path="the-ethics-of-big-data-in-archaeology.html"><a href="the-ethics-of-big-data-in-archaeology.html"><i class="fa fa-check"></i><b>1.6</b> The Ethics of Big Data in Archaeology</a><ul>
<li class="chapter" data-level="1.6.1" data-path="the-ethics-of-big-data-in-archaeology.html"><a href="the-ethics-of-big-data-in-archaeology.html#discussion-1"><i class="fa fa-check"></i><b>1.6.1</b> discussion</a></li>
<li class="chapter" data-level="1.6.2" data-path="the-ethics-of-big-data-in-archaeology.html"><a href="the-ethics-of-big-data-in-archaeology.html#exercises-5"><i class="fa fa-check"></i><b>1.6.2</b> exercises</a></li>
</ul></li>
<li class="chapter" data-level="1.7" data-path="the-human-problem.html"><a href="the-human-problem.html"><i class="fa fa-check"></i><b>1.7</b> The Human Problem</a></li>
</ul></li>
<li class="chapter" data-level="2" data-path="making-data-useful.html"><a href="making-data-useful.html"><i class="fa fa-check"></i><b>2</b> Making Data Useful</a><ul>
<li class="chapter" data-level="2.1" data-path="designing-data-collection.html"><a href="designing-data-collection.html"><i class="fa fa-check"></i><b>2.1</b> Designing Data Collection</a><ul>
<li class="chapter" data-level="2.1.1" data-path="designing-data-collection.html"><a href="designing-data-collection.html#discussion-2"><i class="fa fa-check"></i><b>2.1.1</b> discussion</a></li>
<li class="chapter" data-level="2.1.2" data-path="designing-data-collection.html"><a href="designing-data-collection.html#exercises-6"><i class="fa fa-check"></i><b>2.1.2</b> exercises</a></li>
</ul></li>
<li class="chapter" data-level="2.2" data-path="cleaning-data.html"><a href="cleaning-data.html"><i class="fa fa-check"></i><b>2.2</b> Cleaning Data</a><ul>
<li class="chapter" data-level="2.2.1" data-path="cleaning-data.html"><a href="cleaning-data.html#discussion-3"><i class="fa fa-check"></i><b>2.2.1</b> discussion</a></li>
<li class="chapter" data-level="2.2.2" data-path="cleaning-data.html"><a href="cleaning-data.html#exercises-7"><i class="fa fa-check"></i><b>2.2.2</b> exercises</a></li>
</ul></li>
<li class="chapter" data-level="2.3" data-path="arranging-and-storing-data-for-the-long-haul-databases.html"><a href="arranging-and-storing-data-for-the-long-haul-databases.html"><i class="fa fa-check"></i><b>2.3</b> Arranging and Storing Data for the Long Haul (Databases!)</a><ul>
<li class="chapter" data-level="2.3.1" data-path="arranging-and-storing-data-for-the-long-haul-databases.html"><a href="arranging-and-storing-data-for-the-long-haul-databases.html#discussion-4"><i class="fa fa-check"></i><b>2.3.1</b> discussion</a></li>
<li class="chapter" data-level="2.3.2" data-path="arranging-and-storing-data-for-the-long-haul-databases.html"><a href="arranging-and-storing-data-for-the-long-haul-databases.html#exercises-8"><i class="fa fa-check"></i><b>2.3.2</b> exercises</a></li>
</ul></li>
<li class="chapter" data-level="2.4" data-path="linked-open-data-and-data-publishing.html"><a href="linked-open-data-and-data-publishing.html"><i class="fa fa-check"></i><b>2.4</b> Linked Open Data and Data Publishing</a><ul>
<li class="chapter" data-level="2.4.1" data-path="linked-open-data-and-data-publishing.html"><a href="linked-open-data-and-data-publishing.html#discussion-5"><i class="fa fa-check"></i><b>2.4.1</b> discussion</a></li>
<li class="chapter" data-level="2.4.2" data-path="linked-open-data-and-data-publishing.html"><a href="linked-open-data-and-data-publishing.html#exercises-9"><i class="fa fa-check"></i><b>2.4.2</b> exercises</a></li>
</ul></li>
<li class="chapter" data-level="2.5" data-path="using-application-programming-interfaces-apis-to-retrieve-data.html"><a href="using-application-programming-interfaces-apis-to-retrieve-data.html"><i class="fa fa-check"></i><b>2.5</b> Using Application Programming Interfaces (APIS) to Retrieve Data</a><ul>
<li class="chapter" data-level="2.5.1" data-path="using-application-programming-interfaces-apis-to-retrieve-data.html"><a href="using-application-programming-interfaces-apis-to-retrieve-data.html#exercises-10"><i class="fa fa-check"></i><b>2.5.1</b> Exercises</a></li>
</ul></li>
<li class="chapter" data-level="2.6" data-path="scraping-data.html"><a href="scraping-data.html"><i class="fa fa-check"></i><b>2.6</b> Scraping Data</a><ul>
<li class="chapter" data-level="2.6.1" data-path="scraping-data.html"><a href="scraping-data.html#exercises-11"><i class="fa fa-check"></i><b>2.6.1</b> Exercises</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="3" data-path="finding-and-communicating-the-compelling-story.html"><a href="finding-and-communicating-the-compelling-story.html"><i class="fa fa-check"></i><b>3</b> Finding and Communicating the Compelling Story</a><ul>
<li class="chapter" data-level="3.1" data-path="statistical-computing-with-r-and-python-notebooks-reproducible-code.html"><a href="statistical-computing-with-r-and-python-notebooks-reproducible-code.html"><i class="fa fa-check"></i><b>3.1</b> Statistical Computing with R and Python Notebooks; Reproducible code</a><ul>
<li class="chapter" data-level="3.1.1" data-path="statistical-computing-with-r-and-python-notebooks-reproducible-code.html"><a href="statistical-computing-with-r-and-python-notebooks-reproducible-code.html#discussion-6"><i class="fa fa-check"></i><b>3.1.1</b> discussion</a></li>
<li class="chapter" data-level="3.1.2" data-path="statistical-computing-with-r-and-python-notebooks-reproducible-code.html"><a href="statistical-computing-with-r-and-python-notebooks-reproducible-code.html#exercises-12"><i class="fa fa-check"></i><b>3.1.2</b> exercises</a></li>
</ul></li>
<li class="chapter" data-level="3.2" data-path="data-driven-documents.html"><a href="data-driven-documents.html"><i class="fa fa-check"></i><b>3.2</b> Data Driven Documents</a><ul>
<li class="chapter" data-level="3.2.1" data-path="data-driven-documents.html"><a href="data-driven-documents.html#d3"><i class="fa fa-check"></i><b>3.2.1</b> D3</a></li>
<li class="chapter" data-level="3.2.2" data-path="data-driven-documents.html"><a href="data-driven-documents.html#discussion-7"><i class="fa fa-check"></i><b>3.2.2</b> discussion</a></li>
<li class="chapter" data-level="3.2.3" data-path="data-driven-documents.html"><a href="data-driven-documents.html#exercises-13"><i class="fa fa-check"></i><b>3.2.3</b> exercises</a></li>
</ul></li>
<li class="chapter" data-level="3.3" data-path="storytelling-and-the-archaeological-cms-omeka-kora-and-mukurtu.html"><a href="storytelling-and-the-archaeological-cms-omeka-kora-and-mukurtu.html"><i class="fa fa-check"></i><b>3.3</b> Storytelling and the Archaeological CMS: Omeka, Kora, and Mukurtu</a><ul>
<li class="chapter" data-level="3.3.1" data-path="storytelling-and-the-archaeological-cms-omeka-kora-and-mukurtu.html"><a href="storytelling-and-the-archaeological-cms-omeka-kora-and-mukurtu.html#the-content-management-system"><i class="fa fa-check"></i><b>3.3.1</b> The Content Management System</a></li>
<li class="chapter" data-level="3.3.2" data-path="storytelling-and-the-archaeological-cms-omeka-kora-and-mukurtu.html"><a href="storytelling-and-the-archaeological-cms-omeka-kora-and-mukurtu.html#omeka"><i class="fa fa-check"></i><b>3.3.2</b> Omeka</a></li>
<li class="chapter" data-level="3.3.3" data-path="storytelling-and-the-archaeological-cms-omeka-kora-and-mukurtu.html"><a href="storytelling-and-the-archaeological-cms-omeka-kora-and-mukurtu.html#kora"><i class="fa fa-check"></i><b>3.3.3</b> Kora</a></li>
<li class="chapter" data-level="3.3.4" data-path="storytelling-and-the-archaeological-cms-omeka-kora-and-mukurtu.html"><a href="storytelling-and-the-archaeological-cms-omeka-kora-and-mukurtu.html#mukurtu"><i class="fa fa-check"></i><b>3.3.4</b> Mukurtu</a></li>
<li class="chapter" data-level="3.3.5" data-path="storytelling-and-the-archaeological-cms-omeka-kora-and-mukurtu.html"><a href="storytelling-and-the-archaeological-cms-omeka-kora-and-mukurtu.html#exercises-14"><i class="fa fa-check"></i><b>3.3.5</b> Exercises</a></li>
</ul></li>
<li class="chapter" data-level="3.4" data-path="what-is-web-mapping.html"><a href="what-is-web-mapping.html"><i class="fa fa-check"></i><b>3.4</b> What is Web Mapping?</a><ul>
<li class="chapter" data-level="3.4.1" data-path="what-is-web-mapping.html"><a href="what-is-web-mapping.html#overview-of-map-services"><i class="fa fa-check"></i><b>3.4.1</b> Overview of Map Services</a></li>
<li class="chapter" data-level="3.4.2" data-path="what-is-web-mapping.html"><a href="what-is-web-mapping.html#making-a-web-map-with-leaflet"><i class="fa fa-check"></i><b>3.4.2</b> Making a web map with Leaflet</a></li>
<li class="chapter" data-level="3.4.3" data-path="what-is-web-mapping.html"><a href="what-is-web-mapping.html#exercises-15"><i class="fa fa-check"></i><b>3.4.3</b> Exercises</a></li>
<li class="chapter" data-level="3.4.4" data-path="what-is-web-mapping.html"><a href="what-is-web-mapping.html#resources"><i class="fa fa-check"></i><b>3.4.4</b> Resources</a></li>
</ul></li>
<li class="chapter" data-level="3.5" data-path="virtual-archaeology.html"><a href="virtual-archaeology.html"><i class="fa fa-check"></i><b>3.5</b> Virtual Archaeology</a><ul>
<li class="chapter" data-level="3.5.1" data-path="virtual-archaeology.html"><a href="virtual-archaeology.html#theory"><i class="fa fa-check"></i><b>3.5.1</b> Theory</a></li>
<li class="chapter" data-level="3.5.2" data-path="virtual-archaeology.html"><a href="virtual-archaeology.html#method"><i class="fa fa-check"></i><b>3.5.2</b> Method</a></li>
<li class="chapter" data-level="3.5.3" data-path="virtual-archaeology.html"><a href="virtual-archaeology.html#practice"><i class="fa fa-check"></i><b>3.5.3</b> Practice</a></li>
<li class="chapter" data-level="3.5.4" data-path="virtual-archaeology.html"><a href="virtual-archaeology.html#discussion-8"><i class="fa fa-check"></i><b>3.5.4</b> Discussion</a></li>
<li class="chapter" data-level="3.5.5" data-path="virtual-archaeology.html"><a href="virtual-archaeology.html#exercises-16"><i class="fa fa-check"></i><b>3.5.5</b> Exercises</a></li>
</ul></li>
<li class="chapter" data-level="3.6" data-path="archaeogaming.html"><a href="archaeogaming.html"><i class="fa fa-check"></i><b>3.6</b> Archaeogaming</a><ul>
<li class="chapter" data-level="3.6.1" data-path="archaeogaming.html"><a href="archaeogaming.html#archaeological-reception"><i class="fa fa-check"></i><b>3.6.1</b> Archaeological Reception</a></li>
<li class="chapter" data-level="3.6.2" data-path="archaeogaming.html"><a href="archaeogaming.html#games-as-archaeology"><i class="fa fa-check"></i><b>3.6.2</b> Games as Archaeology</a></li>
<li class="chapter" data-level="3.6.3" data-path="archaeogaming.html"><a href="archaeogaming.html#archaeogaming-projects-past-and-present"><i class="fa fa-check"></i><b>3.6.3</b> Archaeogaming Projects Past and Present</a></li>
<li class="chapter" data-level="3.6.4" data-path="archaeogaming.html"><a href="archaeogaming.html#is-archaeogaming-archaeology-a-future-of-the-discipline."><i class="fa fa-check"></i><b>3.6.4</b> Is Archaeogaming Archaeology? A Future of the Discipline.</a></li>
<li class="chapter" data-level="3.6.5" data-path="archaeogaming.html"><a href="archaeogaming.html#exercises-17"><i class="fa fa-check"></i><b>3.6.5</b> Exercises</a></li>
<li class="chapter" data-level="3.6.6" data-path="archaeogaming.html"><a href="archaeogaming.html#further-reading-2"><i class="fa fa-check"></i><b>3.6.6</b> Further Reading</a></li>
</ul></li>
<li class="chapter" data-level="3.7" data-path="social-media-as-public-engagement-scholarly-communication-in-archaeology.html"><a href="social-media-as-public-engagement-scholarly-communication-in-archaeology.html"><i class="fa fa-check"></i><b>3.7</b> Social media as Public Engagement & Scholarly Communication in Archaeology</a><ul>
<li class="chapter" data-level="3.7.1" data-path="social-media-as-public-engagement-scholarly-communication-in-archaeology.html"><a href="social-media-as-public-engagement-scholarly-communication-in-archaeology.html#discussion-9"><i class="fa fa-check"></i><b>3.7.1</b> discussion</a></li>
<li class="chapter" data-level="3.7.2" data-path="social-media-as-public-engagement-scholarly-communication-in-archaeology.html"><a href="social-media-as-public-engagement-scholarly-communication-in-archaeology.html#exercises-18"><i class="fa fa-check"></i><b>3.7.2</b> exercises</a></li>
</ul></li>
<li class="chapter" data-level="3.8" data-path="computational-creativity.html"><a href="computational-creativity.html"><i class="fa fa-check"></i><b>3.8</b> Computational Creativity</a><ul>
<li class="chapter" data-level="3.8.1" data-path="computational-creativity.html"><a href="computational-creativity.html#twitterbots-with-tracery"><i class="fa fa-check"></i><b>3.8.1</b> Twitterbots with Tracery</a></li>
<li class="chapter" data-level="3.8.2" data-path="computational-creativity.html"><a href="computational-creativity.html#chatbots"><i class="fa fa-check"></i><b>3.8.2</b> Chatbots</a></li>
<li class="chapter" data-level="3.8.3" data-path="computational-creativity.html"><a href="computational-creativity.html#sonification"><i class="fa fa-check"></i><b>3.8.3</b> Sonification</a></li>
<li class="chapter" data-level="3.8.4" data-path="computational-creativity.html"><a href="computational-creativity.html#worldbuilding"><i class="fa fa-check"></i><b>3.8.4</b> Worldbuilding</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="4" data-path="eliding-the-digital-and-the-physical.html"><a href="eliding-the-digital-and-the-physical.html"><i class="fa fa-check"></i><b>4</b> Eliding the Digital and the Physical</a><ul>
<li class="chapter" data-level="4.1" data-path="d-photogrammetry.html"><a href="d-photogrammetry.html"><i class="fa fa-check"></i><b>4.1</b> 3D Photogrammetry</a><ul>
<li class="chapter" data-level="4.1.1" data-path="d-photogrammetry.html"><a href="d-photogrammetry.html#basic-principles"><i class="fa fa-check"></i><b>4.1.1</b> Basic principles</a></li>
<li class="chapter" data-level="4.1.2" data-path="d-photogrammetry.html"><a href="d-photogrammetry.html#further-readings"><i class="fa fa-check"></i><b>4.1.2</b> Further Readings</a></li>
<li class="chapter" data-level="4.1.3" data-path="d-photogrammetry.html"><a href="d-photogrammetry.html#exercises-20"><i class="fa fa-check"></i><b>4.1.3</b> exercises</a></li>
</ul></li>
<li class="chapter" data-level="4.2" data-path="d-printing-the-internet-of-things-and-maker-archaeology.html"><a href="d-printing-the-internet-of-things-and-maker-archaeology.html"><i class="fa fa-check"></i><b>4.2</b> 3D Printing, the Internet of Things and “Maker” Archaeology</a><ul>
<li class="chapter" data-level="4.2.1" data-path="d-printing-the-internet-of-things-and-maker-archaeology.html"><a href="d-printing-the-internet-of-things-and-maker-archaeology.html#d-printing---a-workflow"><i class="fa fa-check"></i><b>4.2.1</b> 3d Printing - a Workflow</a></li>
<li class="chapter" data-level="4.2.2" data-path="d-printing-the-internet-of-things-and-maker-archaeology.html"><a href="d-printing-the-internet-of-things-and-maker-archaeology.html#using-raspberry-pi-in-the-field"><i class="fa fa-check"></i><b>4.2.2</b> Using Raspberry Pi in the Field</a></li>
</ul></li>
<li class="chapter" data-level="4.3" data-path="place-based-interpretation-with-locative-augmented-reality.html"><a href="place-based-interpretation-with-locative-augmented-reality.html"><i class="fa fa-check"></i><b>4.3</b> Place-based Interpretation with Locative Augmented Reality</a><ul>
<li class="chapter" data-level="4.3.1" data-path="place-based-interpretation-with-locative-augmented-reality.html"><a href="place-based-interpretation-with-locative-augmented-reality.html#projection-mapping"><i class="fa fa-check"></i><b>4.3.1</b> Projection Mapping</a></li>
<li class="chapter" data-level="4.3.2" data-path="place-based-interpretation-with-locative-augmented-reality.html"><a href="place-based-interpretation-with-locative-augmented-reality.html#exercises-22"><i class="fa fa-check"></i><b>4.3.2</b> exercises</a></li>
</ul></li>
<li class="chapter" data-level="4.4" data-path="artificial-intelligence-in-digital-archaeology.html"><a href="artificial-intelligence-in-digital-archaeology.html"><i class="fa fa-check"></i><b>4.4</b> Artificial Intelligence in Digital Archaeology</a><ul>
<li class="chapter" data-level="4.4.1" data-path="artificial-intelligence-in-digital-archaeology.html"><a href="artificial-intelligence-in-digital-archaeology.html#agent-based-modeling-abm"><i class="fa fa-check"></i><b>4.4.1</b> Agent-based modeling (ABM)</a></li>
</ul></li>
<li class="chapter" data-level="4.5" data-path="computer-vision-and-archaeology.html"><a href="computer-vision-and-archaeology.html"><i class="fa fa-check"></i><b>4.5</b> Computer Vision and Archaeology</a><ul>
<li class="chapter" data-level="4.5.1" data-path="computer-vision-and-archaeology.html"><a href="computer-vision-and-archaeology.html#convolutional-neural-networks"><i class="fa fa-check"></i><b>4.5.1</b> Convolutional Neural Networks</a></li>
<li class="chapter" data-level="4.5.2" data-path="computer-vision-and-archaeology.html"><a href="computer-vision-and-archaeology.html#applications"><i class="fa fa-check"></i><b>4.5.2</b> Applications</a></li>
<li class="chapter" data-level="4.5.3" data-path="computer-vision-and-archaeology.html"><a href="computer-vision-and-archaeology.html#exercises-23"><i class="fa fa-check"></i><b>4.5.3</b> Exercises</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="5" data-path="digital-archaeologys-place-in-the-world.html"><a href="digital-archaeologys-place-in-the-world.html"><i class="fa fa-check"></i><b>5</b> Digital Archaeology’s Place in the World</a><ul>
<li class="chapter" data-level="5.1" data-path="marketing-digital-archaeology.html"><a href="marketing-digital-archaeology.html"><i class="fa fa-check"></i><b>5.1</b> Marketing Digital Archaeology</a><ul>
<li class="chapter" data-level="5.1.1" data-path="marketing-digital-archaeology.html"><a href="marketing-digital-archaeology.html#exercises-24"><i class="fa fa-check"></i><b>5.1.1</b> exercises</a></li>
</ul></li>
<li class="chapter" data-level="5.2" data-path="sustainability-power-in-digital-archaeology.html"><a href="sustainability-power-in-digital-archaeology.html"><i class="fa fa-check"></i><b>5.2</b> Sustainability & Power in Digital Archaeology</a><ul>
<li class="chapter" data-level="5.2.1" data-path="sustainability-power-in-digital-archaeology.html"><a href="sustainability-power-in-digital-archaeology.html#discussion-12"><i class="fa fa-check"></i><b>5.2.1</b> discussion</a></li>
<li class="chapter" data-level="5.2.2" data-path="sustainability-power-in-digital-archaeology.html"><a href="sustainability-power-in-digital-archaeology.html#exercises-25"><i class="fa fa-check"></i><b>5.2.2</b> exercises</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="6" data-path="on-the-horizons-where-digital-archaeology-might-go-next.html"><a href="on-the-horizons-where-digital-archaeology-might-go-next.html"><i class="fa fa-check"></i><b>6</b> On the Horizons: Where Digital Archaeology Might Go Next</a></li>
<li class="chapter" data-level="" data-path="references.html"><a href="references.html"><i class="fa fa-check"></i>References</a></li>
<li class="divider"></li>
<li><a href="https://creativecommons.org/licenses/by/4.0/" target="blank">CC-BY 4.0</a></li>
<li><a href="https://github.com/rstudio/bookdown" target="blank">Made with bookdown</a></li>
<li><a href="https://www.ecampusontario.ca/" target="blank">Funded by EcampusOntario</a></li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i><a href="./">The Open Digital Archaeology Textbook</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<section class="normal" id="section-">
<div id="what-is-web-mapping" class="section level2">
<h2><span class="header-section-number">3.4</span> What is Web Mapping?</h2>
<p>A web map is a geographic visualization that is supported by computational infrastructures. This form of mapping is fundamentally <em>powered</em> by the Web <a href="http://www.axismaps.com/guide/web/what-is-a-web-map/">(Axismap, 2018)</a>. It should come as no surprise that the ubiquity of web maps correlates with the development of Web 2.0, a marked transformation in the way that that we engage with the Internet <span class="citation">(Aced <a href="#ref-Aced2013">2013</a>)</span>.</p>
<p>As Darcy DiNucci <span class="citation">(DiNucci <a href="#ref-DiNucci1999">1999</a>)</span> remarked in 1999, content loading into a browser as ‘static screenfuls is only an embryo of the Web to come’. Web 2.0, thus is characterized by ‘interactivity’, ‘two-way communication’ often through devices that are ‘Internet-enabled’ and a greater awareness amongst developers of ‘user experience’ and ‘interface’. These interests are correlated with the diversification of screen sizes on mobile hand-held devices such as smart phones, tablets and laptops, all of which require responsiveness, appropriate scaling for size and interaction primarily through touch and swipe. Whereas the first iteration of the Web required advanced training to create a website, Web 2.0, as is often claimed, requires little or no expert knowledge to make a Web-ready ‘thing’ such as a website, a blog, or a Wiki. This is the context in which Web mapping, that is the Web-based visualization of geographic information became popularized.</p>
<p>One can argue that web maps narrow the distance between professional map makers and non-specialist makers; yet some scholars have expressed concerns on the quality of geographic data that are now frequently and widely shared on the Web <span class="citation">(M. van Exel <a href="#ref-Exel2010">2010</a>)</span>. Collaborative online platforms such as <a href="https://www.openstreetmap.org">Open Street Map</a>, for example, have drawn attention to the social dimension of knowledge making; how accurate is information that a lay-person or particular interest community has uploaded? Can we make real-world decisions based on those data? <span class="citation">(Daniel Bégin <a href="#ref-Begin2013">2013</a>)</span> suggest that volunteered geographic information reflects ‘contributors’ motivation and individual preferences in selecting mapped features and delineating mapped areas’, a situation that can enable scholars in examining and assessing the quality of those data.</p>
<p>For archaeologists, web maps and publishing geographic information present challenges and opportunities. Archaeologists are aware that the data they collect through field studies often contain sensitive location information. These concerns are sometimes heightened in contexts where there are tensions between archaeologists and local communities or ethnic and linguistic minorities who might be socially, politically and economically marginalized in that society. Archaeologists often express concern that publishing location information on sites of archaeological and historical interest can facilitate, if not result in, the destruction of those sites through looting. Looting and illegal trafficking of archaeological artefacts and human bones is an issue observed in many places <span class="citation">(Neil Brodie <a href="#ref-Brodie2001">2001</a>, <span class="citation">Huffer and Graham (<a href="#ref-Huffer2017">2017</a>)</span>)</span>.</p>
<p>Recent developments in geovisual analytics that leverage the spatial dimension in data suggest that scholars can work with, and meaningfully analyze these data even where they contain sensitive location information <span class="citation">(G. Andrienko et al. <a href="#ref-Andrienko2007">2007</a>)</span>. This situation opens enormous opportunities for archaeologists to develop tools that are appropriate for meaningful analysis and publication of archaeological data. In the next section, we build upon the ethos of ‘openness’ and present an overview of map services, followed by a guide to making an interactive web map with the Leaflet library. For an example of a Leaflet web map, check out <a href="www.opencontext.org">Open Context</a>.</p>
<div id="overview-of-map-services" class="section level3">
<h3><span class="header-section-number">3.4.1</span> Overview of Map Services</h3>
<p>Tiled map service and <a href="http://www.opengeospatial.org/standards/wms%22%20target=%22_blank">Web Map Service</a> are two forms of Web-based mapping. A WMS is an interface that enables us (the clients) to request specific maps i.e. visual representations of geographic information from a geospatial database. The WMS server is called via a Universal Resource Link (URL) on an Internet-enabled desktop GIS. A request typically consists of the geographic layer (e.g. theme) and geographic area of interest. The response to a request results in <em>geo-registered map images</em> that are displayed and queried within a browser. Because the map is dynamically drawn upon request, and because the server typically uses the most current information from several layers in the geospatial database, WMS maps tend to load slowly. [Toporama](<a href="http://wms.ess-ws.nrcan.gc.ca/wms/toporama_en" class="uri">http://wms.ess-ws.nrcan.gc.ca/wms/toporama_en</a> “target=”_blank) is an example of a WMS server for Canadian topographic themes. (add image for WMS architecture?)</p>
<p>Tile map services such as [TillMill Project](<a href="http://tilemill-project.github.io/tilemill/docs/crashcourse/introduction/" class="uri">http://tilemill-project.github.io/tilemill/docs/crashcourse/introduction/</a> “target=”_blank), [OpenStreetMap](<a href="https://www.openstreetmap.org/" class="uri">https://www.openstreetmap.org/</a> “target=”_blank), [CartoDB](www.carto.com “target=”_blank), and [Stamen](<a href="http://maps.stamen.com" class="uri">http://maps.stamen.com</a> “target=”_blank) all use one or more vector layers that have been rasterized into an image. This rasterized image is divided into 256 x 256 adjacent pixel images or ‘tiles’. This is usually the base layer in a web map.</p>
<p>Each tile is an image on the Web, which means that you can link to it. For example, the following URL points to a specific tile on the Web:</p>
<pre><code> https://tile.openstreetmap.org/7/63/42.png</code></pre>
<p>The three elements in the URL are: 1. <code>tile.openstreetmap.org</code>, the tile server name; 2. <code>7</code>, the zoom level or <code>z</code> value of the tile; and finally 3. <code>63/42</code>, the <code>x</code> and <code>y</code> values in the grid where the tile lives</p>
<p>Z values have a range between 0 and 21, where 21 returns a tile with greatest detail (and smallest sized tile).</p>
<p>Once generated, the set of tiles are stored on disk, ready to be distributed rapidly to large numbers of simultaneous requests. Tiled maps load quickly precisely because they are pre-generated. They shift attention to map aesthetics and smooth map navigation, trading in functionality such as layer order, map scale and projection. [Alex Urquhart](<a href="http://alexurquhart.github.io/free-tiles/" class="uri">http://alexurquhart.github.io/free-tiles/</a> “target=”_blank) maintains a list of tile services. (add image for tiles?)</p>
<p>Data layers are typically added on top of the base layer. Data layers can be points, lines and polygons. These data layers are saved as [GeoJSON](<a href="http://geojson.org/" class="uri">http://geojson.org/</a> “target=”_blank), a format designed for representing on the Web, geographic features with their non-spatial attributes.</p>
</div>
<div id="making-a-web-map-with-leaflet" class="section level3">
<h3><span class="header-section-number">3.4.2</span> Making a web map with Leaflet</h3>
<p>[Leaflet](<a href="http://leafletjs.com/" class="uri">http://leafletjs.com/</a> “target=”_blank) is a JavaScript library developed by [Vladimir Agafonkin](<a href="https://vimeo.com/106112939" class="uri">https://vimeo.com/106112939</a> “target=”_blank) for use with tiled maps. Launched in 2008, Leaflet has become widely used in tile web mapping because the library’s low-barrier customization and interactivity with map elements, and because of its simplified setup when compared to a WMS served map. Moreover, Leaflet’s compatibility with other Web 2.0 technologies and code-sharing platforms such as [GitHub](www.github.com “target=”_blank) has encouraged an active community of ‘makers’.</p>
<p>In keeping with this e-book’s ethos of ‘openness’ and with a motivation to encourage low-cost and low-barrier web mapping, below is an outline to get started on our own interactive web map with Leaflet. We will need:</p>
<ol style="list-style-type: decimal">
<li>some point data, ideally geocoded (lat/long) data saved as CSV;</li>
<li>a text editor installed on local machine, such as Atom;</li>
<li>a hosting service, such as GitHub (public account);</li>
<li>a tile map service, such as OpenStreetMap, MapBox (free account) or other;</li>
<li>a curious you</li>
</ol>
</div>
<div id="exercises-15" class="section level3">
<h3><span class="header-section-number">3.4.3</span> Exercises</h3>
<p>Making a ‘digital thing’ can be exciting and intimidating, and yet seeing one’s creation on the Web can be gratifying. It is important to realize that much of the work to make that happen takes place on a local machine. Therefore, setting up a local environment with the tools we need is highly encouraged. We recommend installing a local web server such as [MAMP](<a href="https://www.mamp.info/en/" class="uri">https://www.mamp.info/en/</a> “target=”_blank) for Macs or [WampServer](<a href="http://www.wampserver.com/en/" class="uri">http://www.wampserver.com/en/</a> “target=”_blank) for Windows.</p>
<p>For this exercise, we’ll use [Prepros](<a href="https://prepros.io/" class="uri">https://prepros.io/</a> “target=”_blank), a temporary preprocessor application that reloads our local browser as we make changes to our HTML file, and enables us to see what’s happening.</p>
<div id="a-simple-leaflet-web-map" class="section level4">
<h4><span class="header-section-number">3.4.3.1</span> A simple Leaflet web map</h4>
<ol style="list-style-type: decimal">
<li><p>Download (web-map) and unzip to known location. Which files and folders do you see? It is helpful to see files and sub-folders within their hierarchical structure before we start editing. Bring the web-map folder into Atom. We do this by ‘Add a Project Folder’.</p></li>
<li>Locate the file named <code>index.html</code> and open it. What do you see in the file? The first line
<!DOCTYPE html>
<p>tells us that this document written in <strong>html</strong>, a language for creating web pages.</p></li>
</ol>
<p>Go ahead and change the title</p>
<pre><code><title>title when you hover over tab</title></code></pre>
<ol start="3" style="list-style-type: decimal">
<li>We now want to have a look at our web page on a local browser. Let’s fire up Prepros (this may take a few minutes) to get a preview. Add the web-map folder as a project, either by drag and drop or use the + at the bottom left of the Prepros window.</li>
</ol>
<p>Right click on the folder to ‘Enable Live Preview’. Then click on the globe icon to see the web page in the browser.</p>
<ol start="4" style="list-style-type: decimal">
<li>On the <code>index.html</code>, locate the tag <code><head></code> and <code><body></code>. In the anatomy of a web page, these sections are most important for creating and loading content.</li>
</ol>
<p>Within our <code><head></code> section, we have added two tags, <code><link></code> and <code><script></code> to the Leaflet library. You will notice that the URL points to <code>CDN</code> or a Content Delivery Network. These are servers that host Web content based on our geographic location. In this case, we request a specific hosted CSS or Cascading Style Sheet for Leaflet and the Leaflet script that adds interactivity to the web map.</p>
<p>The CSS gives us pre-defined styles and elements to format the content of a webpage i.e. we get the look and feel of a Leaflet map. It includes fonts, size, colour, line spacing, and Leaflet elements like the map, and an icon for zoom.</p>
<p><strong>It is key that that CSS loads before the script, and that both of them are within the <code><head></head></code> tags.</strong></p>
<ol start="5" style="list-style-type: decimal">
<li>Next, in the <code><body></code> section of our web page, we add a <code><div></code> element that will contain a thing called <code>map</code>.</li>
</ol>
<pre><code><div id="map"></div></code></pre>
<p>We then call the <code><script></code> and initialize our map using <code>L.map</code>.</p>
<p>Examine the code</p>
<pre><code><script>
var map = L.map('map').setView([40.5931,-75.5265], 12);</code></pre>
<p><code>.setView</code> centers our web map on specific coordinates and at a particular zoom level. Change the coordinates and hit save. Have a look at the live preview. What do you see?</p>
<ol start="6" style="list-style-type: decimal">
<li>We now want to load a tile server for our base map, using <code>L.tileLayer</code></li>
</ol>
<pre><code>L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
</script></code></pre>
<p>This code tells us the following: 1. <code>https://{s}.tile.openstreetmap.org</code>, tile server we want, 2. <code>19</code>, the maximum zoom level, and 3.<code>'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'</code> the attribution for that tile provider</p>
<p>Take note of <code>.addTo(map);</code> that actually adds the layer to our web map, and the <code></script></code> closes this particular script. To load additional layers or attribute data, we would add our code within the tags <code><script></script></code> which we outline in the next subsection.</p>
<p>Congratulations! We have our first Leaflet map. Examine the map in the Prepros preview window.</p>
</div>
<div id="loading-point-data-onto-a-leaflet-map" class="section level4">
<h4><span class="header-section-number">3.4.3.2</span> Loading point data onto a Leaflet map</h4>
<p>Now that we have a base map set up, we want to load some feature data i.e. points, lines, polygons, onto it. We have a few different ways to add feature data. They can be loaded as a Common Separated Value (CSV) file or a GeoJSON.</p>
<p>In this exercise, we will work with a GeoJSON, a small file (point-data.geojson) with about 20 potential excavation sites. The original CSV had four fields, all of which were converted into GeoJSON using an online tool [here](<a href="http://www.convertcsv.com/csv-to-geojson.htm/" class="uri">http://www.convertcsv.com/csv-to-geojson.htm/</a> “target=”_blank).</p>
<ol style="list-style-type: decimal">
<li><p>Fire up a text editor and examine the contents of <code>point-data.geojson</code>. What do you see? Take note of <strong>type</strong>, <strong>geometry</strong>, and <strong>properties</strong>. How many properties or attributes are there, what are they?</p></li>
<li><p>Next, open <code>index.html</code>. We will now add several lines of code that enable us to grab our GeoJSON data, load them and represent them as markers.</p></li>
</ol>
<p>Locate the <code><head></code> tag, and the script for loading Leaflet. Below it, add a script called jQuery. This Javascript library is widely used to enable interactivity, animations, plug-ins and widgets. We load jQuery on our web page using the following code after Leaflet.js :</p>
<pre><code> <!-- loads Leaflet.js -->
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!-- loads jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></code></pre>
<ol start="3" style="list-style-type: decimal">
<li>We are now ready to add a few lines to get our GeoJSON (point-data.geojson). In the <code><body></code> section, let’s add the following code below your tile layer:</li>
</ol>
<pre><code>// load a tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
// load GeoJSON and save it as a thing called `data`
$.getJSON("point-data.geojson", function(data) {</code></pre>
<p>followed by :</p>
<pre><code>// adds GeoJSON objects to layer
data = L.geoJson(data ,{
// converts point feature into a map layer
pointToLayer: function(feature,latlng){
return L.marker(latlng);
}
}).addTo(map);
});</code></pre>
<ol start="4" style="list-style-type: decimal">
<li><p>Save the file and preview it in the browser. Congratulations! We’ve added our own point feature data to a Leaflet map.</p></li>
<li><p>It would be great to have interaction beyond panning and zooming on our web map. One way is to add pop-ups to each of our markers that we can click on.</p></li>
</ol>
<p>Locate <code>pointToLayer</code> which we called passed a function. We will create a variable called marker and bind a pop-up to each marker:</p>
<pre><code>// creates a variable called marker
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng);
// binds a popup to marker, assigns properties to display
marker.bindPopup(feature.properties.Label + '<br/>');
return marker;
}
}).addTo(map);
});</code></pre>
<ol start="6" style="list-style-type: decimal">
<li>That’s it! We’ve created a web map with our own point data, and we have markers with pop-ups to click on.</li>
</ol>
</div>
</div>
<div id="resources" class="section level3">
<h3><span class="header-section-number">3.4.4</span> Resources</h3>
<p>Below are examples in archaeology that use Leaflet that you can try out, and that have repositories that you can fork for you own projects:</p>
<ol style="list-style-type: decimal">
<li>The Digital Atlas of Ancient Egypt developed at the Department of Anthropology, Michigan State University: <a href="https://msu-anthropology.github.io/daea/" class="uri">https://msu-anthropology.github.io/daea/</a></li>
</ol>
<p>Repository: <a href="https://github.com/msu-anthropology/daea" class="uri">https://github.com/msu-anthropology/daea</a></p>
<ol start="2" style="list-style-type: decimal">
<li>TOMB: The Online Map of Bioarchaeology developed by Lisa Bright (Michigan State University): <a href="http://brightl1.github.io/TOMB/" class="uri">http://brightl1.github.io/TOMB/</a></li>
</ol>
<p>Repository: <a href="https://github.com/brightl1/TOMB/" class="uri">https://github.com/brightl1/TOMB/</a></p>
<ol start="3" style="list-style-type: decimal">
<li>MINA | Map Indian Archaeology developed by Dr Neha Gupta (Memorial University of Newfoundland): <a href="http://dngupta.github.io/mina.github.io/" class="uri">http://dngupta.github.io/mina.github.io/</a></li>
</ol>
<p>Repository: <a href="https://github.com/dngupta/mina.github.io" class="uri">https://github.com/dngupta/mina.github.io</a></p>
</div>
</div>
<h3>References</h3>
<div id="refs" class="references">
<div id="ref-Aced2013">
<p>Aced, Cristina. 2013. “Web 2.0: The Origin of the Word That Has Changed the Way We Understand Public Relations.” <em>International PR 2013 Conference. Images of Public Relations</em>. <a href="https://www.researchgate.net/publication/266672416_Web_20_the_origin_of_the_word_that_has_changed_the_way_we_understand_public_relations" class="uri">https://www.researchgate.net/publication/266672416_Web_20_the_origin_of_the_word_that_has_changed_the_way_we_understand_public_relations</a>.</p>
</div>
<div id="ref-DiNucci1999">
<p>DiNucci, Darcy. 1999. “Fragmented Future.” <em>Print Magazine</em>. <a href="http://darcyd.com/fragmented_future.pdf" class="uri">http://darcyd.com/fragmented_future.pdf</a>.</p>
</div>
<div id="ref-Exel2010">
<p>M. van Exel, S. Fruijtier, E. Dias. 2010. “The Impact of Crowdsourcing on Spatial Data Quality Indicators.” In <em>Proceedings of Giscience 2011, Zurich, Switzerland, 14–17 September 2010</em>. <a href="https://www.researchgate.net/publication/267398729_The_impact_of_crowdsourcing_on_spatial_data_quality_indicators" class="uri">https://www.researchgate.net/publication/267398729_The_impact_of_crowdsourcing_on_spatial_data_quality_indicators</a>.</p>
</div>
<div id="ref-Begin2013">
<p>Daniel Bégin, S Roche, Rodolphe Devillers. 2013. “Assesing Volenteered Geographic Information (Vgi) Quality Based on Contributors’ Mapping Behaviours.” <em>International Archives of the Photogrammetry, Remote Sensing and Spatial Information Sciences</em>. <a href="https://www.int-arch-photogramm-remote-sens-spatial-inf-sci.net/XL-2-W1/149/2013/isprsarchives-XL-2-W1-149-2013.pdf" class="uri">https://www.int-arch-photogramm-remote-sens-spatial-inf-sci.net/XL-2-W1/149/2013/isprsarchives-XL-2-W1-149-2013.pdf</a>.</p>
</div>
<div id="ref-Brodie2001">
<p>Neil Brodie, Colin Renfrew, Jennifer Doole, ed. 2001. <em>Trade in Illicit Antiquities: The Destruction of the World’s Archaeological Heritage</em>. Cambridge: McDonald Institute for Archaeological Research.</p>
</div>
<div id="ref-Huffer2017">
<p>Huffer, Damien, and Shawn Graham. 2017. “The Insta-Dead: The Rhetoric of the Human Remains Trade on Instagram.” <em>Internet Archaeology</em>. doi:<a href="https://doi.org/https://doi.org/10.11141/ia.45.5">https://doi.org/10.11141/ia.45.5</a>.</p>
</div>
<div id="ref-Andrienko2007">
<p>Andrienko, G., N. Andrienko, P. Jankowski, M.-J. Kraak, D. Keim, A. M. MacEachren, and S. Wrobel. 2007. “Geovisual Analytics for Spatial Decision Support. Setting the Research Agenda.” <em>International Journal of Geographical Information Science</em> 21 (8): 839–57.</p>
</div>
</div>
</section>
</div>
</div>
</div>
<a href="storytelling-and-the-archaeological-cms-omeka-kora-and-mukurtu.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="virtual-archaeology.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
</div>
</div>
<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": false,
"facebook": true,
"twitter": true,
"google": false,
"linkedin": false,
"weibo": false,
"instapper": false,
"vk": false,
"all": ["facebook", "google", "twitter", "linkedin", "weibo", "instapaper"]
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/o-date/draft/edit/gh-pages/03.4-webmapping-with-leaflet.rmd",
"text": "Edit"
},
"download": ["odate.pdf", "odate.epub"],
"toc": {
"collapse": "section",
"number_sections": null
}
});
});
</script>
</body>
</html>