JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
 <nav id="nav">
   <input id="search" name="search" placeholder="address" type="text" value="london,uk">
   <button id="go" type="button">
    Search
   </button>
 </nav>
 <div id="map"></div>
 
 <div id="overlay">
   <h2 id="overlayTitle"></h2>
   <div id="overlayList"></div>
 </div>

CSS

#map { height: 90vh; }
#overlayList {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  padding-right: 10px;
}
#search {
  height: 8vh;
  width: 90vw;
  font-size: 7vh;
  border: none;
  padding-top: 1vh;
  padding-bottom: 1vh;
  flex: 3;
}
#go {
  height: 100%;
  width: 100%;
  font-size: 7vh;
  flex: 1;
}
#nav {
   width: 100vw;
   height: 10vh;
   box-shadow: 0px 0px 5px -3px;
   border-color: white;
   z-index: 2000;
   position: relative;
   display: flex;
}
body {margin: 0px;}
#overlay {
  position: absolute;
  left: 50px;
  top: 15vh;
  z-index: 1000;
  background-color: white;
  border-radius: 4px;
  text-align: center;
  box-shadow: 3px 3px 2px 2px;
  display: none;
}
a.overlayList {
  padding: 10px;
  color: blue;
}
a.overlayList:hover {
  padding: 10px;
  color: darkblue;
}
a.overlayList:active {
  padding: 10px;
  color: red;
}
h2 {
  padding-left: 20px;
  padding-right: 20px;
}

JavaScript

var BING_API_KEY = "AqJU7YdD0bp3Mem5jaWWa-aYNybgna1X7p_htfpHgbmufajn8vqqKckzrUB6JRFA";
var lastSearch = "";

function returnBingURL(q) {
	q = encodeURI(q);
	var BING_API_ADDRESS = "https://dev.virtualearth.net/REST/v1/Locations/" + q + "?include=queryParse&o=json&key=" + BING_API_KEY;
  return BING_API_ADDRESS;
}

var [lat, lon] = [54.6891449812283,-3.84407051501059];

var map = L.map('map').setView([lat, lon], 5);

// add the OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);

// show the scale bar on the lower left corner
L.control.scale({imperial: true, metric: true}).addTo(map);

search.addEventListener('keydown', (e) => {
  if (!e.repeat) {
    if ( e.key === "Enter" ) {
    	go.click();
    }
  }
});

go.addEventListener('click', ()=>{

  overlay.style.display = "block";
  
	if(search.value === lastSearch) {return;} else {lastSearch = search.value;}
	overlayList.innerHTML = "";
  overlayTitle.innerText = "searching...";


	fetch(returnBingURL(search.value))
  .then((response)=> {
      response.json()
      .then(response => {
      		if (response.resourceSets[0].estimatedTotal > 0) {
          	overlayTitle.innerText = "search results";
          } else {
          	overlayTitle.innerText = "no search results, try again?";
          }
          for(i=0;i<response.resourceSets[0].estimatedTotal;i++){
            let a = document.createElement("a");
            let [lat, lon]  = response.resourceSets[0].resources[i].geocodePoints[0].coordinates;

            L.marker([lat, lon])
              .bindPopup(response.resourceSets[0].resources[i].address.formattedAddress)
              .addTo(map);

            // if we are on the first result in this loop, preparing pins, then move map there to save the end user from having to.
            if(i == 0) {
              map.flyTo([lat, lon], 13); 
    ...