Address Standardization

by sainap

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<html>
  <head>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
  </head>
    <body>
      <div class="flex-container">
        <h2>Address Standardization</h2>
        <div class="AddressSearch">
          <input type="AddressSearch" id="query" placeholder="Enter an address">
          <button id="AddressSearchButton">standardize</button>
        </div>

      </div>
    </body>
</html>

CSS

* {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  
}

h2 {
  color: #748194;
  text-align: center;
  font-size: 1.5em;
}

body {
  background: linear-gradient(230deg, #a24bcf, #4b79cf, #4bc5cf);
  height: 100vh;
  width: 100vh;
}

.flex-container {
  background-color: white;
  border-radius:5px 5px 5px 5px;
  position: absolute;
  width: 80%;
  height: 60%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.AddressSearch {
  align-self: center;
  width: 70%
}

ul {
  list-style-type: none;
  padding-left: 0;
}

input {
  width: 50%;
}

JavaScript

const MAXRESULTS = 1;
let center;

function init() {
  const search = document.getElementById('AddressSearchButton');
  search.addEventListener('click', AddressLookUp);
}

function validateAddress(address) {
  const platform = new H.service.Platform({
    apikey: "0jhvJzLcnnAz9MoO4PdII2wXZpzYb2rbn1F99aq3MOE",
  });
  const service = platform.getSearchService();
  if (center == undefined) {
    return service.geocode({
      q: address,
      limit: MAXRESULTS,
    });
  } else {
    return service.geocode({
      q: address,
      at: center,
      limit: MAXRESULTS,
    });
  }
}

function createDefaultElement(items, id, className, parent) {
  let row;
  items.forEach((item) => {
    row = document.createElement('li');
    row.innerHTML = (item.title.length > item.address.label.length) ? item.title : item.address.label;
    row.id = id;
    row.className = className;
    parent.appendChild(row);
  });
}

function AddressLookUp() {
  const searchbox = document.getElementsByClassName('AddressSearch')[0];
  const address = document.getElementById('query').value;
  const addresses = validateAddress(address);
  const addressList = document.createElement('ul');
  addressList.setAttribute('id', 'address-list');

  // clear data from prior lookups
  if (searchbox.contains(document.getElementById('address-list'))) {
    searchbox.lastChild.remove();
  }

  searchbox.appendChild(addressList);

  addresses.then((values) => {
    createDefaultElement(values.items, 'AddressResult', 'AddressResult', addressList);
  }, (reason) => {
    console.error(reason);
  });
}

window.addEventListener('load', function() {
  navigator.geolocation.getCurrentPosition(function(result) {
    center = String(result.coords.latitude) + "," + String(result.coords.longitude)
  })

  init()

});