-
Notifications
You must be signed in to change notification settings - Fork 0
/
Interactive.html
152 lines (130 loc) · 6.96 KB
/
Interactive.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="keywords" content="maps, cartography"/>
<title>Greg Grube's Geography</title>
<!--put your Bootstrap stylesheet links below this comment and above style.css-->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"></link>
<link rel="stylesheet" href="css/style.css"></link>
<link href="css/heroic-features.css" rel="stylesheet">
</head>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">Greg Grube's Geography</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" a href="about.html">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="resume.html">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<header class="jumbotron my-1">
<h1 class="display-5"><strong>Interactive Maps</strong></h1>
</header>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="https://grubeg.github.io/WisconsinVotingDistricts/"><img class="card-img-top" src="assets/WIElectionsPreview.PNG" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://grubeg.github.io/WisconsinVotingDistricts/">Wisconsin Voting Districts</a>
</h4>
<p class="card-text">Final project for my Practicum in GIS Development at UW-Madison, this webmap shows election district information for the State of Wisconsin. This information reflects the latest changes from Redistricting in 2022. <a href="https://www.youtube.com/watch?v=1TNAzUuFttA">Video Demo</a></p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="https://grubeg.github.io/Geog575_FinalProject/"><img class="card-img-top" src="assets/YellowstonePreview.PNG" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://grubeg.github.io/Geog575_FinalProject/">U.S. National Parks Map</a>
</h4>
<p class="card-text">Designed in my interactive mapping class at UW-Madison using Leaflet, this map shows all of the National Parks in the U.S. and allows users identify various points of interest and information about the parks.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="https://grubeg.github.io/Geog575D3Lab2/"><img class="card-img-top" src="assets/EUEnvironmentalPreview.PNG" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://grubeg.github.io/Geog575D3Lab2/">European Environmental Issues</a>
</h4>
<p class="card-text">Designed in my interactive mapping class at UW-Madison using the Data-Driven Documents javascript library, this map shows European Union countries with rankings based on various environmental problems.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="https://grubeg.github.io/Geog777_Project2/"><img class="card-img-top" src="assets/SequoiaPreview.PNG" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://grubeg.github.io/Geog777_Project2/">Sequoia Tree Collection App</a>
</h4>
<p class="card-text">Designed in my GIS Capstone class at UW-Madison using ArcGIS Javascript API, this project is a tree collection application that allows the user to collect tree information and effectively navigate around Sequoia and Kings Canyon Parks. <a href="https://www.youtube.com/watch?v=2Ka0rPpy2ug">Video Demo</a></p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="http://gis.ci.janesville.wi.us/Html5Viewer/Index.html?viewer=Janesville"><img class="card-img-top" src="assets/JanesvilleMapPreview.PNG" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="http://gis.ci.janesville.wi.us/Html5Viewer/Index.html?viewer=Janesville">City of Janesville Webmap</a>
</h4>
<p class="card-text">Designed when I worked for the City of Janesville, this was created to replace the existing multi-purpose webmap. With many layers to activate and multiple search capabilities, it was a major undertaking to design.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="https://api.mapbox.com/styles/v1/tripleg373/ck2jj9gtf0ump1cqvs91jdhb3.html?fresh=true&title=view&access_token=pk.eyJ1IjoidHJpcGxlZzM3MyIsImEiOiJjanprazZ0cHMwbHMyM29vYXk5ZGlnNGNvIn0.UYb-wxnQA4qlVCD8Ayg6ow#2.58/44.12/-82.94"><img class="card-img-top" src="assets/IndianaJonesPreview.PNG" alt=""> </a>
<div class="card-body">
<h4 class="card-title">
<a href="https://api.mapbox.com/styles/v1/tripleg373/ck2jj9gtf0ump1cqvs91jdhb3.html?fresh=true&title=view&access_token=pk.eyJ1IjoidHJpcGxlZzM3MyIsImEiOiJjanprazZ0cHMwbHMyM29vYXk5ZGlnNGNvIn0.UYb-wxnQA4qlVCD8Ayg6ow#2.58/44.12/-82.94">Indiana Jones Promo Basemap</a>
</h4>
<p class="card-text">Designed for my Graphic Design in Cartography class at UW-Madison using Mapbox Studio, this is a tileset designed to promote a hypothetical Indiana Jones movie using the style of the movies as inspiration.</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Created by G. Grube 2019</p>
</div>
<!-- /.container -->
</footer>
<!--put your external script links here-->
<script type="text/javascript" src="lib/jquery-1.11.3.js"></script>
<script type="text/javascript" src="lib/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/jquery.slim.min"></script>
</body>
</html>