Парсинг Foursquare API JSON для Leaflet - PullRequest
Новая
       11

Парсинг Foursquare API JSON для Leaflet

0 голосов
/ 18 апреля 2019

Я пытаюсь отобразить JSON на буклет, извлеченный из Foursquare, но у меня возникают трудности с его отображением.

Вот рабочий скрипт, использующий JSON изЯ взял из NYC Open Data. 

fetch('complaintdata.json')
          .then(function (response) {
            // Read data as JSON
            return response.json();
          })
          .then(function (data) {
            // Create the Leaflet layer for the data
            var complaintData = L.geoJson(data, {
              pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {icon: myIcon});
              },

              onEachFeature: function (feature, layer) {
                layer.on('click', function () {
                  // This function is called whenever a feature on the layer is clicked
                  console.log(layer.feature.properties);

                  // Render the template with all of the properties. Mustache ignores properties
                  // that aren't used in the template, so this is fine.
                  var sidebarContentArea = document.querySelector('.sidebar-content');
                  console.log(sidebarContentArea);
                  sidebarContentArea.innerHTML = Mustache.render(popupTemplate, layer.feature.properties);
                });
              }
            });

            // Add data to the map
            complaintData.addTo(map);

          });

Вот рабочий пример с использованием Google Maps, но мне трудно перенести это для Leaflet.

Вот JSON Я хотел бы повторить этот процесс для:

1 Ответ

0 голосов
/ 18 апреля 2019

Сначала необходимо получить данные, а затем выполнить итерацию по объекту для построения маркеров и всплывающего содержимого.

Кажется, что ваш geojson не совместим со встроенным методом L.geoJSON, поэтому выполняйте итерации по объекту, как при работе с обычным объектом JavaScript.

Также просто чтобы сообщить вам, что я использовал axios для получения ответа. 

import axios from "axios";

const url =
  "https://api.foursquare.com/v2/venues/search?near=London&categoryId=4bf58dd8d48988d14c941735&client_id=BOCHQZ4NF0D2NNFP2HM0INIKPUESPUX3RMRDUX02MPWIYSM2&client_secret=EDNX150PKLS4SMRHWL21Q0KLBAQXYQUQV5RAZI0HZSA1IYGG&v=20161111";

let geoJson = {};

axios.get(url).then(response => {
  geoJson = { ...response.data.response.venues };
  // console.log(geoJson);
  for (let key in geoJson) {
    let restaurant = geoJson[key];
    // console.log(restaurant);
    const { lat, lng, address } = restaurant.location;
    const { name } = restaurant;
    const popupContent = `<b>Name</b>: ${name} 
                          <br> <b>Address</b>: ${address}
                          <br> <b>Lat</b>: ${lat}, 
                          <br> <b>Lon</b>: ${lng} 
    `;
    L.marker([lat, lng], { icon: customMarker })
      .bindPopup(popupContent)
      .addTo(map);
  }
});

Демо

...