TravelTime-Frontend

{
  "country": "uk",
  "departureLocation": {
    "lat": 51.5119637,
    "lng": -0.1279543
  },
  "destinationCoordinates": [
    {
      "lat": 51.51169250837311,
      "lng": -0.1180740098588654

TravelTime-Frontend

{
  "results": [
    {
      "search_id": "public transport from Trafalgar Square",
      "shapes": [
        {
          "shell": [
            {
              "lat": 51.516246,
              "lng": -0.14439687999999948

TravelTime-Frontend

// Draws the resulting multipolygon from the response on the map.

// We take the first result from our response since we requested only one shape. 
// Reference for the response: http://docs.traveltimeplatform.com/reference/time-map/#response-body-json-attributes
var shapesCoords = response.results[0].shapes.map((polygon) => {
  // The polygon is made of a shell and holes enclosed in a hash.
  // The polygon ring is in a format of [{lat: <lat>, lng:<lng>}, ...] so we use the helper function to convert it to a format used by Leaflet's polygon factory.
  var shell = ringCoordsHashToArray(polygon.shell);
  var holes = polygon.holes.map(ringCoordsHashToArray);
  // Leaflet's polygon factory accepts an array of of rings and then interprets the first ring as the shell and the rest of the rings as holes.

TravelTime-Frontend

//Map set up
// The url template for OpenStreetMap tiles.
var osmUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
// Creates the tile layer
var osmTileLayer = L.tileLayer(osmUrl, { minZoom: 8, maxZoom: 15 });
// Adds the tile layer to the map.
var map = L.map("map").addLayer(osmTileLayer);
// Creates a marker for our departure location and adds it to the map.
L.marker(markerCoords).addTo(map);

TravelTime-Frontend

// The request for Time Map. Reference: http://docs.traveltimeplatform.com/reference/time-map/

var request = {
  // This will be a search where we depart a specified time.
  departure_searches: [{
    // The id is useful when you send multiple searches in one request. Since we create only one search it doesn't matter much since we expect only one result.
    id: "first_location",
    // The coordinates for the departure location in a hash. { lat: <lat>, lng: <lng> }
    "coords": coords,
    // The transportation type for this search. We will be using public transport. 

TravelTime-Frontend

// The request for the geocoder. Reference: http://docs.traveltimeplatform.com/reference/geocoding-search/
var request = {
  query: location
};

$.ajax({
  // The URL for the geocoding endpoint.
  url: "http://api.traveltimeapp.com/v4/geocoding/search",
  // We need to send a GET request to it.
  type: "get",

TravelTime-Frontend

// These headers are needed to authenticate the request
var headers = {
  "X-Application-Id": "<your app id>",
  "X-Api-Key": "<your app key>"
};

TravelTime-Frontend

// The name of the starting location. We will have to geocode this to coordinates.
var startingLocation = "The White House, DC";
// The departure time in an ISO format.
var departureTime = "2018-07-04T09:00:00-0500";
// Travel time in seconds. We want 1 hour travel time so it is 60 minutes x 60 seconds.
var travelTime = 60 * 60;

TravelTime-Frontend

{
  "results": [
    {
      "search_id": "first_location",
      "shapes": [
        {
          "shell": [
            {
              "lat": 38.899725860000004,
              "lng": -77.05092382

TravelTime-Frontend

POST /v4/time-map HTTP/1.1
Host: api.traveltimeapp.com
Content-Type: application/json
Accept: application/json
X-Application-Id: ...
X-Api-Key: ...

{
  "departure_searches": [
    {