-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (82 loc) · 2.55 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
<!DOCTYPE html>
<html>
<head>
<title>TUB Bus Tracker</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<style>
#html,
body {
margin: 0;
padding: 0;
}
#map {
height: 100vh;
width: 100vw;
}
.floatingButtons {
position: absolute;
z-index: 1000;
background-color: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
#routesPicker {
top: 10px;
right: 10px;
display: flex;
align-items: center;
}
#routesPickerSelect {
all: unset;
padding-right: 24px;
z-index: 1002;
}
#routesPickerIcon {
position: absolute;
right: 8px;
z-index: 1001;
}
#centerUserLocation {
height: 24px;
bottom: 20px;
right: 10px;
}
#lastUpdateInfo {
position: absolute;
z-index: 1000;
padding: 4px;
bottom: 0px;
left: 0px;
background-color: white;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="floatingButtons" id="routesPicker">
<select id="routesPickerSelect">
<option value="all">All Routes</option>
</select>
<svg id="routesPickerIcon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000">
<path
d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z" />
</svg>
</div>
<div class="floatingButtons" id="centerUserLocation">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000">
<path
d="M440-42v-80q-125-14-214.5-103.5T122-440H42v-80h80q14-125 103.5-214.5T440-838v-80h80v80q125 14 214.5 103.5T838-520h80v80h-80q-14 125-103.5 214.5T520-122v80h-80Zm40-158q116 0 198-82t82-198q0-116-82-198t-198-82q-116 0-198 82t-82 198q0 116 82 198t198 82Zm0-120q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-80q33 0 56.5-23.5T560-480q0-33-23.5-56.5T480-560q-33 0-56.5 23.5T400-480q0 33 23.5 56.5T480-400Zm0-80Z" />
</svg>
</div>
<div id="lastUpdateInfo">
Not updated yet
</div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="index.js"></script>
</body>
</html>