Suggest with BBox Zoom

by Mapycz

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Map with Autocomplete</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
      integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
      integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="
      crossorigin=""
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.02.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
  
  </head>
  <body>
    <div class="autoComplete_wrapper">
      <label for="autoComplete">Search</label>
      <input
        id="autoComplete"
        type="search"
        dir="ltr"
        spellcheck="false"
        autocorrect="off"
        autocomplete="off"
        autocapitalize="off"
        placeholder="Enter address, street, city, country..."
      />
    </div>
    <div id="map"></div>
</body>

</html>

CSS

body {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        height: 100vh;
      }

      #map {
        flex: 1;
      }

      .autoComplete_wrapper {
        z-index: 1000;
        padding: 2px;
        background: rgba(255, 255, 255, 0.9);
      }

JavaScript

const API_KEY = 'eyJpIjoyNTcsImMiOjE2Njc0ODU2MjN9.c_UlvdpHGTI_Jb-TNMYlDYuIkCLJaUpi911RdlwPsAY';
 // Create the map
      const map = L.map("map").setView([49.8729317, 14.8981184], 16);
      L.tileLayer(`https://api.mapy.cz/v1/maptiles/basic/256/{z}/{x}/{y}?apikey=${API_KEY}`, {
        minZoom: 0,
        maxZoom: 19,
        attribution:
          '<a href="https://api.mapy.cz/copyright" target="_blank">&copy; Seznam.cz a others</a>',
      }).addTo(map);

      // Logo on the map
      const LogoControl = L.Control.extend({
        options: { position: "bottomleft" },
        onAdd: function () {
          const container = L.DomUtil.create("div");
          const link = L.DomUtil.create("a", "", container);
          link.setAttribute("href", "http://mapy.cz/");
          link.setAttribute("target", "_blank");
          link.innerHTML = '<img src="https://api.mapy.cz/img/api/logo.svg" />';
          L.DomEvent.disableClickPropagation(link);
          return container;
        },
      });
      new LogoControl().addTo(map);

      // Autocomplete
      const inputElem = document.querySelector("#autoComplete");
      // cache - [key: query] = suggest items
      const queryCache = {};
      let currentMarker = null;
      let currentBoundingBox = null;

      // get items by query
      const getItems = async (query) => {
        if (queryCache[query]) {
          return queryCache[query];
        }

        try {
          // you need to use your own api key!
          const fetchData = await fetch(
            `https://api.mapy.cz/v1/suggest?lang=en&limit=5&apikey=${API_KEY}&query=${query}`
          );
          const jsonData = await fetchData.json();
          // map values to { value, data }
          const items = jsonData.items.map((item) => ({
            value: item.name,
            data: item,
          }));

          // save to cache
          queryCache[query] = items;
          return items;
        } catch (exc) {
          return [];
       ...