LouisaKB

## Geocoding autocomplete - 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; }

## Geocoding autocomplete - respond suggestion
// Creates a function that responds to the selected suggestion.
function moveMarker(map, marker) {
  return function (suggestion) {
    // The Geocoding API returns coordinates in a [<lng>, <lat>] format. We transform it into Leaflet's LatLng.
    var latLng = L.latLng(suggestion.data.reverse());
    // Change the coordintates for the marker.
    marker.setLatLng(latLng);
    // Pan to the map view the new coordinates.
    map.flyTo(latLng);
  }

## Geocoding autocomplete - map response location
// Transform the Geocoding result to what autocomplete expects.
function transformGeocodingResult(response) {
  // Reference for Geocoding response: http://docs.traveltimeplatform.com/reference/geocoding-search/#response-body-json-attributes
  // Reference for autocomplete expected result: https://www.devbridge.com/sourcery/components/jquery-autocomplete/
  return {
    suggestions: response.features.map( feature => { return { value: feature.properties.label, data: feature.geometry.coordinates }; } )
  }
}

## Geocoding autocomplete - add transformer function
function setupAutocomplete(map, marker) {
  // Full reference for DevBridge autocomplete: https://www.devbridge.com/sourcery/components/jquery-autocomplete/
  var options = {
    // The url for the Autocomplete service
    serviceUrl: "http://api.traveltimeapp.com/v4/geocoding/search",
    ajaxSettings: {
      // The authentication headers for our API
      headers: authHeaders,
      // We must specify that we accept JSON responses
      dataType: "json"

## Geocoding autocomplete - create templates
<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; }

## Reverse geocoding - draw markers
function drawMarker(response) {
  // Extracts the name from the response.
  var name = response.features[0].properties.name;
  var latLng = L.latLng(locationCoordinates.lat, locationCoordinates.lng);
  // 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: 17});
  // Adds the tile layer to the map.
  var map = L.map("map").addLayer(osmTileLayer);

## Reverse geocoding - send request
function sendGeocodingRequest(locationCoordinates) {
  // The request for the geocoder. Reference: http://docs.traveltimeplatform.com/reference/geocoding-search/
  var request = {
    lat: locationCoordinates.lat,
    lng: locationCoordinates.lng
  };

  $.ajax({
    // The URL for the reverse geocoding endpoint.
    url : "http://api.traveltimeapp.com/v4/geocoding/reverse",

## Reverse geocoding - add headers
var authHeaders = {
  "X-Application-Id": "<your app id>",
  "X-Api-Key": "<your app key>"
};

## Reverse geocoding - set coordinates
var locationCoordinates = {
  lat: 43.722952,
  lng: 10.396596999999929
};

## Geocoding - 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>
  </head>
  <body>
    <div id="map" style="height: 100%;"></div>
    <script>
	<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; }
	// Creates a function that responds to the selected suggestion.
	function moveMarker(map, marker) {
	return function (suggestion) {
	// The Geocoding API returns coordinates in a [<lng>, <lat>] format. We transform it into Leaflet's LatLng.
	var latLng = L.latLng(suggestion.data.reverse());
	// Change the coordintates for the marker.
	marker.setLatLng(latLng);
	// Pan to the map view the new coordinates.
	map.flyTo(latLng);
	}
	// Transform the Geocoding result to what autocomplete expects.
	function transformGeocodingResult(response) {
	// Reference for Geocoding response: http://docs.traveltimeplatform.com/reference/geocoding-search/#response-body-json-attributes
	// Reference for autocomplete expected result: https://www.devbridge.com/sourcery/components/jquery-autocomplete/
	return {
	suggestions: response.features.map( feature => { return { value: feature.properties.label, data: feature.geometry.coordinates }; } )
	}
	}
	function setupAutocomplete(map, marker) {
	// Full reference for DevBridge autocomplete: https://www.devbridge.com/sourcery/components/jquery-autocomplete/
	var options = {
	// The url for the Autocomplete service
	serviceUrl: "http://api.traveltimeapp.com/v4/geocoding/search",
	ajaxSettings: {
	// The authentication headers for our API
	headers: authHeaders,
	// We must specify that we accept JSON responses
	dataType: "json"
	function drawMarker(response) {
	// Extracts the name from the response.
	var name = response.features[0].properties.name;
	var latLng = L.latLng(locationCoordinates.lat, locationCoordinates.lng);
	// 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: 17});
	// Adds the tile layer to the map.
	var map = L.map("map").addLayer(osmTileLayer);
	function sendGeocodingRequest(locationCoordinates) {
	// The request for the geocoder. Reference: http://docs.traveltimeplatform.com/reference/geocoding-search/
	var request = {
	lat: locationCoordinates.lat,
	lng: locationCoordinates.lng
	};

	$.ajax({
	// The URL for the reverse geocoding endpoint.
	url : "http://api.traveltimeapp.com/v4/geocoding/reverse",
	var authHeaders = {
	"X-Application-Id": "<your app id>",
	"X-Api-Key": "<your app key>"
	};
	var locationCoordinates = {
	lat: 43.722952,
	lng: 10.396596999999929
	};