Last active
February 21, 2023 08:25
-
-
Save TravelTime-Frontend/d9a79b6a032372304f1e6854043d300c to your computer and use it in GitHub Desktop.
Full code for how to use TravelTime data and draw Polygons multiple 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 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