-
Notifications
You must be signed in to change notification settings - Fork 6
/
stops.html
156 lines (137 loc) · 4.11 KB
/
stops.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
<!DOCTYPE html>
<html>
<head>
<title>All Stops - Payanam</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="lib/leaflet.css" />
<link href="lib/jquery-ui.css" rel="stylesheet">
<link href="lib/bootstrap.v4.0.0.min.css" crossorigin="anonymous" alt="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" rel="stylesheet">
<link rel="stylesheet" href="lib/leaflet-sidebar.css" />
<link href="lib/tabulator.min.css" rel="stylesheet">
<link href="js/style.css" rel="stylesheet">
<!-- Put the CSSs first and JSs next -->
<script src="lib/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="lib/jquery-ui.min.js" type="text/javascript"></script>
<script src="lib/leaflet.js"></script>
<script src="lib/leaflet-sidebar.min.js"></script>
<script src="lib/papaparse.min.js"></script>
<script src="lib/Leaflet.Control.Custom.js"></script>
<script src="lib/leaflet-providers.js"></script>
<script src="lib/tabulator.min.js" type="text/javascript"></script>
<script src="lib/leaflet-hash.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
min-height: auto; /* override style.css for this page*/
}
html, body, #map {
height: 100%;
}
#map {
height: calc(100% - 56px);
/*font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;*/
}
ul.sim-tree {
padding-inline-start: 10px;
}
div.sidebar {
top: 63px;
}
@media (min-width: 1200px) {
/*.sidebar {
width: 360px;
}*/
.sidebar p {
width: 95%;
}
/*
.sidebar-left ~ .sidebar-map .leaflet-left {
left: 370px;
}
*/
}
.sidebar .alert {
width: 90%;
}
.sidebar-pane {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 10px;
}
/*
div.sidebar-tabs {
left: -2px!important;
width: calc(100% + 10px);
}
.sidebar {
background-color: white;
}
*/
/* Tabulator */
#stops {
width: 100%;
}
</style>
</head>
<body>
<div id="topMenu"></div>
<div id="sidebar" class="sidebar collapsed">
<!-- Nav tabs -->
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#home" role="tab" onclick="tabulatorRedraw()"><i class="fa fa-bars"></i></a></li>
<!--
<li><a href="#stopDetailsSection" role="tab"><i class="fa fa-map-marker"></i></a></li>
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
-->
</ul>
<ul role="tablist">
<li><a href="#settings" role="tab"><i class="fa fa-info-circle"></i></a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="sidebar-content">
<div class="sidebar-pane" id="home">
<h1 class="sidebar-header">
Stops List
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<br>
<div id="stopDetails"></div>
<div id="stops"></div>
<!--
<br>
<p id="status" class="alert alert-primary">Loading, please wait..</p>
<p class="alert alert-warning"> <small></small></p>
-->
</div>
<!--
<div class="sidebar-pane" id="stopDetailsSection">
<h2 class="sidebar-header"><span class="stop_name">Stop Name</span>
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h2>
<br>
</div>
-->
<!--
<div class="sidebar-pane" id="messages">
<h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
-->
<div class="sidebar-pane" id="settings">
<h1 class="sidebar-header">About<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
<br>
<p>Each dot on the map represents a stop by unique lat-long location.<br>
The size of the bus stop's dot is representative of the number of routes served by this stop.
</p>
</div>
</div>
</div>
<div id="map" class="sidebar-map"></div>
<script src="js/common.js"></script>
<script src="js/stops.js"></script>
</body>
</html>