-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·65 lines (62 loc) · 4.05 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- CSS Imports -->
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" integrity="sha256-iYUgmrapfDGvBrePJPrMWQZDcObdAcStKBpjP3Az+3s=" crossorigin="anonymous" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id="main">
<!-- Sidebar -->
<div class="sidebar">
<h1>San Francisco Congestion Management Program Portal</h1>
<p>Traffic congestion is widely perceived as outpacing the ability of the traditional transportation planning process to provide solutions.
In San Francisco, with its highintensity land uses and extensive transit network, traffic congestion poses a different problem than in lower-density counties,
challenging conventional interpretations of the nature of the congestion problem.</p>
<p>Level of service (LOS) is a qualitative measure used to relate the quality of traffic service. LOS is used to analyze highways by categorizing traffic flow
and assigning quality levels of traffic based on performance measure like speed, density,etc. The North American highway LOS standards as in the Highway Capacity Manual (HCM) use letters A through F,
with A being the best and F being the worst. This CMP portal visualizes the historic traffic LOS data based on auto speed of each CMP segment in San Frnacisco, filtered by year and street type.</p>
<br></br>
<h2>Select road type to hide or display:</h2>
<nav id="menu"></nav>
<br></br>
<h2>Select time period:</h2>
<button type="button" class="btn btn-default" onclick="location.href='AM.html'">AM</button>
<button type="button" class="btn btn-default" onclick="location.href='PM.html'">PM</button>
</div>
<div class="source">
<p>Source: <a href="http://www.sfcta.org/sites/default/files/content/Planning/CongestionManagementPlan/2017/CMP_2017_12.05.17.pdf">
San Francisco County Transportation Authority </a></p>
</div>
<!-- Map -->
<div id = "map" class="map"></div>
<!-- legend -->
<div id='state-legend' class='legend'>
<h4>Street Type</h4>
<div><span style='background-color: #8DD3C7'></span>High Speed</div>
<div><span style='background-color: #ffffb3'></span>Suburban</div>
<div><span style='background-color: #bebada'></span>Intermediate</div>
<div><span style='background-color: #fb8072'></span>Urban</div>
<div><span style='background-color: #80b1d3'></span>Freeway</div>
</div>
</div>
<!-- Javascript Imports -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js" integrity="sha256-CNm+7c26DTTCGRQkM9vp7aP85kHFMqs9MhPEuytF+fQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
<script src="js/main.js"></script>
</body>
</html>