Paul Wallace / CSE 170 Group Project

Download as
Browse Code ยป

Commit 77ade48c99a8bbb849a91e1cc48f7f542c029117

Authored by Paul Wallace
2 parents ef269e4eef 044c2fcc67
Exists in master

update the original repository to safe03

Showing 2 changed files Inline Diff

views/pages/index.ejs View file @ 77ade48
<!DOCTYPE html> 1 1 <!DOCTYPE html>
<html lang="en"> 2 2 <html lang="en">
<head> 3 3 <head>
<% include ../partials/header %> 4 4 <% include ../partials/header %>
</head> 5 5 </head>
6 6
<!-- Homepage --> 7 7 <!-- Homepage -->
8 8
<body> 9 9 <body>
<div class="container-fluid"> 10 10 <div class="container-fluid">
<div class="jumbotron text-center"> 11 11 <div class="jumbotron text-center">
<h1>Safe Routes</h1> 12 12 <h1>Safe Routes</h1>
<p>The best way to find the safest routes.</p> 13 13 <p>The best way to find the safest routes.</p>
</div> 14 14 </div>
15 15
16 16
17 17
18 18
<% if(!locals.loggedin || (locals.loggedin != "true")){ %> 19 19 <% if(!locals.loggedin || (locals.loggedin != "true")){ %>
20 20
<%console.log(locals.loggedin)%> 21 21 <%console.log(locals.loggedin)%>
<form action="/login"> 22 22 <form action="/login">
23 23
<button type="submit" class="btn btn-primary">Log In</button> 24 24 <button type="submit" class="btn btn-primary">Log In</button>
<!-- <input type="submit" value="Submit"> --> 25 25 <!-- <input type="submit" value="Submit"> -->
</form> 26 26 </form>
<% } %> 27 27 <% } %>
28 28
29 29
30 30
31 31
<!--What are for and type for?--> 32 32 <!--What are for and type for?-->
<!-- current submit button takes you to the landing page --> 33 33 <!-- current submit button takes you to the landing page -->
<form action="/landing"> 34 34 <form action="/landing">
<!-- First text field and label above the text field for current location --> 35 35 <!-- First text field and label above the text field for current location -->
<div class="form-group text-center"> 36 36 <div class="form-group text-center">
<label for="origin">From</label> 37 37 <label for="origin">From</label>
<input type="text" class="form-control" id="origin" placeholder="Enter Current Location" onclick="initFrom()"> 38 38 <input type="text" class="form-control" id="origin" placeholder="Enter Current Location" onclick="initFrom()">
</div> 39 39 </div>
<!-- Second text field and label above the text field for destination --> 40 40 <!-- Second text field and label above the text field for destination -->
<div class="form-group text-center"> 41 41 <div class="form-group text-center">
<label for="dest">To</label> 42 42 <label for="dest">To</label>
<input type="text" class="form-control" id="dest" placeholder="Enter Destination" onclick="initTo()"> 43 43 <input type="text" class="form-control" id="dest" placeholder="Enter Destination" onclick="initTo()">
</div> 44 44 </div>
<!-- First travel option button, walking 45 45 <!-- First travel option button, walking
This contains a row that holds buttons of type button. Buttons are highlighted upon selection. 46 46 This contains a row that holds buttons of type button. Buttons are highlighted upon selection.
--> 47 47 -->
<div class="row"> 48 48 <div class="row">
<button type="button" class="btn-default img-thumbnail col-xs-4" onclick="walk();"> 49 49 <button type="button" class="btn-default img-thumbnail col-xs-4" onclick="walk();">
<img class="img-responsive" src="images/pedestrian-walking.svg" alt="Walking Option" width="40" height="40"> 50 50 <img class="img-responsive" src="images/pedestrian-walking.svg" alt="Walking Option" width="40" height="40">
</button> 51 51 </button>
52 52
<!-- Second travel button, driving --> 53 53 <!-- Second travel button, driving -->
<button type="button" class="btn-default img-thumbnail col-xs-4" onclick="drive();"> 54 54 <button type="button" class="btn-default img-thumbnail col-xs-4" onclick="drive();">
<img class="img-responsive" src="images/car-compact.svg" alt="Walking Option" width="40" height="40"> 55 55 <img class="img-responsive" src="images/car-compact.svg" alt="Walking Option" width="40" height="40">
</button> 56 56 </button>
57 57
<!-- Third travel button, bus --> 58 58 <!-- Third travel button, bus -->
<button type="button" class="btn-default img-thumbnail col-xs-4" onclick="bus();"> 59 59 <button type="button" class="btn-default img-thumbnail col-xs-4" onclick="bus();">
<img class="img-responsive" src="images/bus.svg" alt="Walking Option" width="40" height="40"> 60 60 <img class="img-responsive" src="images/bus.svg" alt="Walking Option" width="40" height="40">
</button> 61 61 </button>
</div> 62 62 </div>
63 63
<div class="text-center"> 64 64 <div class="text-center">
<button type="submit" class="btn btn-primary btn-space">Go</button> 65 65 <button type="submit" class="btn btn-primary btn-space">Go</button>
</div> 66 66 </div>
</form> 67 67 </form>
</div> 68 68 </div>
69 69
<!-- Google Map functionality. --> 70 70 <!-- Google Map functionality. -->
<script> 71 71 <script>
function initFrom() { 72 72 function initFrom() {
var temp = document.getElementById("origin"); 73 73 var temp = document.getElementById("origin");
74 74
var autoOrigin = new google.maps.places.Autocomplete(temp); 75 75 var autoOrigin = new google.maps.places.Autocomplete(temp);
76 76
google.maps.event.addListener(autoOrigin, 'place_changed', function () { 77 77 google.maps.event.addListener(autoOrigin, 'place_changed', function () {
var place = autoOrigin.getPlace(); 78 78 var place = autoOrigin.getPlace();
// Testing. 79 79 // Testing.
console.log(place); 80 80 console.log(place);
81 <<<<<<< HEAD
//localStorage.setItem("from", place.formatted_address); 81 82 //localStorage.setItem("from", place.formatted_address);
localStorage.setItem("fromIn", temp.value); 82 83 localStorage.setItem("fromIn", temp.value);
localStorage.setItem("originLat", place.geometry.location.lat()); 83 84 localStorage.setItem("originLat", place.geometry.location.lat());
localStorage.setItem("originLng", place.geometry.location.lng()); 84 85 localStorage.setItem("originLng", place.geometry.location.lng());
86 =======
87 localStorage.setItem("from", place.formatted_address);
88 >>>>>>> 044c2fcc67b88e2e59ea2720d1eb8ababb014660
}); 85 89 });
} 86 90 }
87 91
function initTo() { 88 92 function initTo() {
var temp = document.getElementById("dest"); 89 93 var temp = document.getElementById("dest");
90 94
var autoDest = new google.maps.places.Autocomplete(temp); 91 95 var autoDest = new google.maps.places.Autocomplete(temp);
92 96
google.maps.event.addListener(autoDest, 'place_changed', function () { 93 97 google.maps.event.addListener(autoDest, 'place_changed', function () {
var place = autoDest.getPlace(); 94 98 var place = autoDest.getPlace();
// Testing. 95 99 // Testing.
console.log(place); 96 100 console.log(place);
101 <<<<<<< HEAD
//localStorage.setItem("to", place.formatted_address); 97 102 //localStorage.setItem("to", place.formatted_address);
localStorage.setItem("toIn", temp.value); 98 103 localStorage.setItem("toIn", temp.value);
localStorage.setItem("destLat", place.geometry.location.lat()); 99 104 localStorage.setItem("destLat", place.geometry.location.lat());
localStorage.setItem("destLng", place.geometry.location.lng()); 100 105 localStorage.setItem("destLng", place.geometry.location.lng());
}); 101 106 });
} 102 107 }
103 108
if (navigator.geolocation) { 104 109 if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos) { 105 110 navigator.geolocation.getCurrentPosition(function(pos) {
var geocoder = new google.maps.Geocoder; 106 111 var geocoder = new google.maps.Geocoder;
var point = new google.maps.LatLng( 107 112 var point = new google.maps.LatLng(
pos.coords.latitude, pos.coords.longitude); 108 113 pos.coords.latitude, pos.coords.longitude);
109 114
localStorage.setItem("originLat", pos.coords.latitude); 110 115 localStorage.setItem("originLat", pos.coords.latitude);
localStorage.setItem("originLng", pos.coords.longitude); 111 116 localStorage.setItem("originLng", pos.coords.longitude);
112 117
geocoder.geocode({'latLng': point}, function (locations, status) { 113 118 geocoder.geocode({'latLng': point}, function (locations, status) {
if (status == google.maps.GeocoderStatus.OK) { 114 119 if (status == google.maps.GeocoderStatus.OK) {
for (var location of locations) { 115 120 for (var location of locations) {
if ($.inArray("street_address", location.types) != -1) { 116 121 if ($.inArray("street_address", location.types) != -1) {
console.log('Your location is: ' + location.formatted_address); 117 122 console.log('Your location is: ' + location.formatted_address);
document.getElementById("origin").value = location.formatted_address; 118 123 document.getElementById("origin").value = location.formatted_address;
saveFrom(); 119 124 saveFrom();
break; 120 125 break;
} 121 126 }
}; 122 127 };
} 123 128 }
}); 124 129 });
130 =======
131 localStorage.setItem("to", place.formatted_address);
132 >>>>>>> 044c2fcc67b88e2e59ea2720d1eb8ababb014660
}); 125 133 });
} 126 134 }
127 135
function saveFrom() { 128 136 function saveFrom() {
var fromInput = document.getElementById("origin").value; 129 137 var fromInput = document.getElementById("origin").value;
localStorage.setItem("from", fromInput); 130 138 localStorage.setItem("from", fromInput);
139 <<<<<<< HEAD
views/pages/landing.ejs View file @ 77ade48
<!DOCTYPE html> 1 1 <!DOCTYPE html>
<html lang="en"> 2 2 <html lang="en">
<head> 3 3 <head>
<% include ../partials/header %> 4 4 <% include ../partials/header %>
<!-- <script type="text/javascript" 5 5 <!-- <script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAXDHeZXEv4H4ZnThVDxpyAuxVpzOcj_U&libraries=visualization"> 6 6 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAXDHeZXEv4H4ZnThVDxpyAuxVpzOcj_U&libraries=visualization">
</script> --> 7 7 </script> -->
8 8
<script> 9 9 <script>
window.onload = function() { 10 10 window.onload = function() {
//Deep link URL for existing users with app already installed on their device 11 11 //Deep link URL for existing users with app already installed on their device
12 12
//<!-- Download URL (MAT link) for new users to download the app --> 13 13 //<!-- Download URL (MAT link) for new users to download the app -->
// setTimeout("window.location = 'http://hastrk.com/serve?action=click&publisher_id=1&site_id=2';", 1000); 14 14 // setTimeout("window.location = 'http://hastrk.com/serve?action=click&publisher_id=1&site_id=2';", 1000);
} 15 15 }
</script> 16 16 </script>
17 17
</head> 18 18 </head>
19 19
20 20
<body> 21 21 <body>
<div class="container"> 22 22 <div class="container">
23 23
<!-- My LOCATION --> 24 24 <!-- My LOCATION -->
<div> 25 25 <div>
<input type="text" class="form-control text-field" id="origin" placeholder="My Location" onclick="initFrom()"> 26 26 <input type="text" class="form-control text-field" id="origin" placeholder="My Location" onclick="initFrom()">
</div> 27 27 </div>
<!-- Destination --> 28 28 <!-- Destination -->
<div> 29 29 <div>
<input type="text" class="form-control text-field" id="dest" placeholder="Final Destination" onclick="initTo()"> 30 30 <input type="text" class="form-control text-field" id="dest" placeholder="Final Destination" onclick="initTo()">
</div> 31 31 </div>
32 32
<!-- Buttons and status information on top of the map. --> 33 33 <!-- Buttons and status information on top of the map. -->
<div class="container" id="map-top"> 34 34 <div class="container" id="map-top">
<div class="row"> 35 35 <div class="row">
<!-- Status --> 36 36 <!-- Status -->
<div class="col-xs-6"> 37 37 <div class="col-xs-6">
<!-- Title: Current Route --> 38 38 <!-- Title: Current Route -->
<div> 39 39 <div>
Current Route Safety: 40 40 Current Route Safety:
</div> 41 41 </div>
<!-- Icons + Status --> 42 42 <!-- Icons + Status -->
<div class="row status"> 43 43 <div class="row status">
<!-- Safety Rating --> 44 44 <!-- Safety Rating -->
<div class="col-xs-4" name="grade"> 45 45 <div class="col-xs-4" name="grade">
46 46
</div> 47 47 </div>
</div> 48 48 </div>
</div> 49 49 </div>
50 50
<div class="col-xs-6"> 51 51 <div class="col-xs-6">
<div> 52 52 <div>
Estimated Route Time: 53 53 Estimated Route Time:
</div> 54 54 </div>
<div class="row status"> 55 55 <div class="row status">
<!-- Travel Duration --> 56 56 <!-- Travel Duration -->
<div class="col-xs-4" name="time"> 57 57 <div class="col-xs-4" name="time">
</div> 58 58 </div>
</div> 59 59 </div>
</div> 60 60 </div>
61 61
62 62
<!-- Alt Routes 63 63 <!-- Alt Routes
<div class="col-xs-4"> 64 64 <div class="col-xs-4">
<button type="button" class="btn btn-default btn-block text-center" id="alt-routes" onclick="todo()">Alternate Routes</button> 65 65 <button type="button" class="btn btn-default btn-block text-center" id="alt-routes" onclick="todo()">Alternate Routes</button>
</div> 66 66 </div>
--> 67 67 -->
</div> 68 68 </div>
</div> 69 69 </div>
70 70
<!-- Floating panel for key or for toggle heat map 71 71 <!-- Floating panel for key or for toggle heat map
<div id="floating-panel"> 72 72 <div id="floating-panel">
<button onclick="toggleHeatmap()">Toggle Heatmap</button> 73 73 <button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button> 74 74 <button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button> 75 75 <button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button> 76 76 <button onclick="changeOpacity()">Change opacity</button>
</div> 77 77 </div>
--> 78 78 -->
79 79
<div> Move a circle to get a crime summary of that location (half mile radius)</div> 80 80 <div> Move a circle to get a crime summary of that location (half mile radius)</div>
81 81
<dir class="container" id="map-area"> 82 82 <dir class="container" id="map-area">
<div class="row"> 83 83 <div class="row">
<!-- Div container for map. --> 84 84 <!-- Div container for map. -->
<div class="col-xs-7" id="map"></div> 85 85 <div class="col-xs-7" id="map"></div>
<!-- Div container for the directions display--> 86 86 <!-- Div container for the directions display-->
<div class="col-xs-5" id="right-panel"></div> 87 87 <div class="col-xs-5" id="right-panel"></div>
</div> 88 88 </div>
</dir> 89 89 </dir>
90 90
<!-- Javascript for the map. --> 91 91 <!-- Javascript for the map. -->
<script> 92 92 <script>
93
var map, heatmap; 94 93 var map, heatmap;
// Used by the Google Maps Direction API. 95 94 // Used by the Google Maps Direction API.
var directionsService; 96 95 var directionsService;
var directionsDisplay; 97 96 var directionsDisplay;
//array to hold the circle added to map 98 97 //array to hold the circle added to map
var circleArray; 99 98 var circleArray;
100 99
function initMap() { 101 100 function initMap() {
circleArray = []; 102 101 circleArray = [];
directionsService = new google.maps.DirectionsService; 103 102 directionsService = new google.maps.DirectionsService;
directionsDisplay = new google.maps.DirectionsRenderer; 104 103 directionsDisplay = new google.maps.DirectionsRenderer;
// Setting default map location i.e. Geisel Library. 105 104 // Setting default map location i.e. Geisel Library.
map = new google.maps.Map(document.getElementById('map'), { 106 105 map = new google.maps.Map(document.getElementById('map'), {
zoom: 13, 107 106 zoom: 13,
center: {lat: 37.775, lng: -122.434} 108 107 center: {lat: 37.775, lng: -122.434}
}); 109 108 });
directionsDisplay.setMap(map); 110 109 directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel')); 111 110 directionsDisplay.setPanel(document.getElementById('right-panel'));
// Keeping the map center when the browser is resized. 112 111 // Keeping the map center when the browser is resized.
function resizing() { 113 112 function resizing() {
var center = map.getCenter(); 114 113 var center = map.getCenter();
google.maps.event.trigger(map, "resize"); 115 114 google.maps.event.trigger(map, "resize");
map.setCenter(center); 116 115 map.setCenter(center);
} 117 116 }
118 117
google.maps.event.addDomListener(window, "resize", resizing); 119 118 google.maps.event.addDomListener(window, "resize", resizing);
// Show route. 120 119 // Show route.
displayRoute(directionsService, directionsDisplay); 121 120 displayRoute(directionsService, directionsDisplay);
} 122 121 }
123 122
function displayRoute(directionsService, directionsDisplay) { 124 123 function displayRoute(directionsService, directionsDisplay) {
// Textfields that show from and to. 125 124 // Textfields that show from and to.
document.getElementById("origin").value = localStorage.getItem("fromIn"); 126 125 document.getElementById("origin").value = localStorage.getItem("fromIn");
document.getElementById("dest").value = localStorage.getItem("toIn"); 127 126 document.getElementById("dest").value = localStorage.getItem("toIn");
128 127
// Default mode to driving if none was chosen. 129 128 // Default mode to driving if none was chosen.
var mode = localStorage.getItem("mode"); 130 129 var mode = localStorage.getItem("mode");
131 130
if (mode != "WALKING" && mode != "DRIVING" && mode != "TRANSIT") { 132 131 if (mode != "WALKING" && mode != "DRIVING" && mode != "TRANSIT") {
mode = "DRIVING"; 133 132 mode = "DRIVING";
} 134 133 }
135 134
var originPoint = new google.maps.LatLng(localStorage.getItem("originLat"), localStorage.getItem("originLng")); 136 135 var originPoint = new google.maps.LatLng(localStorage.getItem("originLat"), localStorage.getItem("originLng"));
var destPoint = new google.maps.LatLng(localStorage.getItem("destLat"), localStorage.getItem("destLng")); 137 136 var destPoint = new google.maps.LatLng(localStorage.getItem("destLat"), localStorage.getItem("destLng"));
138 137
var request = { 139 138 var request = {
origin: originPoint, 140 139 origin: originPoint,
destination: destPoint, 141 140 destination: destPoint,
travelMode: mode 142 141 travelMode: mode
}; 143 142 };
144 143
directionsService.route(request, function(response, status) { 145 144 directionsService.route(request, function(response, status) {
if (status === "OK") { 146 145 if (status === "OK") {
console.log(response); 147 146 console.log(response);
directionsDisplay.setDirections(response); 148 147 directionsDisplay.setDirections(response);
document.getElementsByName("time")[0].innerHTML = response.routes[0].legs[0].duration.text 149 148 document.getElementsByName("time")[0].innerHTML = response.routes[0].legs[0].duration.text
//Set up the markers to show danger in different areas 150 149 //Set up the markers to show danger in different areas
getPoints(response.routes[0]); 151 150 getPoints(response.routes[0]);
} 152 151 }
else { 153 152 else {
window.alert("Directions request failed due to " + status); 154 153 window.alert("Directions request failed due to " + status);
} 155 154 }
}); 156 155 });
} 157 156 }
158 157
function initFrom() { 159 158 function initFrom() {
var temp = document.getElementById("origin"); 160 159 var temp = document.getElementById("origin");
var autoOrigin = new google.maps.places.Autocomplete(temp); 161 160 var autoOrigin = new google.maps.places.Autocomplete(temp);
google.maps.event.addListener(autoOrigin, 'place_changed', function () { 162 161 google.maps.event.addListener(autoOrigin, 'place_changed', function () {
var place = autoOrigin.getPlace(); 163 162 var place = autoOrigin.getPlace();
// Testing. 164 163 // Testing.
console.log(place); 165 164 console.log(place);
localStorage.setItem("fromIn", temp.value); 166 165 localStorage.setItem("fromIn", temp.value);
localStorage.setItem("originLat", place.geometry.location.lat()); 167 166 localStorage.setItem("originLat", place.geometry.location.lat());
localStorage.setItem("originLng", place.geometry.location.lng()); 168 167 localStorage.setItem("originLng", place.geometry.location.lng());
//Prevent memory leak, remove circle from last route 169 168 //Prevent memory leak, remove circle from last route
removeCircles(); 170 169 removeCircles();
clearGrade(); 171 170 clearGrade();
displayRoute(directionsService, directionsDisplay); 172 171 displayRoute(directionsService, directionsDisplay);
}); 173 172 });
} 174 173 }
175 174
function initTo() { 176 175 function initTo() {
var temp = document.getElementById("dest"); 177 176 var temp = document.getElementById("dest");
var autoDest = new google.maps.places.Autocomplete(temp); 178 177 var autoDest = new google.maps.places.Autocomplete(temp);
google.maps.event.addListener(autoDest, 'place_changed', function () { 179 178 google.maps.event.addListener(autoDest, 'place_changed', function () {
var place = autoDest.getPlace(); 180 179 var place = autoDest.getPlace();
// Testing. 181 180 // Testing.
console.log(place); 182 181 console.log(place);
localStorage.setItem("toIn", temp.value); 183 182 localStorage.setItem("toIn", temp.value);
localStorage.setItem("destLat", place.geometry.location.lat()); 184 183 localStorage.setItem("destLat", place.geometry.location.lat());
localStorage.setItem("destLng", place.geometry.location.lng()); 185 184 localStorage.setItem("destLng", place.geometry.location.lng());
//Prevent memory leak, remove circle from last route 186 185 //Prevent memory leak, remove circle from last route
removeCircles(); 187 186 removeCircles();
clearGrade(); 188 187 clearGrade();
displayRoute(directionsService, directionsDisplay); 189 188 displayRoute(directionsService, directionsDisplay);
}); 190 189 });
} 191 190 }
192 191
function getPoints(route) { 193 192 function getPoints(route) {
//set up HTTP client to make GET request to API 194 193 //set up HTTP client to make GET request to API
var HttpClient = function() { 195 194 var HttpClient = function() {
this.get = function(aUrl, aCallback) { 196 195 this.get = function(aUrl, aCallback) {
var anHttpRequest = new XMLHttpRequest(); 197 196 var anHttpRequest = new XMLHttpRequest();
anHttpRequest.onreadystatechange = function() { 198 197 anHttpRequest.onreadystatechange = function() {
if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200) 199 198 if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
aCallback(anHttpRequest.responseText); 200 199 aCallback(anHttpRequest.responseText);
} 201 200 }
//gj4g6D3zxKmshys7yyf9KNbuywOxp1ueazFjsn6n2fK4sccIGA 202 201 //gj4g6D3zxKmshys7yyf9KNbuywOxp1ueazFjsn6n2fK4sccIGA
anHttpRequest.open( "GET", aUrl, true ); 203 202 anHttpRequest.open( "GET", aUrl, true );
anHttpRequest.setRequestHeader("X-Mashape-Key", "W4MVkGfi3ZmshbMN0LqORTZunzeTp1rEG5Pjsn9og1t7bRnQxG"); 204 203 anHttpRequest.setRequestHeader("X-Mashape-Key", "W4MVkGfi3ZmshbMN0LqORTZunzeTp1rEG5Pjsn9og1t7bRnQxG");
//W4MVkGfi3ZmshbMN0LqORTZunzeTp1rEG5Pjsn9og1t7bRnQxG 205 204 //W4MVkGfi3ZmshbMN0LqORTZunzeTp1rEG5Pjsn9og1t7bRnQxG
anHttpRequest.setRequestHeader("Accept", "application/json") 206 205 anHttpRequest.setRequestHeader("Accept", "application/json")
anHttpRequest.send( null ); 207 206 anHttpRequest.send( null );
} 208 207 }
} 209 208 }
210 209
//Loop through the steps of the route to get the center point 211 210 //Loop through the steps of the route to get the center point
var bounds = new google.maps.LatLngBounds(); 212 211 var bounds = new google.maps.LatLngBounds();
var legs = route.legs; 213 212 var legs = route.legs;
for (i=0;i<legs.length;i++) { 214 213 for (i=0;i<legs.length;i++) {
var steps = legs[i].steps; 215 214 var steps = legs[i].steps;
for (j=0;j<steps.length;j++) { 216 215 for (j=0;j<steps.length;j++) {
var nextSegment = steps[j].path; 217 216 var nextSegment = steps[j].path;
for (k=0;k<nextSegment.length;k++) { 218 217 for (k=0;k<nextSegment.length;k++) {
// polyline.getPath().push(nextSegment[k]); 219 218 // polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]); 220 219 bounds.extend(nextSegment[k]);
} 221 220 }
} 222 221 }
} 223 222 }
224 223
//create instance of HTTP client 225 224 //create instance of HTTP client
aClient = new HttpClient(); 226 225 aClient = new HttpClient();
/*Also very possible to use RouteBoxer as a better solution*/ 227 226 /*Also very possible to use RouteBoxer as a better solution*/
// for (var i = route.legs[0].steps.length - 1; i >= 0; i--) { 228 227 // for (var i = route.legs[0].steps.length - 1; i >= 0; i--) {
229 228
for (var i = 0; i < 3; i++){ 230 229 for (var i = 0; i < 3; i++){
var long = route.legs[0].steps[i].end_point.lng(); 231 230 var long = route.legs[0].steps[i].end_point.lng();
var lat = route.legs[0].steps[i].end_point.lat(); 232 231 var lat = route.legs[0].steps[i].end_point.lat();
if(i == 2){ 233 232 if(i == 2){
long = route.legs[0].steps[route.legs[0].steps.length - 1].end_point.lng(); 234 233 long = route.legs[0].steps[route.legs[0].steps.length - 1].end_point.lng();
lat = route.legs[0].steps[route.legs[0].steps.length - 1].end_point.lat(); 235 234 lat = route.legs[0].steps[route.legs[0].steps.length - 1].end_point.lat();
} 236 235 }
237 236
//If middle point then get the center point from bounds 238 237 //If middle point then get the center point from bounds
else if(i == 1){ 239 238 else if(i == 1){
long = bounds.getCenter().lng(); 240 239 long = bounds.getCenter().lng();
lat = bounds.getCenter().lat(); 241 240 lat = bounds.getCenter().lat();
} 242 241 }
//Base string concatenated with GET request options 243 242 //Base string concatenated with GET request options
var str = "https://crimescore.p.mashape.com/crimescore?f=json&id=174&lat=".concat(lat).concat("&lon=").concat(long); 244 243 var str = "https://crimescore.p.mashape.com/crimescore?f=json&id=174&lat=".concat(lat).concat("&lon=").concat(long);
//Make the HTTP request 245 244 //Make the HTTP request
aClient.get(str, function(result) { 246 245 aClient.get(str, function(result) {
//check what the score is 247 246 //check what the score is
var object = JSON.parse(result); 248 247 var object = JSON.parse(result);
var score = parseInt(object.score); 249 248 var score = parseInt(object.score);
var grade = object.grade; 250 249 var grade = object.grade;
console.log(result); 251 250 console.log(result);
252 251
253 252
//Colors: 254 253 //Colors:
//Yellow: #f1c40f 255 254 //Yellow: #f1c40f
//Red: #e74c3c 256 255 //Red: #e74c3c
//Light Green: #2ecc71 257 256 //Light Green: #2ecc71
//Dark Green: #27ae60 258 257 //Dark Green: #27ae60
//Blue: #3498db 259 258 //Blue: #3498db
260 259
//create the options object 261 260 //create the options object
var circle = new google.maps.Circle({ 262 261 var circle = new google.maps.Circle({
strokeColor: '#3498db', 263 262 strokeColor: '#3498db',
strokeOpacity: 0.8, 264 263 strokeOpacity: 0.8,
strokeWeight: 2, 265 264 strokeWeight: 2,
fillColor: '#3498db', 266 265 fillColor: '#3498db',
fillOpacity: 0.35, 267 266 fillOpacity: 0.35,
map: map, 268 267 map: map,
center: {lat: parseFloat(object.latitude), lng: parseFloat(object.longitude)}, 269 268 center: {lat: parseFloat(object.latitude), lng: parseFloat(object.longitude)},
radius: 804, 270 269 radius: 804,
draggable: true 271 270 draggable: true
}) 272 271 })
273 272
setColor(score, circle); 274 273 setColor(score, circle);
setGrade(object.grade); 275 274 setGrade(object.grade);
circleArray.push(circle); 276 275 circleArray.push(circle);
circle.addListener('dragend', function(event){ 277 276 circle.addListener('dragend', function(event){
var newLat = event.latLng.lat(); 278 277 var newLat = event.latLng.lat();
var newLong = event.latLng.lng(); 279 278 var newLong = event.latLng.lng();
280 279
var newStr = "https://crimescore.p.mashape.com/crimescore?f=json&id=174&lat=".concat(newLat).concat("&lon=").concat(newLong) 281 280 var newStr = "https://crimescore.p.mashape.com/crimescore?f=json&id=174&lat=".concat(newLat).concat("&lon=").concat(newLong)
aClient.get(newStr, function(result){ 282 281 aClient.get(newStr, function(result){
//change the color 283 282 //change the color
var newObject = JSON.parse(result); 284 283 var newObject = JSON.parse(result);
var newScore = parseInt(newObject.score); 285 284 var newScore = parseInt(newObject.score);
setColor(newScore, circle); 286 285 setColor(newScore, circle);
// setGrade(object.grade); 287 286 // setGrade(object.grade);
}); 288 287 });
}); 289 288 });
}); 290 289 });
} 291 290 }
} 292 291 }
293 292
function toggleHeatmap(){ 294 293 function toggleHeatmap(){
//add the heatmap to the thing 295 294 //add the heatmap to the thing
} 296 295 }
297 296
function setGrade(grade){ 298 297 function setGrade(grade){
var currGrade = document.getElementsByName("grade")[0].innerHTML = grade; 299 298 var currGrade = document.getElementsByName("grade")[0].innerHTML = grade;
if(currGrade == "N/A"){ 300 299 if(currGrade == "N/A"){
if(grade != "N/A"){ 301 300 if(grade != "N/A"){
document.getElementsByName("grade")[0].innerHTML = grade; 302 301 document.getElementsByName("grade")[0].innerHTML = grade;
} 303 302 }
} else { 304 303 } else {
if(currGrade > grade){ 305 304 if(currGrade > grade){
document.getElementsByName("grade")[0].innerHTML = grade; 306 305 document.getElementsByName("grade")[0].innerHTML = grade;
} 307 306 }
} 308 307 }
} 309 308 }
310 309
function clearGrade(){ 311 310 function clearGrade(){
document.getElementsByName("grade")[0].innerHTML = ""; 312 311 document.getElementsByName("grade")[0].innerHTML = "";
} 313 312 }
314 313
function setColor(score, circle){ 315 314 function setColor(score, circle){
if(score == 0){ 316 315 if(score == 0){
//set color to blue 317 316 //set color to blue
circle.setOptions({fillColor: '#3498db', strokeColor: '#3498db' }); 318 317 circle.setOptions({fillColor: '#3498db', strokeColor: '#3498db' });
} else if(0 < score && score < 20){ 319 318 } else if(0 < score && score < 20){
//set color to red 320 319 //set color to red
circle.setOptions({fillColor: '#e74c3c', strokeColor: '#e74c3c' }); 321 320 circle.setOptions({fillColor: '#e74c3c', strokeColor: '#e74c3c' });
} else if(20 <= score && score < 40){ 322 321 } else if(20 <= score && score < 40){
//set orange 323 322 //set orange
circle.setOptions({fillColor: '#e67e22', strokeColor: '#e67e22' }); 324 323 circle.setOptions({fillColor: '#e67e22', strokeColor: '#e67e22' });
} else if(40 <= score && score < 60){ 325 324 } else if(40 <= score && score < 60){
//set yellow 326 325 //set yellow
circle.setOptions({fillColor: '#f1c40f', strokeColor: '#f1c40f' }); 327 326 circle.setOptions({fillColor: '#f1c40f', strokeColor: '#f1c40f' });
} else if(60 <= score && score < 80){ 328 327 } else if(60 <= score && score < 80){
//light green 329 328 //light green
circle.setOptions({fillColor: '#2ecc71', strokeColor: '#2ecc71' }); 330 329 circle.setOptions({fillColor: '#2ecc71', strokeColor: '#2ecc71' });
} else { 331 330 } else {
//dark green 332 331 //dark green
circle.setOptions({fillColor: '#27ae60', strokeColor: '#27ae60' }); 333 332 circle.setOptions({fillColor: '#27ae60', strokeColor: '#27ae60' });
} 334 333 }
} 335 334 }
336 335
function removeCircles(){ 337 336 function removeCircles(){
for(var i = 0; i< circleArray.length; i++){ 338 337 for(var i = 0; i< circleArray.length; i++){
circleArray[i].setMap(null); 339 338 circleArray[i].setMap(null);
} 340 339 }
circleArray = []; 341 340 circleArray = [];
} 342 341 }
343 342
function getCircle() { 344 343 function getCircle() {
return { 345 344 return {
path: google.maps.SymbolPath.CIRCLE, 346 345 path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red', 347 346 fillColor: 'red',
fillOpacity: .8, 348 347 fillOpacity: .8,
scale: 10, 349 348 scale: 10,
strokeColor: 'white', 350 349 strokeColor: 'white',
strokeWeight: .5 351 350 strokeWeight: .5
}; 352 351 };
} 353 352 }
</script> 354 353 </script>
355 354
<!-- Calling google maps API using the function defined above. --> 356 355 <!-- Calling google maps API using the function defined above. -->
<script async defer 357 356 <script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAXDHeZXEv4H4ZnThVDxpyAuxVpzOcj_U&callback=initMap&libraries=visualization,places"> 358 357 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAXDHeZXEv4H4ZnThVDxpyAuxVpzOcj_U&callback=initMap&libraries=visualization,places">
</script> 359 358 </script>