-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
67 lines (53 loc) · 2.34 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
<!DOCTYPE html>
<html>
<body>
<h1>Huntsville Safe Bike Routes</h1>
<p>List of safe bike routes to various destinations in Huntsville. Click a route for more information</p>
<div id="googleMap" style="width:100%;height:600px"></div>
<!--Route Data loaded as filename_lat, filename_lon from filename.js-->
<script src="routes/downtownToUAH.js"></script>
<!--Map Plotting-->
<script>
function gpsPoints(gps_lat, gps_lon) {
// Function for converting floating point lat, lon values to Google maps LatLng point
var points = [];
for (var i = 0; i < gps_lat.length; i++) {
points[i] = new google.maps.LatLng(gps_lat[i], gps_lon[i]);
}
return points;
} // END gpsPoints()
function addRoute(map, description, gps_lat, gps_lon, color="#FF0000", opacity=1.0) {
// Function for drawing a route path on a map with a clickable description
var points = gpsPoints(gps_lat, gps_lon);
var path = new google.maps.Polyline({
path: points,
strokeColor: color,
strokeOpacity: opacity,
strokeWeight: 5,
});
path.setMap(map);
path.description = new google.maps.InfoWindow({content: description});
var N = Math.floor(0.5 * points.length);
google.maps.event.addListener(path, 'click', function(){
this.description.setPosition(points[N]);
this.description.open(map);
});
} // END addRoute()
function genLabel(route_name, link, length, route_type, route_difficulty, course_id) {
return "<a href=\"https://www.youtube.com/watch?v=" + link + "\">" + route_name + "</a>" +
"<br> Length: " + length + "<br> Type: " + route_type + "<br> Difficulty: " + route_difficulty +
"<br> <a href=\"https://connect.garmin.com/modern/course/" + course_id + "\"> Garmin Course</a>";
} // END genLabel()
function myMap() {
// Function for drawing a map of huntsville
var mapProp= {center:new google.maps.LatLng(34.7304,-86.5861), zoom:13};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
// difficulty colors
var intermediate = "#EC8536"
label = genLabel("Downtown to UAH", "Ky5e-FFI8xg", "5 miles", "Commuter", "Intermediate", "248790113");
addRoute(map, label, downtownToUAH_lat, downtownToUAH_lon, color=intermediate, opacity=0.85);
} // END MyMap()
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=myMap"></script>
</body>
</html>