-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
84 lines (70 loc) · 3.35 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CitiBike Ridership per Station</title>
<meta name="Web Mapping: Final Project" content="The HTML5 Herald">
<meta name="Mili Chapado" content="SitePoint">
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css" rel="stylesheet" />
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<div id="mapContainer">
<div id="sidebar">
<div class="title-box">
<h3>CitiBike Ridership per Station:
<br>Average Daily Use*</h3>
</div>
<div class="info-box">
<h3>Hover over a station for location <br>& ridership info</h3>
Station ID: <span id="station_id"></span><br />
Location: <span id="station_name"></span><br />
Total Use This Year: <span id="t_rides"></span><br>
Average Daily Use: <span id="d_rides"</span>
</div>
<div class="info-box legend">
<h3>Average Daily Use*</h3>
<div id='station-legend' class='legend'>
<div><span style='background-color: #fccde5'></span>Less than 50</div>
<div><span style='background-color: #bebada'></span>51 to 300</div>
<div><span style='background-color: #8dd3c7'></span>301 to 500</div>
<div><span style='background-color: #fb8072'></span>More than 500</div>
</div>
* "Use" measures the number of times that a bike
was docked or undocked at a particular station
<br>(to begin or end a ride).
<br><br>
<b>Source:</b> CitiBike, January - December 2018
</div>
<div class="info-box">
<h3>Zoom to a Serviced Area</h3>
<!-- These buttons use data attributes, which we can easily pull using jquery -->
<button class="flyto" data-neighborhood="brooklyn">Brooklyn</button>
<button class="flyto" data-neighborhood="queens">Queens</button>
<button class="flyto" data-neighborhood="uppermn">Upper MN</button>
<button class="flyto" data-neighborhood="lowermn">Lower MN & Williamsburg</button>
</div>
<div id="about" class="sidepanel">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<br>
<h3>About this Map</h3>
This map highlights CitiBike daily and annual ridership data across 750 stations in three
New York City boroughs serviced by CitiBike. Data was sourced from CitiBike's website, from
January to December 2018, and aggregated at the station level for daily and annual ridership.
<br><br>
<h3>About CitiBike</h3>
CitiBike is a privately owned public bicycle sharing system serving
the New York City boroughs of Manhattan, Queens, and Brooklyn,
as well Jersey City, New Jersey (not shown on this map).
<p><b>Launch Date:</b> May 27, 2013</p>
<p><b>Number of Stations:</b> 750 </p>
<p><b>Daily Ridership:</b> 62,000 (daily average, Oct. 2017)</p>
</div>
<button class="openbtn" onclick="openNav()">☰ Find Out More</button>
</div>
</div>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</body>
</html>