Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Full code for how to use TravelTime data and draw Polygons multiple polygons on Google maps
<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 Waterloo Train Station";
// The departure time in an ISO format.
var departureTime = new Date().toJSON();
// Travel time in seconds. We want 10 minutes travel time so it is 10 minutes x 60 seconds.
var travelTime = 60 * 10;
// 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 ID HERE";
var API_KEY = "PLACE YOUR API KEY HERE";
// Colors of heatmap shapes
var colors = ['#0000ff', '#ff0000', '#008000', '#F5A623']
// 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){
// Let's genarate 4 shapes - 10, 20, 30, 40 minutes travel time with different colors
for(var i = 1; i<5; i++) {
sendTimeMapRequest(xhr.response, travelTime*i, colors[i-1])
}
}
} else {
console.error("Check your login")
}
};
xhr.send();
};
// Sends the request of the Time Map multipolygon.
function sendTimeMapRequest(geocodingResponse, time, color) {
// 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: time
}],
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";
console.log(request)
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: color,
strokeOpacity: 1,
strokeWeight: 2,
fillColor: color,
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
You can’t perform that action at this time.