-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (138 loc) · 5.3 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
147
148
149
150
151
<!DOCTYPE html>
<html>
<head>
<title>Portland Bike to Transit Map</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='wax/ext/modestmaps.min.js' type='text/javascript'></script>
<script src='wax/dist/wax.mm.js' type='text/javascript'></script>
<link href='wax/theme/controls.css' rel='stylesheet' type='text/css' />
<style type='text/css'>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
p {
line-height: 20px;
}
a {
color: #ff00a7;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.layerswitch {
list-style: none;
padding: 0;
}
.layerswitch li {
display: inline;
}
.layerswitch li a {
float: left;
display: block;
height: 30px;
width: 110px;
border: 1px solid #333;
margin-right: 3px;
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
}
.layerswitch li a.active {
border-color: #00ffcc;
}
#mymap {
position: absolute;
top: 0;
right: 400px;
left: 0;
height: 100%;
}
#sidebar {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 359px;
background: #111;
color: #fff;
border-left:1px solid #000;
padding: 20px;
}
.source {
font-size: 80%;
}
.wax-tooltip {
right: 10px;
left: auto;
}
</style>
<!--Google Analytics-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32858620-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id='sidebar'>
<h2 style="color:#00ffcc">Portland Bike to Transit Map</h2>
<P style="font-size:.8em;">This handy map can display bike routes, transit stops, and transit routes <i>at the same time</i>, so you can find your own way to bike to transit stops.
<P style="font-size:.8em;"><i>Hover over or click on stops and routes for more info.</i> If you like this, you might also like another project I'm working on, TriMet's <a href="http://ride.trimet.org">new multimodal Map Trip Planner</a>, which can plan biking and bike-to-transit trips. Visit <a href="http://pdxmele.github.com/pdxmele">my website</a> for more maps and projects.</p>
<P style="font-size:.8em;">The original version of this site was awarded "Most Original App" in the second round of <a href="http://civicapps.org/news/civicapps-awards-congrats-round-2-winners-and-runners">Portland's CivicApps contest</a>. Thank you! And thank you also to the awesome team that works on <a href="http://www.mapbox.com/">MapBox</a> and <a href="http://mapbox.com/tilemill/">TileMill</a>, who gave me the opportunity to finally get this project up and running again by providing a great, affordable service!</p>
<p><span class='source'>Sources: <a href='http://www.openstreetmap.org/copyright'>(c) OpenStreetMap</a> (bike routes from 10/27/12, basemap styled by <a href="http://www.mapbox.com/">MapBox</a>), transit data from <a href='http://www.trimet.org'/>TriMet</a> on 9/28/12. New transit data for service changes provided as it becomes available. See any errors? Let me know! I can edit OSM or do an update: saxbarm at gmail dot com / twitter <a href="http://www.twitter.com/pdxmele">@pdxmele</a>.</p>
<p></p>
<ul class="layerswitch">
<li><a id="saxbarm.pdx-bike-routes" href="#">Bike routes</a></li>
<li><a id="saxbarm.trimet-routes,saxbarm.stops" href="#">TriMet</a></li>
<li><a id="saxbarm.pdx-bike-routes,saxbarm.trimet-routes,saxbarm.stops" class="active" href="#">Show All</a></li>
</ul>
<p></p>
</div>
<div id='mymap'>
</div>
<script type='text/javascript'>
// Declare variables
var m, mm, interaction, legend;
// Set initial map layer
var layer = 'saxbarm.trimet-routes,saxbarm.pdx-bike-routes,saxbarm.trimet-stops';
// Static part of the map url
var urlBase = 'http://a.tiles.mapbox.com/v3/examples.map-4l7djmvo,';
// Full map url
var url = urlBase + layer + '.jsonp';
wax.tilejson(url, function(tilejson) {
mm = com.modestmaps;
m = new mm.Map('mymap',
new wax.mm.connector(tilejson));
//legend
legend = wax.mm.legend(m, tilejson).appendTo(m.parent);
//zoomer
wax.mm.zoomer(m, tilejson).appendTo(m.parent);
interaction = wax.mm.interaction(m, tilejson);
// Set the initial center and zoom level
m.setCenterZoom(new mm.Location(45.52, -122.68), 15);
});
$('#sidebar ul.layerswitch a').click(function (e) {
e.preventDefault();
layer = this.id;
$('#sidebar ul.layerswitch a').removeClass('active');
$(this).addClass('active');
refreshMap();
});
function refreshMap() {
url = urlBase + layer + '.jsonp';
wax.tilejson(url, function(tilejson) {
m.setLayerAt(0, new wax.mm.connector(tilejson));
interaction.remove();
interaction = wax.mm.interaction(m, tilejson);
});
}
</script>
</body>
</html>