LouisaKB/Geocoding TimeMap - full code

## Geocoding TimeMap - full code
<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>
  <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>
    /*
     All of the code will go here
    */

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

    function setupAutocomplete(map, marker) {
      var options = {
        serviceUrl: "http://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);
    }

    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];
    };

    function moveMarker(map, marker) {
      return function (suggestion) {
        var latLng = L.latLng(suggestion.data.reverse());
        marker.setLatLng(latLng);
        map.flyTo(latLng);
        sendTimeMapRequest(suggestion.data, map)
      }
    }

    // Sends the request of the Time Map multipolygon.
    function sendTimeMapRequest(coordinates, map) {

      var latLng = { lat: coordinates[0], lng: coordinates[1] };
      var departureTime = new Date().toISOString();
      var travelTime = 30*60;

      var request = {
        departure_searches: [ {
          id: "first_location",
          "coords": latLng,
          transportation: {
            type: "driving"
          },
          departure_time: departureTime,
          travel_time: travelTime
        } ],
        arrival_searches: []
      };

      $.ajax({
        url: "http://api.traveltimeapp.com/v4/time-map",
        type: "post",
        headers: authHeaders,
        data: JSON.stringify(request),
        contentType: "application/json; charset=UTF-8",
        success: drawTimeMap(map)
      });
    };

    // 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]; } );
    };

    // Draws the resulting multipolygon from the response on the map.
    function drawTimeMap(map) {
      return (response) => {
        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());
      };
    };

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

    </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>
	<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>
	/*
	All of the code will go here
	*/

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

	function setupAutocomplete(map, marker) {
	var options = {
	serviceUrl: "http://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);
	}

	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];
	};

	function moveMarker(map, marker) {
	return function (suggestion) {
	var latLng = L.latLng(suggestion.data.reverse());
	marker.setLatLng(latLng);
	map.flyTo(latLng);
	sendTimeMapRequest(suggestion.data, map)
	}
	}

	// Sends the request of the Time Map multipolygon.
	function sendTimeMapRequest(coordinates, map) {

	var latLng = { lat: coordinates[0], lng: coordinates[1] };
	var departureTime = new Date().toISOString();
	var travelTime = 30*60;

	var request = {
	departure_searches: [ {
	id: "first_location",
	"coords": latLng,
	transportation: {
	type: "driving"
	},
	departure_time: departureTime,
	travel_time: travelTime
	} ],
	arrival_searches: []
	};

	$.ajax({
	url: "http://api.traveltimeapp.com/v4/time-map",
	type: "post",
	headers: authHeaders,
	data: JSON.stringify(request),
	contentType: "application/json; charset=UTF-8",
	success: drawTimeMap(map)
	});
	};

	// 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]; } );
	};

	// Draws the resulting multipolygon from the response on the map.
	function drawTimeMap(map) {
	return (response) => {
	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());
	};
	};

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

	</script>
	</body>
	</html>