Last active
February 21, 2023 08:24
-
-
Save TravelTime-Frontend/1275b25030a72c4858ff837687e0c02a to your computer and use it in GitHub Desktop.
Full code for how to use TravelTime data and draw Polygons on Google maps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<style> | |
body { | |
background-color: gray; | |
} | |
html, | |
body, | |
#map { | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id='map'></div> | |
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_GOES_HERE&callback=initMap" async defer></script> | |
<script> | |
var map; | |
function initMap() { | |
var mapOpts = { | |
center: { lat: 51.5031653, lng: -0.1123051 }, | |
zoom: 13, | |
}; | |
map = new google.maps.Map(document.getElementById('map'), mapOpts); | |
var marker0 = new google.maps.Marker({ | |
position: { lat: 51.5031653, lng: -0.1123051 }, | |
map: map, | |
title: 'London Waterloo train station', | |
animation: google.maps.Animation.DROP | |
}); | |
if (!google.maps.Polygon.prototype.getBounds) { | |
google.maps.Polygon.prototype.getBounds = function () { | |
var bounds = new google.maps.LatLngBounds(); | |
var paths = this.getPaths(); | |
var path; | |
for (var i = 0; i < paths.getLength(); i++) { | |
path = paths.getAt(i); | |
for (var ii = 0; ii < path.getLength(); ii++) { | |
bounds.extend(path.getAt(ii)); | |
} | |
} | |
return bounds; | |
} | |
} | |
sendGeocodingRequest(startingLocation); | |
} | |
// The name of the starting location. We will have to geocode this to coordinates. | |
var startingLocation = "London"; | |
// The departure time in an ISO format. | |
var departureTime = new Date().toJSON(); | |
// Travel time in seconds. We want 15 minutes travel time so it is 15 minutes x 60 seconds. | |
var travelTime = 60 * 15; | |
// These secret variables are needed to authenticate the request. Get them from http://docs.traveltimeplatform.com/overview/getting-keys/ and replace | |
var APPLICATION_ID = "place your app id here"; | |
var API_KEY = "place your api key here"; | |
// Sends the geocoding request. | |
function sendGeocodingRequest(location) { | |
// The request for the geocoder. Reference: http://docs.traveltimeplatform.com/reference/geocoding-search/ | |
var request = { | |
query: location | |
}; | |
var xhr = new XMLHttpRequest(); | |
xhr.responseType = "json"; | |
xhr.open("GET", "https://api.traveltimeapp.com/v4/geocoding/search?query=" + location) | |
xhr.setRequestHeader("X-Application-Id", APPLICATION_ID); | |
xhr.setRequestHeader("X-Api-Key", API_KEY); | |
xhr.setRequestHeader("Accept-Language", " en-US"); | |
xhr.onreadystatechange = function () { | |
if (xhr.status >= 200 && xhr.status < 300) { | |
if (xhr.readyState === 4) { | |
sendTimeMapRequest(xhr.response) | |
} | |
} else { | |
console.error("Check your login") | |
} | |
}; | |
xhr.send(); | |
}; | |
// Sends the request of the Time Map multipolygon. | |
function sendTimeMapRequest(geocodingResponse) { | |
// The request for Time Map. Reference: http://docs.traveltimeplatform.com/reference/time-map/ | |
var coords = geocodingResponse.features[0].geometry.coordinates; | |
var latLng = { lat: coords[1], lng: coords[0] }; | |
var request = { | |
departure_searches: [{ | |
id: "first_location", | |
coords: latLng, | |
transportation: { | |
type: "public_transport" | |
}, | |
departure_time: departureTime, | |
travel_time: travelTime | |
}], | |
arrival_searches: [] | |
}; | |
var xhr = new XMLHttpRequest() | |
xhr.addEventListener("readystatechange", function () { | |
if (this.readyState === 4) { | |
drawTimeMap(this.response); | |
} | |
}); | |
xhr.open("POST", "https://api.traveltimeapp.com/v4/time-map") | |
xhr.setRequestHeader("X-Application-Id", APPLICATION_ID); | |
xhr.setRequestHeader("X-Api-Key", API_KEY); | |
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8"); | |
xhr.responseType = "json"; | |
xhr.send(JSON.stringify(request)); | |
// Draws the resulting multipolygon from the response on the map. | |
function drawTimeMap(response) { | |
// Reference for the response: http://docs.traveltimeplatform.com/reference/time-map/#response-body-json-attributes | |
var paths = response.results[0].shapes.map(function (polygon) { | |
var shell = polygon.shell | |
var holes = polygon.holes | |
return [shell].concat(holes); | |
}).map(x => x[0]); | |
var polygon = new google.maps.Polygon({ | |
paths, | |
strokeColor: "#F5A623", | |
strokeOpacity: 1, | |
strokeWeight: 5, | |
fillColor: "#46461F", | |
fillOpacity: 0.25 | |
}); | |
polygon.setMap(map); | |
map.fitBounds(polygon.getBounds()) | |
}; | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment