forked from jeremiak/things-near-my-bus-stop
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (102 loc) · 3.7 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
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style type="text/css">
#map {
height:600px;
}
</style>
</head>
<body>
<div id="map"></div>
<div>I'm on the
<select id="bus-routes">
</select>
looking for a
<select id="things">
<option>bar</option>
<option>pharmacy</option>
</select>
<button id="find-things">Find the things!</button>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script type="text/javascript">
var map = L.map('map'),
route_stop_coords = [],
query_near_route_api = 'http://metro-stl-routes-venues-api.herokuapp.com/routes/',
markers;
function setMapToCurrentLocation(data) {
var latitude = data.coords['latitude'];
var longitude = data.coords['longitude'];
map.setView([latitude, longitude], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
}
function handleJsonResponse(stops) {
for (stop in stops) {
var stop_location = stops[stop]['stop_location'];
route_stop_coords.push([stop_location['lat'], stop_location['long']]);
console.log()
stop_venues = stops[stop]['venues'];
for(var i=0;i<stop_venues.length;i++) {
var latitude = stop_venues[i].location.lat;
var longitude = stop_venues[i].location.lng;
L.marker([latitude, longitude]).addTo(map)
.bindPopup(stop_venues[i].name)
.openPopup();
}
}
var polyline = L.polyline(route_stop_coords, {color: 'red'}).addTo(map);
map.fitBounds(polyline.getBounds());
}
function loadRoutesIntoSelect() {
var routes = [];
$.getJSON('http://www.corsproxy.com/gtfs-api.herokuapp.com/api/routes/metro-st-louis',
function(data) {
for (route in data) {
route = data[route];
routes.push(route);
}
$.each(routes, function(route) {
var route_option;
route = routes[route];
bus_route_text = route['route_short_name'] + ' - ' + route['route_long_name'];
route_option = $('<option></option>').attr('value',route['route_id']).text(bus_route_text);
$('select#bus-routes').append(route_option);
});
});
}
function findThingsWithSelection() {
var route = $('select#bus-routes').val(),
thing = 'bar', //$('select#things').val(),
url;
clearMap();
url = query_near_route_api + route + '?query=' + thing;
console.log(url);
$.getJSON(url, handleJsonResponse);
}
function clearMap() {
route_stop_coords = [];
for(i in map._layers) {
if(map._layers[i]._url != "http://{s}.tile.osm.org/{z}/{x}/{y}.png") {
try {
map.removeLayer(map._layers[i]);
}
catch(e) {
console.log("problem with " + e + map._layers[i]);
}
}
}
}
$(document).ready(function(){
navigator.geolocation.getCurrentPosition(setMapToCurrentLocation);
$('button#find-things').click(findThingsWithSelection);
loadRoutesIntoSelect();
});
</script>
</body>
</html>