TravelTime-Frontend

## TravelTime_TimeMap_Intersection_On_Google_maps.html
<html>

<head>
  <style>
    body {
      background-color: gray;
    }

    html,
    body,

## Point in polygon Python.py
import asyncio
import csv
import json
from datetime import datetime
from pathlib import Path
from traveltimepy import TravelTimeSdk, Location, Coordinates, Property, Driving


async def main():
    sdk = TravelTimeSdk("YOUR_APP_ID", "YOUR_APP_KEY")

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

## TravelTime_store_locator_full_code.html
<html>

<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>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"

## Response body using TimeMap.json
{
  "results": [
    {
      "search_id": "public transport from Trafalgar Square",
      "shapes": [
        {
          "shell": [
            {
              "lat": 51.516246,
              "lng": -0.14439687999999948

## geocoding.js
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", APPLICATION_ID);

## geocoding-timemap-full-code.html
<html>

<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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.4.8/jquery.autocomplete.min.js"></script>

## store_locator_18
properties: [
  "distance",
  "travel_time"
]

## Draw the multipolygon.js
// 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.

## Map setup.js
//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);
	import asyncio
	import csv
	import json
	from datetime import datetime
	from pathlib import Path
	from traveltimepy import TravelTimeSdk, Location, Coordinates, Property, Driving


	async def main():
	sdk = TravelTimeSdk("YOUR_APP_ID", "YOUR_APP_KEY")
	{
	"country": "uk",
	"departureLocation": {
	"lat": 51.5119637,
	"lng": -0.1279543
	},
	"destinationCoordinates": [
	{
	"lat": 51.51169250837311,
	"lng": -0.1180740098588654
	<html>

	<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>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
	{
	"results": [
	{
	"search_id": "public transport from Trafalgar Square",
	"shapes": [
	{
	"shell": [
	{
	"lat": 51.516246,
	"lng": -0.14439687999999948
	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", APPLICATION_ID);
	// 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.
	//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);