-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
604 lines (490 loc) · 38.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
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
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Scholten Work Portfolio</title>
<meta name=‘viewport’ content=‘initial-scale=1,maximum-scale=1,user-scalable=no’ />
<!-- Add normalize.css to normalize default styles across browsers -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" />
<!-- Load Font Awesome icons -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Add Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Overlock' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Overlock+SC' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,300italic,500' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" />-->
<link href='https://fonts.googleapis.com/css?family=Imprima' rel='stylesheet' type='text/css'>
<style>
/* CSS style rules go here! */
/* Change the background to an image */
body {
margin: 0;
padding: 0;
/* This is where the background image is controlled */
/* background-image: url("Map%20Room%206.JPG");*/
/* height: 0px;*/
background-color: #EED263;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Lato', sans-serif;
font-weight: 200;
/* color: #FD0606;*/
font-size: 1.0em;
}
section {
width: 80%;
margin: 10px auto;
}
header {
width: 100%;
min-width: 800px;
margin: 0 auto;
background: #36A2FF;
padding: 15px 0 20px;
}
/* This controls the top-most text; my name*/
h1 {
font-family: "Overlock SC", sans-serif;
color: #375671;
font-size: 2.7em;
width: 80%;
margin: 0 auto;
color: whitesmoke;
text-shadow: 4px 4px 6px #0e3e3e;
}
/* This controls the sub-text underneath my name*/
h2 {
font-family: "Alegreya Sans", sans-serif;
font-size: 2.2em;
font-style: italic;
color: #375671;
width: 80%;
margin: 0 auto;
color: whitesmoke
}
h3 {
font-family: sans-serif;
font-size: 1.5em;
margin: 20px 2px 4px;
color: #000000;
line-height: 26px;
}
p {
font-size: 1.0em;
color: #000000;
width: 90%;
margin: 5px 20px 10px;
}
ul {
list-style-position: outside;
text-align: outside;
font-size: .9em;
color: #000000;
line-height: 1.0em;
margin-left: 1em;
}
ul li {
text-align: inside;
list-style-position: outside;
}
a,
a:visited {
color: #003d71;
}
.project {
width: 80%;
min-width: 700px;
height: 100%;
margin: 32px auto;
}
.project:after {
content: "";
display: table;
clear: both
}
.project-image {
width: 388px;
height: 240px;
/* background: #F2EDDE;*/
float: left;
margin-right: 20px;
border: 3px solid #221f14;
}
.info {
width: 80%;
margin: 10px auto;
}
.svg-title {
float: left;
display: inline-block;
width: 75px;
margin: -8px 10px -8px 0;
}
When browser is 800px wide or less @media screen and (max-width: 800px) {
.first-column,
.column {
width: 100%;
}
}
</style>
</head>
<body>
<!-- <div id='map'>-->
<header>
<h1>Tom Scholten</h1>
<h2>Map Room</h2>
</header>
<section class='info'>
<h2></h2>
<p>The materials that are featured here illustrate my cartographic and geo-spatial work both as they currently exist and as I continue transitioning into the field of web-based geospatial analysis and web-mapping.</p>
<p>Content on this page will change as I develop and create more maps showing a variety of geo-spatial topics. Stay tuned and visit this page often!</p>
</section>
<hr style="border: 3px solid grey;" ; width="80%" />
<!-- ***********************************************************************************-->
<section class="project">
<a href="https://storymaps.arcgis.com/stories/9519f463e2784317a98836c94167cb33" target="_blank"><img src="Maps%20and%20Images/Caldwell%20Image1.JPG" alt="Caldwell, Idaho Assessment" class="project-image" /></a>
<h3>Caldwell, ID Community Assessment</h3>
<ul>
<p>See the map: <a href="https://storymaps.arcgis.com/stories/9519f463e2784317a98836c94167cb33">Caldwell, ID Needs Assessment</a></p>
</ul>
<a href="https://storymaps.arcgis.com/stories/9519f463e2784317a98836c94167cb33"></a>
<p>This assessment examines the City of Caldwell, Idaho for areas (e.g. Census Tracts) with need for greater assistance and support for citizens that live in those locations. In some cases there may be a lack of some resource such as healthy food sources, high speed internet, transportation options and educational opportunities for all ages. Conversely, some areas of the city might have more of some phenomena or social condition such as neighborhood cohesion, violent crime, traffic accidents, and capital investment. </p>
<h3>Storymap features include:</h3>
<p>
<li>Map interaction that allows paning, zooming in/out, and pop-up boxes when a location or featured is selected</li>
<Li>Clicking on point locations triggers a information box that contains additional information</Li>
<Li>Storymap that provides narratives on the assessment background, demographic features (by Census Tract), </Li>
</p>
<h3>Software, tools, methods, and data used:</h3>
<Li>GitHub (repository hosting service)</Li>
<Li>Open Street Map</Li>
<Li>ArcGIS Online</Li>
<Li>ArcPro</Li>
<Li>ESRI Storymaps</Li>
</section>
<hr style="border: 3px solid grey;" ; width="80%" />
<!-- ***********************************************************************************-->
<section class="project">
<a href="https://storymaps.arcgis.com/stories/30a517bbac5044699b75efd7bacb373f" target="_blank"><img src="Maps%20and%20Images/GR%20Assessment%20image%205.JPG" alt="Grand Rapids, MI Assessment" class="project-image" /></a>
<h3>Grand Rapids Community Assessment</h3>
<ul>
<p>See the map: <a href="https://storymaps.arcgis.com/stories/30a517bbac5044699b75efd7bacb373f">Grand Rapids, MI Needs Assessment</a></p>
</ul>
<a href="https://storymaps.arcgis.com/stories/30a517bbac5044699b75efd7bacb373f"></a>
<p>This assessment examines the City of Grand Rapids (Michigan) for areas (e.g. Census Tracts) with need for greater assistance and support for citizens that live in those locations. In some cases there may be a lack of some resource such as healthy food sources, high speed internet, transportation options and educational opportunities for all ages. Conversely, some areas of the city might have more of some phenomena or social condition such as neighborhood cohesion, violent crime, traffic accidents, and capital investment. </p>
<h3>Storymap features include:</h3>
<p>
<li>Map interaction that allows paning, zooming in/out, and pop-up boxes when a location or featured is selected</li>
<Li>Clicking on point locations triggers a information box that contains additional information</Li>
<Li>Storymap that provides narratives on the assessment background, demographic features (by Census Tract), </Li>
</p>
<h3>Software, tools, methods, and data used:</h3>
<Li>GitHub (repository hosting service)</Li>
<Li>Open Street Map</Li>
<Li>ArcGIS Online</Li>
<Li>ArcPro</Li>
<Li>ESRI Storymaps</Li>
</section>
<hr style="border: 3px solid grey;" ; width="80%" />
<!-- ***********************************************************************************-->
<section class="project">
<a href="https://storymaps.arcgis.com/stories/30a517bbac5044699b75efd7bacb373f" target="_blank"><img src="Maps and Images/Baltimore Assessment.JPG" alt="Baltimore Assessment" class="project-image" /></a>
<h3>Baltimore Community Assessment</h3>
<!-- <a href="https://data.cityofchicago.org/">Data source:</a>Chicago Data Portal-->
<ul>
<p>See the map: <a href="https://storymaps.arcgis.com/stories/30a517bbac5044699b75efd7bacb373f">Baltimore, MD Needs Assessment</a></p>
</ul>
<p>This assessment examines the City of Baltimore, Maryland for areas (e.g. Census Tracts) with need for greater assistance and support for citizens that live in those locations. In some cases there may be a lack of some resource such as healthy food sources, high speed internet, transportation options and educational opportunities for all ages. Conversely, some areas of the city might have more of some phenomena or social condition such as neighborhood cohesion, violent crime, traffic accidents, and capital investment. </p>
<h3>Storymap features include:</h3>
<p>
<li>Map interaction that allows paning, zooming in/out, and pop-up boxes when a location or featured is selected</li>
<Li>Clicking on point locations triggers a information box that contains additional information</Li>
<Li>Storymap that provides narratives on the assessment background, demographic features (by Census Tract), </Li>
</p>
<h3>Software, tools, methods, and data used:</h3>
<Li>GitHub (repository hosting service)</Li>
<Li>Open Street Map</Li>
<Li>ArcGIS Online</Li>
<Li>ArcPro</Li>
<Li>ESRI Storymaps</Li>
</section>
<hr style="border: 3px solid grey;" ; width="80%" />
<!-- ***********************************************************************************-->
<section class="project">
<a href="https://storymaps.arcgis.com/stories/30a517bbac5044699b75efd7bacb373f" target="_blank"><img src="Maps%20and%20Images/FVPD%20Assessment%205.JPG" alt="Fox Valley Park District" class="project-image" /></a>
<h3>Fox Valley Park District</h3>
<!-- <a href="https://data.cityofchicago.org/">Data source:</a>Chicago Data Portal-->
<ul>
<p>See the map: <a href="https://storymaps.arcgis.com/stories/30a517bbac5044699b75efd7bacb373f">Fox Valley Park District Assessment</a></p>
</ul>
<h3>Map features include:</h3>
<p>
<li>Several interactive elements that give the user the ability to select various data attributes and have the map dynamically update. User interaction is one of the most important differences between traditional static maps and web-based maps and the ability to change the map not only offers new possibilities for understanding the information, but It also makes engaging with a map more interesting and rewarding: it's fun!</li>
<Li>Clicking on point locations of pharmacies, hospitals, and grocery stores calls up a pop-up box that provides the name and address of the specific location.</Li>
<Li>An information panel, available when interacting with features, which will display more information than space allows within the popups or tooltips.</Li>
</p>
<h3>Software, tools, methods, and data used:</h3>
<Li>GitHub (repository hosting service)</Li>
<Li>Open Street Map</Li>
<Li>ArcGIS Online</Li>
<Li>ArcPro</Li>
<Li>ESRI Storymaps</Li>
</section>
<hr style="border: 3px solid grey;" ; width="80%" />
<!-- ***********************************************************************************-->
<section class="project">
<a href="https://tscholten1.github.io/map673-Final-Project/" target="_blank"><img src="Maps%20and%20Images/Getting%20to_from%20Chicago.JPG" alt="Getting to and from in Chicago" class="project-image" /></a>
<h3>Getting to and from in Chicago</h3>
<ul>
<p>See the map: <a href="https://tscholten1.github.io/map673-Final-Project/">Getting to and from in Chicago</a></p>
</ul>
<!-- <a href="https://data.cityofchicago.org/">Data source:</a>Chicago Data Portal-->
<p>This project is the culmination of lessons and techniques learned throughout the coursework for my graduate certificate in ineractive web-mapping at the University of Kentucky, <i>Design For Interactive Web Mapping</i>. The map includes a wide variety of user interaction elements that include check boxes to turn on/off specific point location layers, marker clustering which aggregates large numbers of locations into one marker at a given scale, ability to drop a marker to designate a travel starting point, and the ability to click on a second point location to determine the distance (in miles) and time (by walking, biking, driving) to travel to the destination point.</p>
<h3>Map features include:</h3>
<p>
<li>Several interactive elements that give the user the ability to select various data attributes and have the map dynamically update. User interaction is one of the most important differences between traditional static maps and web-based maps and the ability to change the map not only offers new possibilities for understanding the information, but It also makes engaging with a map more interesting and rewarding: it's fun!</li>
<Li>Clicking on point locations of pharmacies, hospitals, and grocery stores calls up a pop-up box that provides the name and address of the specific location.</Li>
<Li>Because of the large number of point locations that cluster in the City of Chicago, a Leaflet plugin was used
<a href="https://github.com/Leaflet/Leaflet.markercluster">Leaflet marker cluster</a>. This plugin clusters the markers and shows the number of items in each cluster, and as the user zooms in, the map adjusts the clusters based on the current view. This not only makes the map easier for the user to understand, it’s also a more efficient form of displaying dense concentrations of data points.
</Li>
<Li>An information panel, available when interacting with features, which will display more information than space allows within the popups or tooltips.</Li>
</p>
<h3>Key concepts:</h3>
<Li>Used the drawMap() function which uses GeoJSON data to create a L.GeoJson object with basic styles, adds it to the map, and then fits the map view to the extent of the layer.</Li>
<Li>Used the <a href="https://www.w3schools.com/xml/ajax_intro.asp">AJAX</a> tool to load an external file containing GeoJSON data. These data contained both the geometry information for drawing SVG elements on the map and the attribute data.</Li>
<Li>Loaded GeoJSON data using the JQuery method .getJSON(). The callback function executes and accesses the GeoJSON data which has been parsed by JQuery and preserved in the same JSON structure</Li>
<Li>Created and used the Leaflet L.GeoJson object method</Li>
<Li>Invoked Leaflet methods on layer groups and individual layers</Li>
<Li>Used a Leaflet layer control to manage multiple data layers</Li>
<Li>Loaded GeoJSON data stored as a JavaScript object and saved within an external file into the script</Li>
<Li>Used the Leaflet L.geoJson() method to draw point-level data to a Leaflet GeoJson layer</Li>
<h3>Software, tools, methods, and data used:</h3>
<Li>GitHub (repository hosting service)</Li>
<Li>Used <a href="https://mapshaper.org/">Mapshaper</a>.This site enables editing map data in shapefile, GeoJSON, TopoJSON, DBF, and CSV formats.</Li>
<Li>Used <a href="https://www.convertcsv.com/csv-to-geojson.htm">Convert CSV files to Geojson</a>.This site converts Comma Separated Values (CSV) and Excel files into Geojson (and other formats) by loading or a CSV or Excel file, or loading from an external web page. This tool runs on the client-side using Javascript, so data never leaves a local computer. Saved the output by copying or use the "Download Result" feature.</Li>
<Li>Used <a href="https://github.com/Leaflet/Leaflet.markercluster">Leaflet marker cluster</a>.This not only makes the map easier for the user to understand, it’s also more efficient.</Li>
<Li>Brackets (text editor)</Li>
<Li>GeoJSON (data format for representing geographic features)</Li>
<Li>Leaflet (open source Javascript library for web-mapping apps)</Li>
</section>
<!-- ***********************************************************************************-->
<hr style="border: 3px solid grey;" ; width="80%" />
<section class="project">
<a href="https://tscholten1.github.io/MAP671-Final-Project/" target="_blank"><img src="Maps%20and%20Images/2019%20Road%20Trip.png" alt="2019 Road Trip" class="project-image" /></a>
<h3>2019 Road Trip web page with interactive map</h3>
<ul>
<p>See the map: <a href="https://tscholten1.github.io/MAP671-Final-Project/">2019 Road Trip</a></p>
</ul>
<p>This project synthesized a variety of tools, techniques, and methods throughout MAP 671, <i>Introduction to New Mapping.
</i> Key lessons learned include:</p>
<li>Creating a process to export Google location data from my Google account into a usable format for mapping. This involved:</li>
<li>Exporting data from Google location history located on cell phone. Because Google allows only exporting in monthly time frames, I had to export each day for the time frame that I wanted as a .KML file.</li>
<li>Upon exporting each day's data, I then uploaded that data to Geojson.io where I was able to see and verify all point locations.</li>
<li>Next, I was able to export all 15 days of individual .KML files as one geojson file which was then uploaded to Mapbox</li>
<li>Two duplicate files were made of this dataset to show a line segment of my travel route and a second to show point locations</li>
<li>These two datasets were then styled with color and size to create a visually appealing map features.</li>
<li>Working with numerous CSS and HTML refinements to create a visually and interactively pleasing map. Specific elements that I explored and used include:</li>
<li>Resizing large (both in pixels and megabytes) photos</li>
<li>Placment of photos within a two column web page</li>
<li>Inserting a Mapbox map within the web page</li>
<li>Creating hyperlinks that provide readers with a convenient way to gain additional information on the location or site that was visited.</li>
<li>Styled datasets in Mapbox for point locations, line segments, and feature labels.</li>
<li>A seperate geojson file was created of a smaller set of locations to highligh key areas that would help to provide reference on the map.</li>
<h3>Web page and map features include:</h3>
<p>
<Li>Details for selected points of interest that were visted on the trip including an image/photo of the location.</Li>
<Li>Paragraphs providing a synopsis of the points of interest</Li>
<Li>Hyperlinks (in blue text) that directs the user to an external web source of additional information on the point of interest</Li>
<Li>Initial web map (created in Mapbox studio) that shows the specific travel route based on location data. Points of interest are labeled that changes based on user zoom and panning actions.</Li>
<Li>A link to the interactive map in Mapbox</Li>
<h3>Software, tools, methods, and data used:</h3>
<Li>GitHub (repository hosting service)</Li>
<Li>Used <a href="https://mapshaper.org/">Mapshaper</a>.This site enables editing map data in shapefile, GeoJSON, TopoJSON, DBF, and CSV formats.</Li>
<Li>Used <a href="https://www.convertcsv.com/csv-to-geojson.htm">Convert CSV files to Geojson</a>.This site converts Comma Separated Values (CSV) and Excel files into Geojson (and other formats) by loading or a CSV or Excel file, or loading from an external web page. This tool runs on the client-side using Javascript, so data never leaves a local computer. Saved the output by copying or use the "Download Result" feature.</Li>
<Li>Brackets (text editor)</Li>
<li>Qgis (open-source GIS software)</li>
<Li>GeoJSON (data format for representing geographic features)</Li>
<Li>Mapbox web service</Li>
</section>
<hr style="border: 3px solid grey;" ; width="80%" />
<!-- ***********************************************************************************-->
<section class="project">
<a href="https://tscholten1.github.io/MAP671-Lab-09/" target="_blank"><img src="Maps%20and%20Images/Devils%20Tower.PNG" alt="Devils Tower" class="project-image" /></a>
<h3>Devils Tower National Monument</h3>
<p>This project involved creating a web page to feature and describe Devils Tower National Monument in northeastern Wyoming. In addition to a two-column layout that provided text and graphics describing the geologic and historical nature of the landmark, the web page includes a dynamic map created using Mapbox Studio. This project involved initially acquiring data from the United States Board of Geographic Names (GNIS), working with Mapbox Studio to create a baselayer, add custom layers (points), specifying the map position, and styling the label visualization with data conditions.</p>
<p>See the map: <a href="https://tscholten1.github.io/MAP671-Lab-09/">Devils Tower</a></p>
<h3>Software, tools, methods, and data used:</h3>
<Li>GitHub (repository hosting service)</Li>
<Li>Brackets (text editor)</Li>
<Li>Qgis (open-source GIS software)</Li>
<li>Created elevation contours with Qgis GDAL (an open-source computer software library for reading and writing raster and vector geospatial data formats)</li>
<li>Used Qgis tools to clip raster by extent and extract elevation contour lines</li>
<li>Used Qgis raster and field calculators</li>
<li>Worked with MapBox to import raster and vector layers as well as to style layers for color and visual appearance</li>
<li>Styled and published map of Devils Tower showing the spatial extent and contour lines based on the USGS 1/3 arc-second DEM (Digital Elevation Model).</li>
<li>Used Qgis GDAL to convert raster elevation units and create contours.</li>
</section>
<hr style="border: 3px solid grey;" ; width="80%" />
<!-- ***********************************************************************************-->
<section class="project">
<a href="https://tscholten1.github.io/Oregon-Unemployment/" target="_blank"><img src="Maps%20and%20Images/Oregon%20Unemployment%20Rates%20by%20County%20w_slider.jpg" alt="Oregon Unemployment" class="project-image" /></a>
<h3>Map of Oregon Unemployment by County</h3>
<p>The focus of this project was to provide multiple user interaction elements to explore the data within the spatial and temporal context of unemployment rates in Oregon counties and more broadly, the entire state.</p>
<ul>
<p>See the map: <a href="https://tscholten1.github.io/Oregon-Unemployment/">Map of Oregon Unemployment by Counties</a></p>
</ul>
<h3>Map features include:</h3>
<p>
<Li>Choropleth map displays state and county-level unemployment rates by year.</Li>
<Li>Several interactive elements that give the user the ability to select various data attributes and have the map dynamically update.</Li>
<Li>A slider bar for the user to change the year of data that updates both the choropleth map and the information panel.</Li>
<Li>A popup/tooltip allows the user an interactive experience to retrieve specific values (e.g. unemployment rate and county name) from individual counties</Li>
<Li>The ability to switch between data sets using a slider bar to change years and have the map dynamically update to reflect these changes instantly.</Li>
<Li>An information panel, available when interacting with county features, which will display more information than space allows within the popups or tooltips.</Li>
</p>
<h3>Key concepts:</h3>
<Li>Used a JQuery .getJSON() method to make an AJAX request and load the json file.</Li>
<Li>Used <a href="https://http://papaparse.com//">Papa Parse</a>, an in-browser CSV data parser, to load CSV data and convert it to JSON format.</Li>
<Li>Used <a href="https://www.w3schools.com/xml/ajax_intro.asp">AJAX</a> to load an external file containing GeoJSON data. These data contained both the geometry information for drawing our SVG elements on the map (e.g., Oregon counties) and the data attribute data (e.g., unemployment rates for each county).</Li>
<Li>Loading GeoJSON data using the JQuery method .getJSON(). The callback function then executes, and accessing GeoJSON data, which has been parsed by JQuery and preserved in the same JSON structure.</Li>
<Li>Created and used the Leaflet L.GeoJson object</Li>
<Li>Created the classification breaks one time within the script using the entire range of data values.</Li>
<Li>Invoked Leaflet methods on layer groups and individual layers after creation</Li>
<Li>Used a Leaflet layer control to manage multiple data layers</Li>
<Li>Used the Leaflet L.geoJson() method to draw point-level data to a Leaflet GeoJson layer</Li>
<h3>Software, tools, methods, and data used:</h3>
<Li>GitHub (repository hosting service)</Li>
<Li>Papa Parse (Javascript .csv parser that converts .csv files to Json)</Li>
<Li>Brackets (text editor)</Li>
<Li>GeoJSON (data format for representing geographic features)</Li>
<Li>Leaflet (open source Javascript library for web-mapping apps)</Li>
<li>AJAX (a collection of technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script)</li>
</section>
<hr style="border: 3px solid grey;" ; width="80%" />
<!-- *********************************************************************************-->
<section class="project">
<a href="https://tscholten1.github.io/Kentucky-Housing-by-County/" target="_blank"><img src="Maps%20and%20Images/Kentucky%20Interactive%20Choropleth2.jpg" alt="Housing in Kentucky" class="project-image" /></a>
<h3>Map of Kentucky Homeownership by County</h3>
<!-- <h3></h3>-->
<ul>
<p>See the map: <a href="https://tscholten1.github.io/map672_Lab09/">Map of Homeownership Characteristics by County</a></p>
</ul>
<p>The focus of this project was to provide user intaction elements to explore homeownership data within the spatial context of Kentucky counties.This map was built using custom Javascript code drawing upon the Leaflet Javascript Library as well as CSS and HTML styling rules.</p>
<h3>Map features include:</h3>
<p>
<Li>Several interactive elements that give the user the ability to select various data attributes and have the map dynamically update.</Li>
<Li>Display housing characteristics (e.g. owned, owned with mortgage, rented) by county</Li>
<Li>A user interface element allowing the user to choose a new data attribute to dynamically update the map and legend.</Li>
<Li>An information panel, available when interacting with county features, which will display more information than space allows within the popups or tooltips.</Li>
<Li>The popup/tooltip allows the user an interactive experience to retrieve specific values from individual counties</Li>
<Li>Provide the user the ability to switch between data sets and have the map dynamically update to reflect these changes</Li>
</p>
<h3>Key concepts:</h3>
<Li>Introducing map elements of user interaction such as drop down layers, tool tip display on map of counties that is also linked to and updates an information panel.</Li>
<Li>Declaring functions (drawMap, getClassBreaks, getColor, drawLegend)</Li>
<Li>Refactoring a function for dynamic updating which involves executing blocks of code once and blocks of code that are executed repreatedly.</Li>
<Li>Creating and using the Leaflet L.GeoJson object</Li>
<Li>Invoking Leaflet methods on layer groups and individual layers after creation</Li>
<Li>Using a Leaflet layer control to manage multiple data layers</Li>
<Li>Setting universal styles and layer-specific styles using the L.GeoJson style option</Li>
<Li>Loading GeoJSON data – stored as a JavaScript object and saved within an external file into the script</Li>
<Li>Using the Leaflet L.geoJson() method to draw point-level data to a Leaflet GeoJson layer</Li>
<h3>Software, tools, methods, and data used:</h3>
<Li>GitHub (repository hosting service)</Li>
<Li>Brackets (text editor)</Li>
<Li>GeoJSON (data format for representing geographic features)</Li>
<Li>Jquery (JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation)</Li>
<Li>Leaflet (open source Javascript library for web-mapping apps)</Li>
</section>
<!-- ***********************************************************************************-->
<hr style="border: 3px solid grey;" ; width="80%" />
<section class="project">
<a href="https://tscholten1.github.io/map672_Lab09/" target="_blank"><img src="Maps%20and%20Images/Lab%209%20Map.jpg" alt="Map of power source" class="project-image" /></a>
<h3>Map of power plants displayed using propotional symbol sizes to visualize the amount of power produced from a particular fuel source (i.e. coal, solar, nuclear)</h3>
<p>This map was built using Javascript code drawing upon the Leaflet Javascript Library as well as CSS and HTML styling rules.</p>
<h3>Map features include:</h3>
<p>
<Li>Display power plant power generation using proportional symbol size to show the amount of power produced from a particular fuel source.</Li>
<Li>Allow the user to compare three different fuel sources (of any amount of generating capacity) by visually encoding the proportional symbols with distinct colors (i.e., make the symbol for each fuel source a different color).</Li>
<Li>A layer control to toggle on and off the visibility of various power plant data layers.</Li>
<Li>Styling the label text within the layer control to correspond with the color used to encode a specific power fuel source when the user clicks on the map once, the map display will change to only show plants within 500 km of the click event after the user clicks on the map to filter by distance and then clicks on any power plant currently visible, a popup will show specific information about the plant. this information should include the plant's name, its fuel source, and the distance from the plant to the the click point.</Li>
</p>
<h3>Software, tools, methods, and data used:</h3>
<Li>GitHub (repository hosting service)</Li>
<Li>Brackets (text editor)</Li>
<Li>GeoJSON (data format for representing geographic features)</Li>
<Li>Leaflet (open source Javascript library for web-mapping apps)</Li>
<h3>Key concepts:</h3>
<Li>Created using the Leaflet L.GeoJson object</Li>
<Li>Invoked Leaflet methods on layer groups and individual layers</Li>
<Li>Used a Leaflet layer control to manage multiple data layers</Li>
<Li>Setting universal styles and layer-specific styles using the L.GeoJson style option</Li>
<Li>Loaded GeoJSON data – stored as a JavaScript object and saved within an external file</Li>
<Li>Used the Leaflet L.geoJson() method to draw point-level data to a Leaflet GeoJson layer</Li>
<Li>Used L.GeoJson()options: pointToLayer to convert default Leaflet markers to circleMarkers, filter to show only features meeting specific criteria, and onEachFeature to bind Leaflet Tooltip objects to the features and attach additional event listeners such as mouseover and mouseout and using techniques for code refactoring.</Li>
<ul>
<li>See the map: <a href="https://tscholten1.github.io/map672_Lab09/">Map of power plants using coal, solar, and nuclear power as power sources</a></li>
</ul>
</section>
<hr style="border: 3px solid grey;" ; width="80%" />
<!-- ***********************************************************************************-->
<section class="project">
<a href="https://tscholten1.github.io/Module-04/" target="_blank"><img src="Maps%20and%20Images/Electric%20Vehicle%20Recharging%20Stations.jpg" alt="" class="project-image"></a>
<!-- <div>-->
<!--<a target = '_blank' href="Full-size-Images_Maps/Lab%209%20Map.jpg"><img src="Full-size-Images_Maps/Lab%209%20Map.jpg" alt="Map of Crime" class="project-image" /></a>-->
<h3>Locations of Electric Vehicle Refueling Stations Throughout the U.S.</h3>
<p>This map was created using JavaScript drawing upon the Leaflet Javascript library, Leaflet, CSS, and HTML, Leaflet's marker cluter library, and GeoJSON.</p>
<h3>Software, tools, and data formats used:</h3>
<Li>GitHub (repository hosting service)</Li>
<Li>Brackets (text editor)</Li>
<Li>GeoJSON (data format for representing geographic features)</Li>
<Li>Leaflet (open source Javascript library for web-mapping apps)</Li>
<h3>Map features include:</h3>
<p>
<Li>Pan and Zooom</Li>
<Li>Tooltip on point location provides station name, city, hours, phone, address</Li>
<Li>Point locations expand or consolidate based on zoom in/out</Li>
</p>
<p>Data source(s): <a href="https://www.nrel.gov/docs/fy17osti/69031.pdf">National plugIn electric vehicle infrastructure analysis</a> </p>
<h3>Key concepts:</h3>
<Li>Outline a web mapping technology flow process</Li>
<Li>Work with Leaflet web-mapping library</Li>
<Li>Use marker clustering to consolidate large numbers of point locations</Li>
<Li>Convert data into GeoJSON format</Li>
<Li>Work with plugins (Leaflet Markercluster, Turf.js, Leaflet Omnivore, Chroma.js)</Li>
<Li>Incorporate basic user interaction features</Li>
<ul>
<li>See the map: <a href="https://tscholten1.github.io/Module-04/">Map of Locations of Electric Refueling Stations Throughout the U.S. </a></li>
</ul>
</section>
<hr style="border: 3px solid grey;" ; width="80%" />
<!-- ***********************************************************************************-->
<!-- <hr style="border: 3px solid grey;" ; width="80%" /> -->
<section class="project">
<a href="https://tscholten1.github.io/Module-02/" target="_blank"><img src="Maps%20and%20Images/Greenhouse%20gasses%20in%20WI.jpg" alt="" class="project-image"></a>
<!-- <div>-->
<h3>Greenhouse Gas Emissions in Wisconsin (2015)</h3>
<p>This proportional symbol map shows the relative magnitude of green house gas emissions (GHG) in 2015 by large facilites in Wisconsin. Data are shown by <span style='color: #bd4932; font-weight: bold;'>fuel combustion</span> and <span style='color: #105b63; font-weight: bold;'> process emissions</span>. The use of proportional symbols was the better choice to illustrate the amount of Co2 since this is based on an exact point location. Proportional maps are also best suited when showing magnitudes, or amounts of some numerical phenomena relative to other locations.
<p>This map was built using Javascript code drawing from Leaflet Javascript Library as well as CSS and HTML styling rules.</p>
<h3>Map features include:</h3>
<Li>Pan and Zooom</Li>
<Li>Tooltip on point location provides station name, city, hours, phone, address</Li>
<Li>Point locations expand or consolidate based on zoom in/out</Li>
<h3>Software, tools, and data formats used:</h3>
<Li>GitHub (repository hosting service)</Li>
<Li>Brackets (text editor)</Li>
<Li>GeoJSON (data format for representing geographic features)</Li>
<Li>Leaflet (open source Javascript library for web-mapping apps)</Li>
<h3>Key concepts:</h3>
<Li>Outlined a web mapping technology process flow</Li>
<Li>Worked with Leaflet web-mapping library</Li>
<Li>Data wrangled .cvs data into GeoJSON format, using Leaflets CircleMarker to provide a visual affordance when mousing over a location, and incorporated basic user interaction features.</Li>
<Li>Data source(s): U.S. EPA <a href="https://ghgdata.epa.gov/ghgp/main.do">FLIGHT</a></Li>
<li>See the map: <a href="https://tscholten1.github.io/Module-02/">Map of greenhouse gas emitters in WI</a></li>
</section>
<hr style="border: 3px solid grey;" ; width="80%" />
<!-- ****************************************************************************************-->
</body>
</html>