-
Notifications
You must be signed in to change notification settings - Fork 0
/
finalProject.html
153 lines (134 loc) · 8.33 KB
/
finalProject.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css//main.css"> <!-- link to stylesheet for CSS -->
<link rel="icon" href="images///leaf_b.png">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"><!-- link to social icon library -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset='utf-8' />
<title>Collab1925B</title>
<script src='https://static-assets.mapbox.com/gl-js-pricing/dist/mapbox-gl.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<link rel="icon" href="images///cropped-ci-favicon-32x32.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- link to social icon library -->
<link href='https://static-assets.mapbox.com/gl-js-pricing/dist/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="css/1925B.css" />
<style>
</style>
</head>
<body>
<!-- Navigation bar, top of page -->
<div class="topnav">
<a id="logo" href="http://www.centuryinitiative.ca/"><img src="images//CI-logo-2.png" alt="Century Initiative Logo" title="Century Initiative Logo" style="width:240px;height:50px;"></a>
<div class="topnav-right">
<a href="index.html">
<button class="fa-solid fa-house" ></button>
</a>
<a href="projects.html">
<button class="fa-solid fa-code" ></button>
</a>
<a href="map_portfolio.html"> <button class="fa-solid fa-map-location-dot"></button></a>
<a>
<button class="fa-solid fa-moon-o" onclick="myFunction()"></button>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</a>
</div>
</div>
<!-- Navigation bar, bottom of bar -->
<h1>This project was recently uncovered..recovered from a dusty usb stick. I am working towards describing the magic of all the MapboxGL JS
drives it, as well as describing the API I created, and turned to a JS variable to save on hosting. It also appears I have lost some of my
customized Mapbox Studio basemap tiles, sadly. Anyways, my appologies if you see this in it's current state and I encourage you to look through
the files in my github repos with any prefix/suffix denoting project 1925B. Like I said, the JS is super tight.
</h1>
<div id="container1">
<div id="gooter">
<div id='console' style="margin-right: 20%; margin-left: 20%;">
<h1>A choice that will define our future!</h1>
<p>3 scenarios for Canada.</p>
<p>Scroll in to see more details regarding the provinces and major metropolitan areas.</p>
<p>Click on a feature to view estimated population and GDP.</p>
<p><label id="active-scenario"><b>Click a scenario for more information</b></label></p>
<div class='session'>
<h2>Population</h2>
<div class='row colors'>
</div>
<div id='Country-legend'>
<div class='row labels'>
<div class='label'>18.9 Million</div>
<div class='label'>40 Million</div>
<div class='label'>60 Million</div>
<div class='label'>80 Million</div>
<div class='label'>100 Million</div>
</div>
</div>
<div id='Provinces-legend'>
<div class='row labels'>
<div class='label2'>19,000</div>
<div class='label2'>100,000</div>
<div class='label2'>500,000</div>
<div class='label2'>1 Million</div>
<div class='label2'>10 Million</div>
<div class='label2'>39 Million</div>
</div>
</div>
<div id='Cities-legend'>
<div class='row labels'>
<div class='label3'> <70,000 </div>
<div class='label3'>500,000</div>
<div class='label3'>4.5 Million</div>
<div class='label3'>9 Million</div>
<div class='label3'>13 Million</div>
<div class='label3'>>16 Million</div>
</div>
</div>
</div>
<div class='session' id='sliderbar'>
<h2>Year: <label id='active-year'><b>Slide the years for projected growth</b></label></h2>
<input id='slider' class='row' type='range' min='1' max='5' step='1' value='1' />
<div class="chart">
<div class="tick"><span>2016</span></div>
<div class="tick"><span>2025</span></div>
<div class="tick"><span>2050</span></div>
<div class="tick"><span>2075</span></div>
<div class="tick"><span>2100</span></div>
</div>
</div>
<div class='session'>
<h2>Immigration Scenario</h2>
<div class='row' id='buttons'>
<input id='1' type='radio' name='toggle' value= '1' checked='checked'>
<label for='1'>Zero Immigration Scenario</label>
<input id='2' type='radio' name='toggle' value='2'>
<label for='2'>Status Quo Scenario</label>
<input id='3' type='radio' name='toggle' value='3'>
<label for='3'>Hundred Million Scenario</label>
</div>
</div>
</div>
</div>
</div>
<!-- </div> -->
<div id='map'></div>
<script src='js/1925B_json.js'></script>
<script src='js/mbkey.js'> </script>
<script src='js/1925B.js'> </script>
<div class="footer">
<a href="https://ca.linkedin.com/in/jms-brtn" class="fa-brands fa-linkedin-square" style="font-size:48px;color:#FFFFFF"></a>
<a href="https://github.com/James-Burton" class="fa-brands fa-github" style="font-size:48px;color:#FFFFFF"></a>
<p class="copyright">ⓒ James Burton 2022</p>
</div>
</body>
</html>