LouisaKB/test.html

## test.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 = "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;


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

		// 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 : "http://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(geocodingResponse) {
			// 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": coords,
					transportation: {
						type: "public_transport"
					},
					departure_time: departureTime,
					travel_time: travelTime
				} ],
				arrival_searches: []
			};

			$.ajax({
				url: "http://api.traveltimeapp.com/v4/time-map",
				type: "post",
				"headers": headers,
				data: JSON.stringify(request),
				contentType: "application/json; charset=UTF-8",
				success: drawTimeMap(setupMap([coords.lat, coords.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>
	</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 = "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;


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

	// 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 : "http://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(geocodingResponse) {
	// 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": coords,
	transportation: {
	type: "public_transport"
	},
	departure_time: departureTime,
	travel_time: travelTime
	} ],
	arrival_searches: []
	};

	$.ajax({
	url: "http://api.traveltimeapp.com/v4/time-map",
	type: "post",
	"headers": headers,
	data: JSON.stringify(request),
	contentType: "application/json; charset=UTF-8",
	success: drawTimeMap(setupMap([coords.lat, coords.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>
	</body>
	</html>