-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (126 loc) · 7.02 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Allston West Station</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css"
type="text/css"
/>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<main id="map" class="map">
<img class="control__download" src="download.png" />
</main>
<div class="questions">
<p class="questions__current-question">
1. What are the important origins and destinations people will need to connect via West Station (to, from, or through)?
</p>
<p class="questions__controls">
<button class="questions__controls--back" disabled>←</button>
<button class="questions__controls--forward">→</button>
</p>
</div>
<aside class="sidebar">
<form class="layers">
<h3 class="layers__subtitle">Map layers</h3>
<input type="checkbox" id="mbta-lines" autocomplete="off">
<label for="mbta-lines">MBTA and ferry lines</label><br>
<input type="checkbox" id="mbta-stops" autocomplete="off">
<label for="mbta-stops">MBTA and ferry stops</label><br>
<input type="checkbox" id="massbuilds" autocomplete="off">
<label for="massbuilds">MassBuilds developments</label><br>
<input type="checkbox" id="bikes" autocomplete="off">
<label for="bikes">Dedicated bike facilities</label><br>
<input type="checkbox" id="envjustice" autocomplete="off">
<label for="envjustice">Environmental justice communities</label><br>
<input type="checkbox" id="openspace" autocomplete="off">
<label for="openspace">Open spaces</label><br>
<input type="checkbox" id="proposed" autocomplete="off">
<label for="proposed">Previously identified connections</label><br>
<input type="checkbox" id="focus-area" autocomplete="off">
<label for="focus-area">Focus area and buffer</label><br>
<h3 class="layers__subtitle">Basemaps</h3>
<fieldset class="layers__set">
<input type="radio" id="population" name="layer__radio-options" autocomplete="off">
<label for="population">Total population (2016)</label><br>
<input type="radio" id="households" name="layer__radio-options" autocomplete="off">
<label for="households">Total households (2016)</label><br>
<input type="radio" id="employment" name="layer__radio-options" autocomplete="off">
<label for="employment">Total employment (2016)</label><br>
</fieldset>
<fieldset class="layers__set">
<input type="radio" id="to_trips_total" name="layer__radio-options" autocomplete="off">
<label for="to_trips_total">AM peak trips to focus area (2040)</label><br>
<input type="radio" id="from_trips_total" name="layer__radio-options" autocomplete="off">
<label for="from_trips_total">AM peak trips from focus area (2040)</label><br>
</fieldset>
<fieldset class="layers__set">
<input type="radio" id="transit_to_west_station" name="layer__radio-options" autocomplete="off">
<label for="transit_to_west_station">Transit travel time to West Station (2040)</label><br>
<input type="radio" id="transit_from_west_station" name="layer__radio-options" autocomplete="off">
<label for="transit_from_west_station">Transit travel time from West Station (2040)</label><br>
</fieldset>
<fieldset class="layers__set">
<input type="radio" id="bike_to_west_station" name="layer__radio-options" autocomplete="off">
<label for="bike_to_west_station">Bike travel time to West Station (2040)</label><br>
<input type="radio" id="bike_from_west_station" name="layer__radio-options" autocomplete="off">
<label for="bike_from_west_station">Bike travel time from West Station (2040)</label><br>
</fieldset>
<input type="reset" value="Reset map settings" id="reset">
</form>
<svg width="200" height="100" class="legend legend__massbuilds">
<text x="0" y="16" class="legend__title">MassBuilds</text>
<circle cx="15" cy="30" r="5" fill="#33a02c" />
<text x="30" y="34">Completed</text>
<circle cx="15" cy="50" r="5" fill="#b2df8a" />
<text x="30" y="54">In construction</text>
<circle cx="15" cy="70" r="5" fill="#1f78b4" />
<text x="30" y="74">Planning</text>
<circle cx="15" cy="90" r="5" fill="#a6cee3" />
<text x="30" y="94">Projected</text>
</svg>
<svg width="200" height="60" class="legend legend__bikes">
<text x="0" y="16" class="legend__title">Dedicated bike facilities</text>
<line x1="5" y1="30" x2="20" y2="30" stroke="#214a2d" stroke-width="5"/>
<text x="30" y="34">Paved paths</text>
<line x1="5" y1="50" x2="20" y2="50" stroke="#2166AC" stroke-width="5"/>
<text x="30" y="54">Protected bike lanes</text>
</svg>
<svg width="270" height="80" class="legend legend__connections">
<text x="0" y="16" class="legend__title">Previously identified connections</text>
<line x1="5" y1="30" x2="20" y2="30" stroke="#67cbe4" stroke-width="5"/>
<text x="30" y="34">New bus rapid transit (BRT) facilities</text>#3b66b0
<line x1="5" y1="50" x2="20" y2="50" stroke="#3b66b0" stroke-width="5"/>
<text x="30" y="54">Grand Junction connection</text>
<line x1="5" y1="70" x2="20" y2="70" stroke="#233069" stroke-width="5"/>
<text x="30" y="74">New bike/pedestrian facilities</text>
</svg>
<svg width="250" height="140" class="legend legend__choropleth">
<text x="0" y="16" class="legend__title">Basemap scale</text>
<rect x="10" y="24" width="16" height="16" fill="#cccccc" />
<text x="30" y="36" id="legend-0"></text>
<rect x="10" y="44" width="16" height="16" fill="#fef0d9" />
<text x="30" y="56" id="legend-1"></text>
<rect x="10" y="64" width="16" height="16" fill="#fdcc8a" />
<text x="30" y="76" id="legend-2"></text>
<rect x="10" y="84" width="16" height="16" fill="#fc8d59" />
<text x="30" y="96" id="legend-3"></text>
<rect x="10" y="104" width="16" height="16" fill="#e34a33" />
<text x="30" y="116" id="legend-4"></text>
<rect x="10" y="124" width="16" height="16" fill="#b30000" />
<text x="30" y="136" id="legend-5"></text>
</svg>
<a id="export"></a>
</aside>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js"></script>
<script src="map.js"></script>
<script src="questions.js"></script>
</body>
</html>