TravelTime-Frontend/index.html

## index.html
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
    integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
    crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
    integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
    crossorigin=""></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <style>
    #location-list {
      height: 100%;
      width: 35%;
      float: left;
      font-family: arial;
    }

    #location-list h2 {
      position: relative;
      color: #fff;
      background: #FF8989;
      padding: 10px 20px;
      font-size: 20px;
      font-weight: 700;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      margin: 0;
    }

    #location-list ul {
      background: #FF7E7E;
      margin-top: 0;
      margin-bottom: 0;
    }

    #location-list ul li {
      left: 0;
      list-style: none;
      background: #FF7E7E;
      color: #FFE1E1;
      transition: 0.5s;
      cursor: pointer;
      padding: 5px;
    }

    #location-list li:hover {
      color: #fff;
    }
  </style>
</head>

<body>
  <!-- This is the element where the store list with times will be displayed. -->
  <div id="location-list" style="height: 100%; width: 35%; float: left;font-family: arial">
    <h2>Store Locations</h2>
  </div>
  <!-- Element for the Leaflet map. -->
  <div id="map" style="height: 100%; width: 65%; float: right;"></div>
  <script>

    var mymap = L.map('map').setView([51.505, -0.09], 13);

    //Leaflet does not provide an easy way to change icon color. This code block creates a green icon.
    var greenIcon = new L.Icon({
      iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
      shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
      iconSize: [25, 41],
      iconAnchor: [12, 41],
      popupAnchor: [1, -34],
      shadowSize: [41, 41]
    });


    var locations =
      [
        {
          "id": "My Location",
          "coords": { "lat": 51.5, "lng": -0.14 }
        },
        {
          "id": "Store 1",
          "coords": { "lat": 51.5, "lng": -0.09 }
        },
        {
          "id": "Store 2",
          "coords": { "lat": 51.52, "lng": -0.13 }
        },
        {
          "id": "Store 3",
          "coords": { "lat": 51.52, "lng": -0.12 }
        },
        {
          "id": "Store 4",
          "coords": { "lat": 51.51, "lng": -0.08 }
        },
        {
          "id": "Store 5",
          "coords": { "lat": 51.5, "lng": -0.10 }
        },
        {
          "id": "Store 6",
          "coords": { "lat": 51.5, "lng": -0.12 }
        }
      ]

    var createLocationList = function (locations) {
      const listContainer = document.getElementById('location-list');
      // Make the list
      const listElement = document.createElement('ul');

      // Add the list to the container
      listContainer.appendChild(listElement);

      // Set up a loop that goes through the items in channelData one at a time
      for (let location of locations) {
        // create a list item for each channel
        const listItem = document.createElement('li');
        var properties = Object.values(location.properties);
        var travelTime = properties[0].travel_time;
        var travelTimeInt = parseInt(travelTime);

        //Add the location id Eg. Store 1 to the list
        listItem.innerHTML = location.id + ' - ETA: ' + Math.round(travelTimeInt / 60) + ' mins';

        // Add the list item to listElement
        listElement.appendChild(listItem);
      }
    }

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);

    // 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 = 30 * 60;

    // 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 application id here";

    var API_KEY = "place your api key here";

    var latLng = { lat: 51.5, lng: -0.14 };

    var timeFilterRequest = {
      locations: locations,
      departure_searches: [{
        id: "location_in_range",
        departure_location_id: "My Location",
        arrival_location_ids:
          [
            "Store 1",
            "Store 2",
            "Store 3",
            "Store 4",
            "Store 5",
            "Store 6"
          ],
        transportation: { type: "public_transport" },
        departure_time: departureTime,
        travel_time: travelTime,
        properties: ["distance", "travel_time"]
      }]
    };

    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        console.log(xhr.status);
        console.log(xhr.response)

        var responseObject = xhr.response.results[0];
        var locationsInRange = responseObject.locations;

        for (let location of locationsInRange) {
          var item = locations.find(item => item.id === location.id);
          var coords = Object.values(item.coords);
          var marker = L.marker(coords, { icon: greenIcon }).addTo(mymap);
        }

        createLocationList(locationsInRange);

      }
    };

    xhr.open("POST", "https://api.traveltimeapp.com/v4/time-filter")
    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";
    req = JSON.stringify(timeFilterRequest);
    console.log('req: ' + req);
    xhr.send(JSON.stringify(timeFilterRequest));

  </script>
</body>

