-
Notifications
You must be signed in to change notification settings - Fork 4
/
joey.html
94 lines (89 loc) · 3.2 KB
/
joey.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
<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>mapbox-custom-layer-example</title>
<style>
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
-webkit-font-smoothing: antialiased;
margin:0;
padding:0;
overflow:hidden;
}
#app {
width: 100vw;
height: 100vh;
}
.legend {
position: absolute;
bottom: 30px;
left: 30px;
background-color: black;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
color: white;
}
.dropdown {
position: absolute;
top: 10px;
left: 10px;
background-color: white;
padding: 5px;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
</style>
</head>
<body>
<div id="map"></div>
<div class="legend" id="legend">
<h4>Legend</h4>
<ul>
<li><span style="background-color: rgba(90,90,90,200);"></span> Low-income Community</li>
<li><span style="background-color: rgba(153,153,153,200);"></span> Middle-income Community</li>
<li><span style="background-color: rgba(255,255,255,200);"></span> High_income Community</li>
</ul>
</div>
<div class="dropdown">
<label for="dataset-select">Mobility Type:</label>
<select id="dataset-select">
<option value=" "></option>
<option value="pattern1">L2L</option>
<option value="pattern2">L2M</option>
<option value="pattern3">L2H</option>
<option value="pattern4">M2L</option>
<option value="pattern5">M2M</option>
<option value="pattern6">M2H</option>
<option value="pattern7">H2L</option>
<option value="pattern8">H2M</option>
<option value="pattern9">H2H</option>
</select>
<label for="data-select">Timeslot:</label>
<select id="data-select">
<option value=" "></option>
<option value="dataset1">7-8AM</option>
<option value="dataset2">8-9AM</option>
<option value="dataset3">9-10AM</option>
<option value="dataset4">10-11AM</option>
<option value="dataset5">11-12PM</option>
<option value="dataset6">12-1PM</option>
<option value="dataset7">1-2PM</option>
<option value="dataset8">2-3PM</option>
<option value="dataset9">3-4PM</option>
<option value="dataset10">4-5PM</option>
<option value="dataset11">5-6PM</option>
<option value="dataset12">6-7PM</option>
<option value="dataset13">7-8PM</option>
<option value="dataset14">8-9PM</option>
</select>
</div>
</body>
<link rel="stylesheet" href="Joey/style.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mapbox-gl.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/mapbox-gl.min.css" rel="stylesheet">
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js" integrity="sha512-vc58qvvBdrDR4etbxMdlTt4GBQk1qjvyORR2nrsPsFPyrs+/u5c3+1Ct6upOgdZoIl7eq6k3a1UPDSNAQi/32A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es5/index.min.js"></script>-->
<script src="Joey/main.js"></script>
</html>