Список интересных мест в выбранном населенном пункте

Эта функция вызывает методы API при помощи fetch (вместо нее можно использовать XMLHttpRequest или $.ajax):

    //You should get your API key at https://dev.opentripmap.org
    const apiKey = "";

    function apiGet(method, query) {
      return new Promise(function(resolve, reject) {
        var otmAPI =
          "https://api.opentripmap.com/0.1/en/places/" +
          method +
          "?apikey=" +
          apiKey;
        if (query !== undefined) {
          otmAPI += "&" + query;
        }
        fetch(otmAPI)
          .then(response => response.json())
          .then(data => resolve(data))
          .catch(function(err) {
            console.log("Fetch Error :-S", err);
          });
      });
    }
    

Инициализируем глобальные переменные для поддержки постраничного просмотра:

    const pageLength = 5; // number of objects per page

    let lon; // place longitude
    let lat; // place latitude

    let offset = 0; // offset from first object in the list
    let count; // total objects count
    

Этот блок использует название из текстового поля и получает местоположение населенного пункта из API. Если населенный пункт найден, вызываем функцию загрузки списка:

    document
      .getElementById("search_form")
      .addEventListener("submit", function(event) {
        let name = document.getElementById("textbox").value;
        apiGet("geoname", "name=" + name).then(function(data) {
          let message = "Name not found";
          if (data.status == "OK") {
            message = data.name + ", " + getCountryName(data.country);
            lon = data.lon;
            lat = data.lat;
            firstLoad();
          }
          document.getElementById("info").innerHTML = `
${message}
`;
        });
        event.preventDefault();
      });

Эта функция получает общее количество объектов в радиусе 1000 метров от указанного местоположения (lon, lat), а затем загружает первую страницу списка объектов:

    function firstLoad() {
      apiGet(
        "radius",
        `radius=1000&limit=${pageLength}&offset=${offset}&lon=${lon}&lat=${lat}&rate=2&format=count`
      ).then(function(data) {
        count = data.count;
        offset = 0;
        document.getElementById(
          "info"
        ).innerHTML += `<p>${count} objects with description in a 1km radius</p>`;
        loadList();
      });
    }
    

Эта функция загружает страницу списка объектов в левую часть окна. Объекты ищутся в радиусе 1000 метров:

    function loadList() {
      apiGet(
        "radius",
        `radius=1000&limit=${pageLength}&offset=${offset}&lon=${lon}&lat=${lat}&rate=2&format=json`
      ).then(function(data) {
        let list = document.getElementById("list");
        list.innerHTML = "";
        data.forEach(item => list.appendChild(createListItem(item)));
        let nextBtn = document.getElementById("next_button");
        if (count < offset + pageLength) {
          nextBtn.style.visibility = "hidden";
        } else {
          nextBtn.style.visibility = "visible";
          nextBtn.innerText = `Next (${offset + pageLength} of ${count})`;
        }
      });
    }
    

Эта функция создает элемент списка объектов в левой части окна:

    function createListItem(item) {
      let a = document.createElement("a");
      a.className = "list-group-item list-group-item-action";
      a.setAttribute("data-id", item.xid);
      a.innerHTML = `<h5 class="list-group-item-heading">${item.name}</h5>
                <p class="list-group-item-text">${getCategoryName(item.kinds)}</p>`;

      a.addEventListener("click", function() {
        document.querySelectorAll("#list a").forEach(function(item) {
          item.classList.remove("active");
        });
        this.classList.add("active");
        let xid = this.getAttribute("data-id");
        apiGet("xid/" + xid).then(data => onShowPOI(data));
      });
      return a;
    }

Эта функция создает карточку объекта в правой части окна, заполняя ее картинкой и описанием:

    function onShowPOI(data) {
      let poi = document.getElementById("poi");
      poi.innerHTML = "";
      if (data.preview) {
        poi.innerHTML += `<img src="${data.preview.source}">`;
      }
      poi.innerHTML += data.wikipedia_extracts
        ? data.wikipedia_extracts.html
        : data.info
        ? data.info.descr
        : "No description";

      poi.innerHTML += `<p><a target="_blank" href="${data.otm}">Show more at OpenTripMap</a></p>`;
    }

Этот блок кода обрабатывает кнопку запроса следующей страницы списка:

    document
      .getElementById("next_button")
      .addEventListener("click", function() {
        offset += pageLength;
        loadList();
      });