</html>
	<head>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
	integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
	crossorigin="" />
	<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
	integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
	crossorigin=""></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
	<style>
	#location-list {
	height: 100%;
	width: 35%;
	float: left;
	font-family: arial;
	}

	#location-list h2 {
	position: relative;
	color: #fff;
	background: #FF8989;
	padding: 10px 20px;
	font-size: 20px;
	font-weight: 700;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin: 0;
	}

	#location-list ul {
	background: #FF7E7E;
	margin-top: 0;
	margin-bottom: 0;
	}

	#location-list ul li {
	left: 0;
	list-style: none;
	background: #FF7E7E;
	color: #FFE1E1;
	transition: 0.5s;
	cursor: pointer;
	padding: 5px;
	}

	#location-list li:hover {
	color: #fff;
	}
	</style>
	</head>

	<body>
	<!-- This is the element where the store list with times will be displayed. -->
	<div id="location-list" style="height: 100%; width: 35%; float: left;font-family: arial">
	<h2>Store Locations</h2>
	</div>
	<!-- Element for the Leaflet map. -->
	<div id="map" style="height: 100%; width: 65%; float: right;"></div>
	<script>

	var mymap = L.map('map').setView([51.505, -0.09], 13);

	//Leaflet does not provide an easy way to change icon color. This code block creates a green icon.
	var greenIcon = new L.Icon({
	iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
	shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
	iconSize: [25, 41],
	iconAnchor: [12, 41],
	popupAnchor: [1, -34],
	shadowSize: [41, 41]
	});


	var locations =
	[
	{
	"id": "My Location",
	"coords": { "lat": 51.5, "lng": -0.14 }
	},
	{
	"id": "Store 1",
	"coords": { "lat": 51.5, "lng": -0.09 }
	},
	{
	"id": "Store 2",
	"coords": { "lat": 51.52, "lng": -0.13 }
	},
	{
	"id": "Store 3",
	"coords": { "lat": 51.52, "lng": -0.12 }
	},
	{
	"id": "Store 4",
	"coords": { "lat": 51.51, "lng": -0.08 }
	},
	{
	"id": "Store 5",
	"coords": { "lat": 51.5, "lng": -0.10 }
	},
	{
	"id": "Store 6",
	"coords": { "lat": 51.5, "lng": -0.12 }
	}
	]

	var createLocationList = function (locations) {
	const listContainer = document.getElementById('location-list');
	// Make the list
	const listElement = document.createElement('ul');

	// Add the list to the container
	listContainer.appendChild(listElement);

	// Set up a loop that goes through the items in channelData one at a time
	for (let location of locations) {
	// create a list item for each channel
	const listItem = document.createElement('li');
	var properties = Object.values(location.properties);
	var travelTime = properties[0].travel_time;
	var travelTimeInt = parseInt(travelTime);

	//Add the location id Eg. Store 1 to the list
	listItem.innerHTML = location.id + ' - ETA: ' + Math.round(travelTimeInt / 60) + ' mins';

	// Add the list item to listElement
	listElement.appendChild(listItem);
	}
	}

	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(mymap);

	// 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 = 30 * 60;

	// 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 application id here";

	var API_KEY = "place your api key here";

	var latLng = { lat: 51.5, lng: -0.14 };

	var timeFilterRequest = {
	locations: locations,
	departure_searches: [{
	id: "location_in_range",
	departure_location_id: "My Location",
	arrival_location_ids:
	[
	"Store 1",
	"Store 2",
	"Store 3",
	"Store 4",
	"Store 5",
	"Store 6"
	],
	transportation: { type: "public_transport" },
	departure_time: departureTime,
	travel_time: travelTime,
	properties: ["distance", "travel_time"]
	}]
	};

	var xhr = new XMLHttpRequest()
	xhr.onreadystatechange = function () {
	if (xhr.readyState === 4) {
	console.log(xhr.status);
	console.log(xhr.response)

	var responseObject = xhr.response.results[0];
	var locationsInRange = responseObject.locations;

	for (let location of locationsInRange) {
	var item = locations.find(item => item.id === location.id);
	var coords = Object.values(item.coords);
	var marker = L.marker(coords, { icon: greenIcon }).addTo(mymap);
	}

	createLocationList(locationsInRange);

	}
	};

	xhr.open("POST", "https://api.traveltimeapp.com/v4/time-filter")
	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";
	req = JSON.stringify(timeFilterRequest);
	console.log('req: ' + req);
	xhr.send(JSON.stringify(timeFilterRequest));

	</script>
	</body>

	</html>