JSFiddle - React, Tailwind, and code Playground

by wenn009

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Places Explorer Map</title>

    <script src='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css' rel='stylesheet' />

  </head>

  <body>
    <div id='map' style='width: 400px; height: 300px;'></div>
    <input type="text" id="explorer-search" placeholder="Search Foursquare Places" />
    <ul id="explorer-suggestions"></ul>
  </body>

</html>

CSS

.explorer--dropdown-item div {
  pointer-events: none;
}

JavaScript

mapboxgl.accessToken = '';
const fsqAPIToken = '';
const inputField = document.getElementById('explorer-search');
const dropDownField = document.getElementById('explorer-dropdown');
const ulField = document.getElementById('explorer-suggestions');

inputField.addEventListener('input', changeAutoComplete);

let userLat;
let userLng;
let sessionToken = generateRandomSessionToken();
let currentMarker;

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 12,
});

let isFetching = false;
async function changeAutoComplete({
  target
}) {
  const {
    value: inputSearch = ''
  } = target;
  ulField.innerHTML = '';
  if (inputSearch.length && !isFetching) {
    try {
      isFetching = true;
      const results = await autoComplete(inputSearch);
      if (results && results.length) {
        results.forEach((value) => {
          addItem(value);
        });
      }
    } catch (err) {
      logError(err);
    } finally {
      isFetching = false;
      dropDownField.style.display = 'block';
    }
  } else {
    dropDownField.style.display = 'none';
  }
}

function logError(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

function addItem(value) {
  const placeDetail = value[value.type];
  if (!placeDetail || !placeDetail.geocodes || !placeDetail.geocodes.main) return;
  const {
    latitude,
    longitude
  } = placeDetail.geocodes.main;
  const { link } = value;
  const dataObject = JSON.stringify({
    latitude,
    longitude,
    link
  });
  ulField.innerHTML +=
    `<li class="explorer--dropdown-item" data-object='${dataObject}'>
      <div>${value.text.primary}</div>
      <div>${value.text.secondary}</div>
    </li>`;
}

async function autoComplete(query) {
  const {
    lng,
    lat
  } = map.getCenter();
  userLat = lat;
  userLng = lng;
  try {
    const searchParams = new URLSearchParams({
      query,
      types: 'place',
      ll:...