-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathAM.html
executable file
·73 lines (69 loc) · 4.3 KB
/
AM.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
<!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>
<!-- 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>
<br></br>
<button type="button" class="btn btn-default" onclick="location.href='index.html'">Back to Street Type</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>
<div class='map-overlay top'>
<div class='map-overlay-inner'>
<h3>AM Level of Service (1991-2017)</h3>
<label id='year'></label>
<input id='slider' type='range' min='0' max='13' step='1' value='0' />
</div>
</div>
<!-- legend -->
<div id='state-legend' class='legend'>
<h4>LOS</h4>
<div><span style='background-color: #66ff33'></span>A</div>
<div><span style='background-color: #99ff33'></span>B</div>
<div><span style='background-color: #ccff33'></span>C</div>
<div><span style='background-color: #ffff00'></span>D</div>
<div><span style='background-color: #ff9900'></span>E</div>
<div><span style='background-color: #cc3300'></span>F</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/am.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</body>
</html>