-
Notifications
You must be signed in to change notification settings - Fork 5
/
demo.html
228 lines (182 loc) · 8.03 KB
/
demo.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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html>
<head>
<title>Chicago Overview</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style>
html, body, #map {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.text_over {
z-index: 99;
position: absolute;
top: 70px;
right: 20px;
color: #444;
background-color: rgba(250,250,250,0.8);
font-size: 18px;
line-height: 22px;
font-family: arial;
height: 600px;
padding: 15px;
width: 66%;
overflow: scroll;
}
.text_over p {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="text_over">
<h3>The plan</h3>
<br><br><br>
<h3>Gold line</h3>
<p>The Gold Line is a brand new L line that connects the Loop to the South Side.</p>
<p>Tired of waiting hours to get to Hyde Park or South Shore? Wait a few minutes.</p>
<p>The Gold Line will run along existing railroad tracks, and connect Chicagoans to the 50,000 jobs around the University of Chicago.</p>
<br><br><br>
<h3>Ashland BRT</h3>
<p>Bus Rapid Transit is like a subway on the street. Buses have their own lane, they have less frequent stops, and they can turn streetlights green - so they can speed through rush hour traffic.<p>
<p>BRT on Ashland will run from the North Side to the Far South Side. You'll be able to zip from Lakeview to Wicker Park, from the West Loop to UIC, from Pilsen to Englewood - and beyond.</p>
<h3></h3>
<p>The route also runs by Whitney Young High School, Malcolm X College, and the University of Illinois at Chicago - now everyone can get to school.<p>
<p>And it connects to major job centers - from West Loop lofts to Back of the Yards factories.</p>
<br><br><br>
<h3>Lime line</h3>
<p>Like a west side Red Line, the Lime Line will run from the O'Hare Blue Line to Midway Airport--a speedy north-south route along Chicago's edge.</p>
<h3></h3>
<p>The route connects to the Blue, Green, Pink, and Orange Lines - making it easier for Westsiders to get to downtown jobs.</p>
<h3></h3>
<p>At Midway, the Lime Line heads east through south side transit deserts, linking up with the Red Line at 87th street.</p>
<br><br><br>
<h3>Orange line extension</h3>
<p>A bit more orange means a lot more green. Extending the Orange Line to Ford City Mall and Richard J. Daley college means shops, jobs and classrooms are just an L stop away.</p>
<br><br><br>
<h3>Red line extension</h3>
<p>Finally, rapid transit reaches Chicago's southern edge. The far South Side is now on the grid.</p>
<p>The extension will slice commute times to the Loop, bringing economic opportunity to Roseland, Pullman, and Altgeld Gardens.</p>
<br><br><br>
<h3>Blue Line West - Forest Park to Oak Brook</h3>
<p>The Blue line will be extended west from Forest Park to Oak Brook, creating a fast and convenient commute to one of the Chicagoland's biggest job centers.</b>
<br><br><br>
<b>Blue Line North - O'Hare to Schaumburg</b>
<p>From airport to northwest burbs.</p>
<p>Make it easier for NW commutes to get to jobs at O'hare, city people to get to jobs in Schaumburg</p>
<br><br><br>
<h3>Your New Blue - O'Hare Branch improvements</h3>
<p>The O'Hare branch of the blue line will get a major upgrade to track and stations from Grand to the airport.</p>
<br><br><br>
<h3>Inner Circumferential</h3>
<p>Connects O’Hare to Midway, with stops in west Cook County suburbs.</p>
<p>Gives western Cook County a north-south connector that links into the rest of the network</p>
<br><br><br>
<h3>Brown line extension</h3>
<p>Connect the North Side to O'Hare.</p>
<p>You'll finally be able to make that flight on time.</p>
<br><br><br>
<h3>Red/Purple modernization</h3>
<p>The People's Line is over a hundred years old.</p>
<p>Rebuilding track from Lakeview to the end of the Purple Line will slice commutes time for the North Side</p>
<br><br><br>
<h3>Yellow line extension</h3>
<p>Extends the Yellow line to Old Orchard Mall in Skokie.</p>
<p>Now, everyone can get to work, study and shop at Old Orchard Mall and National Lewis University. And the north suburbs have a new connection to the rest of the region.</p>
<br><br><br>
<h3>Downtown Circulator</h3>
<p>Stitches the Loop together, allowing commuters and tourists to zip from Union and Ogilvie Stations to Millennium Park, Streeterville and Navy Pier.</p>
<br><br><br>
<h3>West Loop Transportation Center</h3>
<p>The region's new hub for transit, commuter rail, Amtrak and high-speed rail.</p>
<p>Will let people switch from the L to Metra to Amtrak, and will someday serve as the major station for midwest high speed rail.</p>
<br><br><br>
<h3>Southeast Service</h3>
<p>Commuter rail connecting the South Suburbs to jobs in the Loop and beyond.</p>
<p>Will help rebuild suburban downtowns around new train stations — bringing economic growth and jobs to Dolton, Chicago Heights, and other South Suburban communities.</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<link rel="stylesheet" href="leaflet.draw.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="leaflet.draw.js"></script>
<script>
var map;
function main(){
map = L.map('map').setView([41.853575, -87.615443], 11);
map.addLayer(L.tileLayer('http://a.tiles.mapbox.com/v3/mapmeld.map-x20zuxfw/{z}/{x}/{y}.png'));
var map_data = {
"version":"1.0.1",
"stat_tag":"f1e3cbd2-a15f-11e3-8d43-0edbca4b5057",
"layers":[
{
"type":"cartodb",
"options":{
"sql":"select * from transit_future_projects",
"cartocss":"/** simple visualization */\n\n#transit_future_projects{\n line-color: #FF6600;\n line-width: 2;\n line-opacity: 0.7;\n}",
"cartocss_version":"2.1.1",
"interactivity":["cartodb_id"]
}
},
{
"type":"cartodb",
"options":{
"sql":"select * from l_lines",
"cartocss":"/** simple visualization */\n\n#l_lines{\n line-color: #3e7bb6;\n line-width: 2;\n line-opacity: 0.7;\n}",
"cartocss_version":"2.1.1",
"interactivity":["cartodb_id"]
}
}
]
};
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://jpvelez.cartodb.com/api/v1/map?"
+ "config=" + escape(JSON.stringify(map_data))
+ "&callback=loadedToken&t="
+ (new Date()) * 1;
document.body.appendChild(s);
// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
draw: {
polyline: false,
polygon: false,
circle: false,
marker: false
}
});
map.addControl(drawControl);
map.on('draw:created', function(e){
var rectangle = e.layer;
logExtent( e.layer.getBounds() );
});
}
function loadedToken(tokenInfo){
var token = tokenInfo.layergroupid;
var template = 'http://3.api.cartocdn.com/jpvelez/tiles/layergroup/' + token + '/{z}/{x}/{y}.png';
map.addLayer(L.tileLayer(template));
}
// Load map when window is done loading.
window.onload = main;
function logExtent(bounds){
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
console.log( "["
+ sw.lat.toFixed(6)
+ ","
+ sw.lng.toFixed(6)
+ ","
+ ne.lat.toFixed(6)
+ ","
+ ne.lng.toFixed(6)
+ "]" );
}
</script>
</body>
</html>