TravelTime-Frontend/Full_isochrone_request.html

## Full_isochrone_request.html
<html>

<head>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.3.0/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet/v1.3.0/leaflet.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>

<body>
  <div id="map" style="height: 100%;"></div>
  <script>

    // 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 = "2020-06-10T09: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;


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

    // Sends the geocoding request.
    function sendGeocodingRequest(location) {
      // The request for the geocoder. Reference: http://docs.traveltimeplatform.com/reference/geocoding-search/
      var request = {
        query: location
      };
      $.ajax({
        url: "https://api.traveltimeapp.com/v4/geocoding/search",
        type: "get",
        "headers": headers,
        data: request,
        contentType: "application/json; charset=UTF-8",
        success: sendTimeMapRequest
      })
    };


    // Sends the request of the Time Map multipolygon.
    function sendTimeMapRequest(data) {
      // The request for Time Map. Reference: http://docs.traveltimeplatform.com/reference/time-map/
      var coords = data.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: []
      };
      $.ajax({
        url: "https://api.traveltimeapp.com/v4/time-map",
        type: "post",
        "headers": headers,
        data: JSON.stringify(request),
        contentType: "application/json; charset=UTF-8",
        success: drawTimeMap(setupMap([latLng.lat, latLng.lng]))

      });
    };

    // A helper function that converts [{lat: <lat>, lng: <lng>}, ...] to a [[<lat>, <lng>], ...] format.
    function ringCoordsHashToArray(ring) {
      return ring.map((latLng) => { return [latLng.lat, latLng.lng]; });
    };

    //Map set up
    function setupMap(markerCoords) {
      var osmUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
      var osmTileLayer = L.tileLayer(osmUrl, { minZoom: 8, maxZoom: 15 });
      var map = L.map("map").addLayer(osmTileLayer);
      L.marker(markerCoords).addTo(map);
      return map;
    };

    // Draws the resulting multipolygon from the response on the map.
    function drawTimeMap(map) {
      // We are returning a function so that it can be easily used in the success parameter of the ajax method.
      return (response) => {
        // Reference for the response: http://docs.traveltimeplatform.com/reference/time-map/#response-body-json-attributes
        var shapesCoords = response.results[0].shapes.map((polygon) => {
          var shell = ringCoordsHashToArray(polygon.shell);
          var holes = polygon.holes.map(ringCoordsHashToArray);
          return [shell].concat(holes);
        })
        var polygon = L.polygon(shapesCoords, { color: 'red' });
        polygon.addTo(map);
        map.fitBounds(polygon.getBounds());
      };
    };

    // Begins the creation of the Time Map shape.
    sendGeocodingRequest(startingLocation);
  </script>
  <style>
    html,
    body,
    #mapid {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }

    #error {
      position: absolute;
      width: 80%;
      margin: 0px;
      z-index: 2000;
      width: 270px;
      border-radius: 5px;
      max-width: 500px;
      font-family: sans-serif;
      font-size: 12px;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 10px;
      display: none;
      text-align: center;
    }
  </style>

</body>

</html>
	<html>

	<head>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.3.0/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet/v1.3.0/leaflet.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
	</head>

	<body>
	<div id="map" style="height: 100%;"></div>
	<script>

	// 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 = "2020-06-10T09: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;


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

	// Sends the geocoding request.
	function sendGeocodingRequest(location) {
	// The request for the geocoder. Reference: http://docs.traveltimeplatform.com/reference/geocoding-search/
	var request = {
	query: location
	};
	$.ajax({
	url: "https://api.traveltimeapp.com/v4/geocoding/search",
	type: "get",
	"headers": headers,
	data: request,
	contentType: "application/json; charset=UTF-8",
	success: sendTimeMapRequest
	})
	};


	// Sends the request of the Time Map multipolygon.
	function sendTimeMapRequest(data) {
	// The request for Time Map. Reference: http://docs.traveltimeplatform.com/reference/time-map/
	var coords = data.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: []
	};
	$.ajax({
	url: "https://api.traveltimeapp.com/v4/time-map",
	type: "post",
	"headers": headers,
	data: JSON.stringify(request),
	contentType: "application/json; charset=UTF-8",
	success: drawTimeMap(setupMap([latLng.lat, latLng.lng]))

	});
	};

	// A helper function that converts [{lat: <lat>, lng: <lng>}, ...] to a [[<lat>, <lng>], ...] format.
	function ringCoordsHashToArray(ring) {
	return ring.map((latLng) => { return [latLng.lat, latLng.lng]; });
	};

	//Map set up
	function setupMap(markerCoords) {
	var osmUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
	var osmTileLayer = L.tileLayer(osmUrl, { minZoom: 8, maxZoom: 15 });
	var map = L.map("map").addLayer(osmTileLayer);
	L.marker(markerCoords).addTo(map);
	return map;
	};

	// Draws the resulting multipolygon from the response on the map.
	function drawTimeMap(map) {
	// We are returning a function so that it can be easily used in the success parameter of the ajax method.
	return (response) => {
	// Reference for the response: http://docs.traveltimeplatform.com/reference/time-map/#response-body-json-attributes
	var shapesCoords = response.results[0].shapes.map((polygon) => {
	var shell = ringCoordsHashToArray(polygon.shell);
	var holes = polygon.holes.map(ringCoordsHashToArray);
	return [shell].concat(holes);
	})
	var polygon = L.polygon(shapesCoords, { color: 'red' });
	polygon.addTo(map);
	map.fitBounds(polygon.getBounds());
	};
	};

	// Begins the creation of the Time Map shape.
	sendGeocodingRequest(startingLocation);
	</script>
	<style>
	html,
	body,
	#mapid {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	}

	#error {
	position: absolute;
	width: 80%;
	margin: 0px;
	z-index: 2000;
	width: 270px;
	border-radius: 5px;
	max-width: 500px;
	font-family: sans-serif;
	font-size: 12px;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	padding: 10px;
	display: none;
	text-align: center;
	}
	</style>

	</body>

	</html>