diff --git a/gmaps_testing/app.js b/gmaps_testing/app.js index a635322..31adef5 100644 --- a/gmaps_testing/app.js +++ b/gmaps_testing/app.js @@ -1,183 +1,224 @@ function loadGoogle() { - if(typeof google != 'undefined' && google && google.load) - { - google.load('visualization', '1', {packages: ['columnchart']}); - } - else { - setTimeout(loadGoogle, 30); - } + if (typeof google != 'undefined' && google && google.load) { + google.load('visualization', '1', { + packages: ['columnchart'] + }); + } else { + setTimeout(loadGoogle, 30); + } } loadGoogle(); -function initMap() { - var markerArray = []; - - - // Instantiate a directions service. - var directionsService = new google.maps.DirectionsService; - - // Create a map and center it on Manhattan. - var map = new google.maps.Map(document.getElementById('map'), { - zoom: 13, - center: {lat: 40.771, lng: -73.974}, - mapTypeControl: true, - mapTypeControlOptions: { - style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, - position: google.maps.ControlPosition.TOP_CENTER - }, - zoomControl: true, - zoomControlOptions: { - position: google.maps.ControlPosition.LEFT_CENTER - }, - scaleControl: true, - streetViewControl: true, - streetViewControlOptions: { - position: google.maps.ControlPosition.LEFT_TOP - } - }); - - // Create a renderer for directions and bind it to the map. - var directionsDisplay = new google.maps.DirectionsRenderer({ - map: map, - draggable: true - }); - - // Instantiate an info window to hold step text. - var stepDisplay = new google.maps.InfoWindow; - - // Display the route between the initial start and end selections. - calculateAndDisplayRoute( - directionsDisplay, directionsService, markerArray, stepDisplay, map); - // Listen to change events from the start and end lists. - var onChangeHandler = function() { +function initMap() { + var markerArray = []; + + + // Instantiate a directions service. + var directionsService = new google.maps.DirectionsService(); + + // Create a map and center it on Manhattan. + var map = new google.maps.Map(document.getElementById('map'), { + zoom: 13, + center: { + lat: 40.771, + lng: -73.974 + }, + mapTypeControl: true, + mapTypeControlOptions: { + style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, + position: google.maps.ControlPosition.TOP_CENTER + }, + zoomControl: true, + zoomControlOptions: { + position: google.maps.ControlPosition.LEFT_CENTER + }, + scaleControl: true, + streetViewControl: true, + streetViewControlOptions: { + position: google.maps.ControlPosition.LEFT_TOP + } + }); + + // Create a renderer for directions and bind it to the map. + var directionsDisplay = new google.maps.DirectionsRenderer({ + map: map, + draggable: true + }); + + + // Instantiate an info window to hold step text. + var stepDisplay = new google.maps.InfoWindow(); + + // Display the route between the initial start and end selections. calculateAndDisplayRoute( directionsDisplay, directionsService, markerArray, stepDisplay, map); - }; - document.getElementById('submit').addEventListener('click', onChangeHandler); - - // directionsDisplay.addListener("directions_changed", function() { - // calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map); - // }); + // Listen to change events from the start and end lists. + var onChangeHandler = function() { + calculateAndDisplayRoute( + directionsDisplay, directionsService, markerArray, stepDisplay, map); + }; + document.getElementById('submit').addEventListener('click', onChangeHandler); + + // directionsDisplay.addListener("directions_changed", function() { + // calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map); + // }); } function calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map) { - // First, remove any existing markers from the map. - for (var i = 0; i < markerArray.length; i++) { - markerArray[i].setMap(null); - } - - // Retrieve the start and end locations and create a DirectionsRequest using - // WALKING directions. - directionsService.route({ - origin: document.getElementById('start').value, - destination: document.getElementById('end').value, - travelMode: google.maps.TravelMode.BICYCLING, - provideRouteAlternatives: true - }, function(response, status) { - // Route the directions and pass the response to a function to create - // markers for each step. - if (status === google.maps.DirectionsStatus.OK) { - console.log(response.routes[0].warnings); - directionsDisplay.setDirections(response); - directionsDisplay.setPanel(document.getElementById("directionsPanel")); - showSteps(response, markerArray, stepDisplay, map); - } else { - window.alert('Directions request failed due to ' + status); + // First, remove any existing markers from the map. + for (var i = 0; i < markerArray.length; i++) { + markerArray[i].setMap(null); } - }); + + // Retrieve the start and end locations and create a DirectionsRequest using + // WALKING directions. + directionsService.route({ + origin: document.getElementById('start').value, + destination: document.getElementById('end').value, + travelMode: google.maps.TravelMode.BICYCLING, + provideRouteAlternatives: true + }, function(response, status) { + // Route the directions and pass the response to a function to create + // markers for each step. + if (status === google.maps.DirectionsStatus.OK) { + console.log(response.routes[0].warnings); + directionsDisplay.setDirections(response); + directionsDisplay.setPanel(document.getElementById("directionsPanel")); + showSteps(response, markerArray, stepDisplay, map); + } else { + window.alert('Directions request failed due to ' + status); + } + }); } var path = []; + function showSteps(directionResult, markerArray, stepDisplay, map) { - // For each step, place a marker, and add the text to the marker's infowindow. - // Also attach the marker to an array so we can keep track of it and remove it - // when calculating new routes. - var myRoute = directionResult.routes[0].legs[0]; - for (var j = 0; j < myRoute.steps.length; j ++ ){ - for (var f = 0; f < myRoute.steps[j].lat_lngs.length; f++) { - console.log("This is the latitude:" + myRoute.steps[j].lat_lngs[f].lat()); - console.log("This is the longitude:" + myRoute.steps[j].lat_lngs[f].lng()); - var latitude = myRoute.steps[j].lat_lngs[f].lat(); - var longitude = myRoute.steps[j].lat_lngs[f].lng() - latitude_longitudeObj = {lat: latitude, lng: longitude}; - -path.push(latitude_longitudeObj); -} -console.log(path); -} + // For each step, place a marker, and add the text to the marker's infowindow. + // Also attach the marker to an array so we can keep track of it and remove it + // when calculating new routes. + var myRoute = directionResult.routes[0].legs[0]; + console.log(myRoute.steps); + for (var j = 0; j < myRoute.steps.length; j++) { + for (var f = 0; f < myRoute.steps[j].lat_lngs.length; f++) { + console.log("This is the latitude:" + myRoute.steps[j].lat_lngs[f].lat()); + console.log("This is the longitude:" + myRoute.steps[j].lat_lngs[f].lng()); + var latitude = myRoute.steps[j].lat_lngs[f].lat(); + var longitude = myRoute.steps[j].lat_lngs[f].lng(); + latitude_longitudeObj = { + lat: latitude, + lng: longitude + }; + + path.push(latitude_longitudeObj); + } + console.log(path); + } + + +var arrayOfLegs = []; + +function createArrayOfLegs(path) { + for (var i = 0; i< path.length - 2; i++){ + var singleArray = [path[i], path[i+1]]; + arrayOfLegs.push(singleArray); + } -var elevator = new google.maps.ElevationService; - -// Draw the path, using the Visualization API and the Elevation service. -displayPathElevation(path, elevator, map); - -function displayPathElevation(path, elevator, map) { - // Display a polyline of the elevation path. - new google.maps.Polyline({ - path: path, - strokeColor: '#0000CC ', - opacity: 0.4, - map: map - }); - - // Create a PathElevationRequest object using this array. - // Ask for 256 samples along that path. - // Initiate the path request. - elevator.getElevationAlongPath({ - 'path': path, - 'samples': 256 - }, plotElevation); -} -// Takes an array of ElevationResult objects, draws the path on the map -// and plots the elevation profile on a Visualization API ColumnChart. -function plotElevation(elevations, status) { - var chartDiv = document.getElementById('elevation_chart'); - if (status !== google.maps.ElevationStatus.OK) { - // Show the error code inside the chartDiv. - chartDiv.innerHTML = 'Cannot show elevation: request failed because ' + - status; - return; - } -google.load('visualization', '1', {packages: ['columnchart']}); - // Extract the data from which to populate the chart. - // Because the samples are equidistant, the 'Sample' - // column here does double duty as distance along the - // X axis. - var data = new google.visualization.DataTable(); - data.addColumn('string', 'Sample'); - data.addColumn('number', 'Elevation'); - for (var i = 0; i < elevations.length; i++) { - data.addRow(['', elevations[i].elevation]); - } - // Create a new chart in the elevation_chart DIV. - var chart = new google.visualization.ColumnChart(chartDiv); - - // Draw the chart using the data within its DIV. - chart.draw(data, { - height: 150, - legend: 'none', - titleY: 'Elevation (m)' - }); } +createArrayOfLegs(path); +console.log("this is the array of legs"); +console.log(arrayOfLegs); + + //creating a new location map + var elevator = new google.maps.ElevationService(); + + // Draw the path, using the Visualization API and the Elevation service. + displayPathElevation(arrayOfLegs, elevator, map); + + + + function displayPathElevation(arrayOfLegs, elevator, map) { + + + for (var d =0; dis ' + + results[0].elevation + ' meters.'); + } else { + stepDisplay.setContent('No results found'); + } + } else { + stepDisplay.setContent('Elevation service failed due to: ' + status); + } + }); +} diff --git a/gmaps_testing/dijkstras_algorythm.js b/gmaps_testing/dijkstras_algorythm.js new file mode 100644 index 0000000..67f95ff --- /dev/null +++ b/gmaps_testing/dijkstras_algorythm.js @@ -0,0 +1,103 @@ +/** + * Basic priority queue implementation. If a better priority queue is wanted/needed, + * this code works with the implementation in google's closure library (https://code.google.com/p/closure-library/). + * Use goog.require('goog.structs.PriorityQueue'); and new goog.structs.PriorityQueue() + */ +function PriorityQueue () { + this._nodes = []; + + this.enqueue = function (priority, key) { + this._nodes.push({key: key, priority: priority }); + this.sort(); + } + this.dequeue = function () { + return this._nodes.shift().key; + } + this.sort = function () { + this._nodes.sort(function (a, b) { + return a.priority - b.priority; + }); + } + this.isEmpty = function () { + return !this._nodes.length; + } +} + +/** + * Pathfinding starts here + */ +function Graph(){ + var INFINITY = 1/0; + this.vertices = {}; + + this.addVertex = function(name, edges){ + this.vertices[name] = edges; + } + + this.shortestPath = function (start, finish) { + var nodes = new PriorityQueue(), + distances = {}, + previous = {}, + path = [], + smallest, vertex, neighbor, alt; + + for(vertex in this.vertices) { + if(vertex === start) { + distances[vertex] = 0; + nodes.enqueue(0, vertex); + } + else { + distances[vertex] = INFINITY; + nodes.enqueue(INFINITY, vertex); + } + + previous[vertex] = null; + } + + while(!nodes.isEmpty()) { + smallest = nodes.dequeue(); + + if(smallest === finish) { + path; + + while(previous[smallest]) { + path.push(smallest); + smallest = previous[smallest]; + } + + break; + } + + if(!smallest || distances[smallest] === INFINITY){ + continue; + } + + for(neighbor in this.vertices[smallest]) { + alt = distances[smallest] + this.vertices[smallest][neighbor]; + + if(alt < distances[neighbor]) { + distances[neighbor] = alt; + previous[neighbor] = smallest; + + nodes.enqueue(alt, neighbor); + } + } + } + + return path; + } +} + +var g = new Graph(); + +g.addVertex('A', {B: 7, C: 8}); +g.addVertex('B', {A: 7, F: 2}); +g.addVertex('C', {A: 8, F: 6, G: 4}); +g.addVertex('D', {F: 8}); +g.addVertex('E', {H: 1}); +g.addVertex('F', {B: 2, C: 6, D: 8, G: 9, H: 3}); +g.addVertex('G', {C: 4, F: 9}); +g.addVertex('H', {E: 1, F: 3}); + +// Log test, with the addition of reversing the path and prepending the first node so it's more readable +console.log(g.shortestPath('A', 'H').concat(['A']).reverse()); diff --git a/gmaps_testing/elevation_test.html b/gmaps_testing/elevation_test.html index 4ec63ff..2a6d276 100644 --- a/gmaps_testing/elevation_test.html +++ b/gmaps_testing/elevation_test.html @@ -89,6 +89,7 @@ data.addColumn('number', 'Elevation'); for (var i = 0; i < elevations.length; i++) { data.addRow(['', elevations[i].elevation]); + console.log(data); } // Draw the chart using the data within its DIV. @@ -100,7 +101,7 @@ } - diff --git a/gmaps_testing/elevation_test.js b/gmaps_testing/elevation_test.js new file mode 100644 index 0000000..19a4bd5 --- /dev/null +++ b/gmaps_testing/elevation_test.js @@ -0,0 +1,6 @@ +// first we need to calculate the inclination percentage for every node then we need to compare it to the inclination percentage of the other nodes. how d we prevent the road to go backwards instead towards our destination point? +// What if the inclination is negative? +// what is the overall path is flat but there is a very steep hill in the middle. +// how do we have it choose from three different paths +// step number one: find different elevation for a path and transform that into numbers +//get alternative routes from google and pass them into the diff --git a/gmaps_testing/gmaps_test.html b/gmaps_testing/gmaps_test.html index cf545bb..95da249 100644 --- a/gmaps_testing/gmaps_test.html +++ b/gmaps_testing/gmaps_test.html @@ -24,7 +24,7 @@ loadGoogle();