Фильтр Json и добавление пользовательских маркеров

Question

Я пытаюсь импортировать файл json из моей базы данных и добавлять пользовательские слои с разными стилями маркеровКогда я импортирую json и создаю json.map, он работает как один слой со всеми данными lat / lng.Когда я делаю json.filter, если категория == "что я хочу", добавляю маркер ... Он извлекает данные, помещает их в переменную, но не использует в качестве слоя.

ПРИМЕЧАНИЕ. Я использую Javascript и Sequelize.Моя листовка с картой импортируется из карты.Программа полностью функциональна, как есть, но я пытаюсь добавить дополнительные функции для сортировки данных и удовольствия от просмотра.

  fetch('https://agile-mesa-12521.herokuapp.com/api')
    .then(function(response) {
      return response.json();
    }).then(function(complaintJson){
      let lMarkerArray = complaintJson.filter((complaint) => {
        if(complaint.category == "pothole"){
        return L.marker([complaint.lat, complaint.long])
      }
    })
    console.log(lMarkerArray)
      let overlayMaps = { "Complaints": L.layerGroup(lMarkerArray)}
      let streetView = {"Street View": L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
          minZoom: 10,
          id: 'mapbox.streets',
          accessToken: 'pk.eyJ1IjoicmxvcmVuemluaSIsImEiOiJjanR5Z3R2bjQxNjlxM3lvNTV4ZnMxOXAyIn0.xxNzHRkLduHYsYIMoCvGCA'
      }).addTo(mymap)}
      L.control.layers(streetView, overlayMaps).addTo(mymap)
    })
})

Извлеките if (жалобу ...) и измените жалобу Json.filter на.карта, и она работает со всеми поступающими данными.

Есть предложения о том, как создать несколько переменных, назначить их различным категориям из моего файла complaintJson, а затем присвоить им пользовательские маркеры?

  fetch('https://agile-mesa-12521.herokuapp.com/api')
    .then(function(response) {
      return response.json();
    }).then(function(complaintJson){
      let lMarkerArray = complaintJson
  .filter(complaint => complaint.category == "pothole")
  .map(complaint => L.marker([complaint.lat, complaint.long]));
        // return L.marker([complaint.lat, complaint.long])
    // })
    console.log(lMarkerArray)
      let overlayMaps = { "Complaints": L.layerGroup(lMarkerArray)}
      let streetView = {"Street View": L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
          minZoom: 10,
          id: 'mapbox.streets',
          accessToken: 'pk.eyJ1IjoicmxvcmVuemluaSIsImEiOiJjanR5Z3R2bjQxNjlxM3lvNTV4ZnMxOXAyIn0.xxNzHRkLduHYsYIMoCvGCA'
      }).addTo(mymap)}
      L.control.layers(streetView, overlayMaps).addTo(mymap)
    })
})

Обновлен код с предложениями для фильтрации, а затем сопоставления.

Oxnoob решил мою проблему.Спасибо!

Answer 1

Поскольку фильтр возвращает подмножество исходного массива (только с элементами, для которых функция возвращает истинное значение), вы не можете изменить сам элемент, как вы сделали с картой.

Я думаючто вы хотите сделать, это:

let lMarkerArray = complaintJson
  .filter(complaint => complaint.category == "pothole")
  .map(complaint => L.marker([complaint.lat, complaint.long]));