mapkitjs

by Paul Davis

HTML

<script src="https://cdn.apple-mapkit.com/mk/5.56.0/mapkit.js"></script>
<div class="mapSearchWrapper">
      <input type="text" id="mapLookup" class="mapSearchInput">
      <div id="results" class="mapSearchResults hidden">
      </div>
  </div>
<main class="container">
  <div id="map"></div>
</main>

CSS

.container {
  display: flex;
}

#map {
  width: 100%;
  height: 400px;
}

.mapSearchWrapper {
  position: relative;
}

.mapSearchInput {
  width: 100%;
  padding: 4px;
}

.hidden {
  display: none;
}

.mapSearchResults {
  display: block;
  position: absolute;
  top: 20px;
  left: 0px;
  z-index: 9999;
  background: #FFFFFF;
  border: 1px #CCCCCC solid;
  font-family: sans-serif;
}

.mapSearchResultsItem {
  padding: 4px;
  border-bottom: 1px #CCCCCC solid;
}

.mapSearchResultsItem:hover {
  background: #EEEEEE;
}

JavaScript

window.addEventListener('load', function(event) {
  setupMap();
});

const htmlToElement = html => {
  const placeholder = document.createElement('div');
  placeholder.innerHTML = html;
  return placeholder.children.length ? placeholder.firstElementChild : undefined;
};

const setupMap = () => {
  mapkit.init({
    authorizationCallback: done => {
      done('eyJhbGciOiJFUzI1NiIsImtpZCI6Ik5UTjY3NFVRM1AiLCJ0eXAiOiJKV1QifQ.eyJhbGciOiJFUzI1NiIsImlzcyI6IjJaN0Y0UDQ5MjUiLCJpYXQiOjE2MTc5MDAxMjcsImV4cCI6MTYxNzkwMTkyN30.MEUCIQCcPbdkB6zmsGgGQniA4vgHop9YxisI69ceordG6w/j7AIgVHge7/aFALcbFWIyQVFxlpDl3ZlyjI6j5WMK/tqYEUI=');
    },
    language: navigator.language || navigator.userLanguage,
  });

  let myRegion = new mapkit.CoordinateRegion(
    new mapkit.Coordinate(55.9496320, -3.1866360),
    new mapkit.CoordinateSpan(0.05, 0.05)
  );
  // Create map on the id 'map'
  let map = new mapkit.Map("map");
  map.region = myRegion;

  let mapLookup = document.getElementById('mapLookup');
  let mapResults = document.getElementById('results');

  mapLookup.addEventListener('keyup', e => {
    let val = e.target.value;
    if (val.length > 2) {
      let search = new mapkit.Search({});
      search.autocomplete(val, (error, data) => {
        if (error) {
          return;
        }
        mapResults.classList.remove('hidden');
        let results = document.createElement('div');
        data.results.forEach(function(result) {
          if (
            result.coordinate &&
            (
              (
                result.displayLines[0] !== undefined &&
                result.displayLines[0].includes("United States")
              ) ||
              (
                result.displayLines[1] !== undefined &&
                result.displayLines[1].includes("United States")
              )
            )
          ) {
            console.log(`${result.displayLines[0]}, ${result.displayLines[1]}`);
            let address = [result.displayLines[0], result.displayLines[1]].join('...