TravelTime-Frontend/Create_Isochrones.html

## Create_Isochrones.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Drawing isochrones</title>
</head>

<body>
  <!DOCTYPE html>
  <html>
  <meta name="description" content="Class 10 Show+Tell: GeoJson" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />

  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
    <style>
      html,
      body,
      #mapid {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
      }

      #error {
        position: absolute;
        width: 80%;
        margin: 0px;
        z-index: 2000;
        width: 80%;
        border-radius: 20px;
        max-width: 500px;
        top: 30%;
        /* position the top  edge of the element at the middle of the parent */
        left: 50%;
        /* position the left edge of the element at the middle of the parent */
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 10px;
        display: none;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div id="mapid"></div>
  </body>

  </html>
  <div id="error" class="tippy-tooltip honeybee-theme">
    <p><b>No APP and APP_ID keys inserted </b></p>
    <p>
      <a href="http://docs.traveltimeplatform.com/overview/getting-keys/">Sign up for an APP key</a>
    </p>
    <p>Place it in YOUR_APP_ID and YOUR_APP_KEY variables</p>
  </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 = new Date().toJSON();
    // Travel time in seconds. We want 1 hour travel time so it is 60 minutes x 60 seconds.
    var travelTime = 60 * 60;
    // These secret variables are needed to authenticate the request. Get them from http://docs.traveltimeplatform.com/overview/getting-keys/ and replace
    var YOUR_APP_ID = "YOUR_APP_ID";
    var YOUR_APP_KEY = "YOUR_APP_KEY";

    var mymap = L.map("mapid").setView([38.8, -77.0365], 9);

    sendGeocodingRequest(startingLocation);

    L.tileLayer(
      `https://tiles.traveltime.com/lux/{z}/{x}/{y}.png?key=${YOUR_APP_ID}`,
      {
        maxZoom: 18,
        attribution:
          'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
          '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
          'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: "mapbox.streets",
      }
    ).addTo(mymap);

    // Sends the geocoding request.
    function sendGeocodingRequest(location) {
      // The request for the geocoder. Reference: http://docs.traveltimeplatform.com/reference/geocoding-search/
      var request = {
        query: location,
      };
      document.getElementById("error").style.display = "none";
      var xhr = new XMLHttpRequest();
      xhr.responseType = "json";
      xhr.open(
        "GET",
        "https://api.traveltimeapp.com/v4/geocoding/search?query=" + location
      );
      xhr.setRequestHeader("X-Application-Id", YOUR_APP_ID);
      xhr.setRequestHeader("X-Api-Key", YOUR_APP_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 {
          if (
            YOUR_APP_ID === "place your app id here" ||
            YOUR_APP_KEY === "place your api key here"
          ) {
            document.getElementById("error").style.display = "block";
          }
        }
      };
      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(mymap, this.response);
        }
      });
      xhr.open("POST", "https://api.traveltimeapp.com/v4/time-map");
      xhr.setRequestHeader("X-Application-Id", YOUR_APP_ID);
      xhr.setRequestHeader("X-Api-Key", YOUR_APP_KEY);
      xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
      xhr.responseType = "json";
      xhr.send(JSON.stringify(request));

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

      // Draws the resulting multipolygon from the response on the map.
      function drawTimeMap(map, response) {
        // Reference for the response: http://docs.traveltimeplatform.com/reference/time-map/#response-body-json-attributes
        var shapesCoords = response.results[0].shapes.map(function (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());
      }
    }
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<title>Drawing isochrones</title>
	</head>

	<body>
	<!DOCTYPE html>
	<html>
	<meta name="description" content="Class 10 Show+Tell: GeoJson" />
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />

	<head>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
	integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
	<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
	integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
	<style>
	html,
	body,
	#mapid {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	}

	#error {
	position: absolute;
	width: 80%;
	margin: 0px;
	z-index: 2000;
	width: 80%;
	border-radius: 20px;
	max-width: 500px;
	top: 30%;
	/* position the top edge of the element at the middle of the parent */
	left: 50%;
	/* position the left edge of the element at the middle of the parent */
	transform: translate(-50%, -50%);
	background-color: white;
	padding: 10px;
	display: none;
	text-align: center;
	}
	</style>
	</head>

	<body>
	<div id="mapid"></div>
	</body>

	</html>
	<div id="error" class="tippy-tooltip honeybee-theme">
	<p><b>No APP and APP_ID keys inserted </b></p>
	<p>
	<a href="http://docs.traveltimeplatform.com/overview/getting-keys/">Sign up for an APP key</a>
	</p>
	<p>Place it in YOUR_APP_ID and YOUR_APP_KEY variables</p>
	</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 = new Date().toJSON();
	// Travel time in seconds. We want 1 hour travel time so it is 60 minutes x 60 seconds.
	var travelTime = 60 * 60;
	// These secret variables are needed to authenticate the request. Get them from http://docs.traveltimeplatform.com/overview/getting-keys/ and replace
	var YOUR_APP_ID = "YOUR_APP_ID";
	var YOUR_APP_KEY = "YOUR_APP_KEY";

	var mymap = L.map("mapid").setView([38.8, -77.0365], 9);

	sendGeocodingRequest(startingLocation);

	L.tileLayer(
	`https://tiles.traveltime.com/lux/{z}/{x}/{y}.png?key=${YOUR_APP_ID}`,
	{
	maxZoom: 18,
	attribution:
	'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
	'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
	'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
	id: "mapbox.streets",
	}
	).addTo(mymap);

	// Sends the geocoding request.
	function sendGeocodingRequest(location) {
	// The request for the geocoder. Reference: http://docs.traveltimeplatform.com/reference/geocoding-search/
	var request = {
	query: location,
	};
	document.getElementById("error").style.display = "none";
	var xhr = new XMLHttpRequest();
	xhr.responseType = "json";
	xhr.open(
	"GET",
	"https://api.traveltimeapp.com/v4/geocoding/search?query=" + location
	);
	xhr.setRequestHeader("X-Application-Id", YOUR_APP_ID);
	xhr.setRequestHeader("X-Api-Key", YOUR_APP_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 {
	if (
	YOUR_APP_ID === "place your app id here" \|\|
	YOUR_APP_KEY === "place your api key here"
	) {
	document.getElementById("error").style.display = "block";
	}
	}
	};
	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(mymap, this.response);
	}
	});
	xhr.open("POST", "https://api.traveltimeapp.com/v4/time-map");
	xhr.setRequestHeader("X-Application-Id", YOUR_APP_ID);
	xhr.setRequestHeader("X-Api-Key", YOUR_APP_KEY);
	xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
	xhr.responseType = "json";
	xhr.send(JSON.stringify(request));

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

	// Draws the resulting multipolygon from the response on the map.
	function drawTimeMap(map, response) {
	// Reference for the response: http://docs.traveltimeplatform.com/reference/time-map/#response-body-json-attributes
	var shapesCoords = response.results[0].shapes.map(function (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());
	}
	}
	</script>
	</body>

	</html>