Не удается получить опцию фильтра, работающую в Leaflet

Question

У меня есть простой кусок кода. Я пытаюсь отфильтровать свойство в geo Json, используя класс ломаной линии, чтобы нарисовать только эту функцию. Консоль не регистрирует ошибок и не рисует линейных объектов. Любые очевидные ошибки для людей?

var featuredTrails = {"type":"FeatureCollection",
"crs":{"type":"name","properties":{"name":"EPSG:4326"}},
"features":[{"type":"Feature","id":0,"geometry":{"type":"LineString","coordinates":[[-122.61021404499996,37.912006417000043],[-122.61030149899995,37.911962580000079],[-122.61032215499995,37.91195437500005],[-122.61034267899998,37.911948396000071],[-122.61037064499999,37.911944185000038],[-122.61044270799999,37.911944840000046],[-122.61048737499999,37.911941983000077],[-122.61051446199997,37.911935416000063],[-122.61056354999999,37.911913854000034],[-122.61058265499997,37.911907477000057],[-122.61060151699996,37.911905097000044],[-122.61065930899997,37.911903652000035],[-122.61068899199995,37.911899589000029],[-122.61071666799995,37.911890815000049],[-122.61076069999996,37.911863463000032],[-122.61100599899999,37.911912114000074],[-122.61115807299996,37.912020056000074]]},"properties":{"FID":0,"OBJECTID":1,"trailName":"West Peak Loop","SHAPE_Leng":0.0010123783761800001,"Length_mi":0}}

  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
  <script src="data/OneTamFeaturedTrailheads.js"></script>
  <script src="data/OneTamFeaturedTrails.js"></script>

    var map = L.map('map', {
      center: [37.887914, -122.578138],
      zoom: 12,
    });

      var tiles = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}{r}.{ext}', {
        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        subdomains: 'abcd',
        maxZoom: 18,
        ext: 'png'
      });
      tiles.addTo(map);


  var westPeak = L.geoJson(featuredTrailHeads, {
   pointToLayer: function(feature, latLng) {
    return L.circleMarker(latLng);
    },
    // set marker style
    style: function (feature) {
      return {
      color: '#000000',
      fillColor: '#f6c65b',
      weight: 1,
      stroke: 1,
      fillOpacity: 1,
      radius: 5
      }
    }
   }).addTo(map); 

 var trailsLayer =  L.geoJson(featuredTrails, {
   pointToLayer: function(feature, latLngs){
     return L.polyline (feature, latLngs);
   },
  filter: function(feature, latLngs) {
    if (feature.properties.trailName["West Peak Loop"])

          return feature
   },
 }).addTo(map); 

    </script>

Answer 1

Сначала твой гео Json неверен. Вы должны добавить ]} в конце.

Кроме того, если в вашем коде неправильно. feature.properties.trailName["West Peak Loop"] при этом вы получаете дочерний «West Peak L oop» от объекта «trailName», но нет объекта с именем «West Peak L oop».

И в функция фильтра, которую вы должны вернуть true или false.

Обновите фильтр на:

  filter: function(feature, latLngs) {
    if (feature.properties.trailName == "West Peak Loop"){
          return true;
    }
   },

Пример: https://jsfiddle.net/falkedesign/cLtvgphr/