TravelTime-Frontend/Geocoding_with_autocomplete.js

## Geocoding_with_autocomplete.js
<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>
  <style>
    .autocomplete-suggestions {
      border: 1px solid #999;
      background: #FFF;
      overflow: auto;
    }

    .autocomplete-suggestion {
      padding: 2px 5px;
      white-space: nowrap;
      overflow: hidden;
    }

    .autocomplete-selected {
      background: #F0F0F0;
    }

    .autocomplete-suggestions strong {
      font-weight: normal;
      color: #3399FF;
    }

    .autocomplete-group {
      padding: 2px 5px;
    }

    .autocomplete-group strong {
      display: block;
      border-bottom: 1px solid #000;
    }
  </style>
</head>

<body>
  <input id="location-input" type="text" style="width: 80%; position: fixed; z-index:9999; left:10%;" />
  <div id="map" style="height: 100%;"></div>
  <script>
    // These headers are needed to authenticate the request
    var authHeaders = {
      "X-Application-Id": "<your app id>",
      "X-Api-Key": "<your app key>",
      "Accept-Language": "en-US"
    };

    function setupAutocomplete(map, marker) {
      var options = {
        // The url for the Autocomplete service
        serviceUrl: "https://api.traveltimeapp.com/v4/geocoding/search",
        ajaxSettings: {
          headers: authHeaders,
          dataType: "json"
        },
        lookupLimit: 5,
        onSelect: moveMarker(map, marker),
        minChars: 2,
        deferRequestBy: 100,
        transformResult: transformGeocodingResult,

      }
      $("#location-input").devbridgeAutocomplete(options);
    }

    // Transform the Geocoding result to what autocomplete expects.
    function transformGeocodingResult(response) {
      return {
        suggestions: response.features.map(feature => { return { value: feature.properties.label, data: feature.geometry.coordinates }; })
      }
    }

    // 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);
      map.setView(markerCoords, 11)
      var marker = L.marker(markerCoords)
      marker.addTo(map);
      return [map, marker];
    };

    // Creates a function that responds to the selected suggestion.
    function moveMarker(map, marker) {
      return function (suggestion) {
        var latLng = L.latLng(suggestion.data.reverse());
        marker.setLatLng(latLng);
        map.flyTo(latLng);
      }
    }

    var [map, marker] = setupMap([51.5, -0.15])
    setupAutocomplete(map, marker)

  </script>
</body>
<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;
    text-align: center;
  }
</style>

</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>
	<style>
	.autocomplete-suggestions {
	border: 1px solid #999;
	background: #FFF;
	overflow: auto;
	}

	.autocomplete-suggestion {
	padding: 2px 5px;
	white-space: nowrap;
	overflow: hidden;
	}

	.autocomplete-selected {
	background: #F0F0F0;
	}

	.autocomplete-suggestions strong {
	font-weight: normal;
	color: #3399FF;
	}

	.autocomplete-group {
	padding: 2px 5px;
	}

	.autocomplete-group strong {
	display: block;
	border-bottom: 1px solid #000;
	}
	</style>
	</head>

	<body>
	<input id="location-input" type="text" style="width: 80%; position: fixed; z-index:9999; left:10%;" />
	<div id="map" style="height: 100%;"></div>
	<script>
	// These headers are needed to authenticate the request
	var authHeaders = {
	"X-Application-Id": "<your app id>",
	"X-Api-Key": "<your app key>",
	"Accept-Language": "en-US"
	};

	function setupAutocomplete(map, marker) {
	var options = {
	// The url for the Autocomplete service
	serviceUrl: "https://api.traveltimeapp.com/v4/geocoding/search",
	ajaxSettings: {
	headers: authHeaders,
	dataType: "json"
	},
	lookupLimit: 5,
	onSelect: moveMarker(map, marker),
	minChars: 2,
	deferRequestBy: 100,
	transformResult: transformGeocodingResult,

	}
	$("#location-input").devbridgeAutocomplete(options);
	}

	// Transform the Geocoding result to what autocomplete expects.
	function transformGeocodingResult(response) {
	return {
	suggestions: response.features.map(feature => { return { value: feature.properties.label, data: feature.geometry.coordinates }; })
	}
	}

	// 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);
	map.setView(markerCoords, 11)
	var marker = L.marker(markerCoords)
	marker.addTo(map);
	return [map, marker];
	};

	// Creates a function that responds to the selected suggestion.
	function moveMarker(map, marker) {
	return function (suggestion) {
	var latLng = L.latLng(suggestion.data.reverse());
	marker.setLatLng(latLng);
	map.flyTo(latLng);
	}
	}

	var [map, marker] = setupMap([51.5, -0.15])
	setupAutocomplete(map, marker)

	</script>
	</body>
	<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;
	text-align: center;
	}
	</style>

	</html>