On Click Only Selects Last Value in Object

Question

Working on a dynamic map that zooms to a trail when it's clicked on. Problem is no matter which feature I click on it always ends on the last key last feature in the loop. Any thoughts on what I'm missing? Console logging looks fine and now errors are being thrown. Thanks in advance.

One record in the geoJson -- var featuredTrails = { "type": "FeatureCollection", "name": "OneTamFeaturedTrails", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [ { "type": "Feature", "properties": { "trailName": "West Peak Loop" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ -122.61021, 37.91201 ], [ -122.6103, 37.91196 ], [ -122.61032, 37.91195 ], [ -122.61034, 37.91195 ], [ -122.61037, 37.91194 ], [ -122.61044, 37.91194 ], [ -122.61049, 37.91194 ], [ -122.61051, 37.91194 ], [ -122.61056, 37.91191 ], [ -122.61058, 37.91191 ], [ -122.6106, 37.91191 ], [ -122.61066, 37.9119 ], [ -122.61069, 37.9119 ], [ -122.61072, 37.91189 ], [ -122.61076, 37.91186 ], [ -122.61101, 37.91191 ], [ -122.61116, 37.91202 ] ] ] } },

    var trailProps = {
      "West Peak Loop": {
        color: "red",
        info: `<h2>West Peak Loop</h2>Some info <img src='https://www.onetam.org/sites/default/files/trails/trail_westpeak01.jpg' width='300px'>`,
       // stats: `<h2>West Peak Loop</h2><b>Miles:</b> 11 mi<br><b>Difficulty</b>: Mindbending`
      },
      "Redwood Creek Trail Loop": {
        color: "red",
        info: `<h2>West Peak Loop</h2>Some info <img src='https://www.onetam.org/sites/default/files/trails/trail_westpeak01.jpg' width='300px'>`,
        //stats: `<h2>West Peak Loop</h2><b>Miles:</b> 11 mi<br><b>Difficulty</b>: Mindbending`
    },
      "Mountain Home Inn Loop": {
        color: "red",
        info: `<h2>West Peak Loop</h2>Some info <img src='https://www.onetam.org/sites/default/files/trails/trail_westpeak01.jpg' width='300px'>`,
        //stats: `<h2>West Peak Loop</h2><b>Miles:</b> 11 mi<br><b>Difficulty</b>: Mindbending`
    }
  };

    // Create empty object to contain geoJSON objects of trails
    var trailsGeoJSON = {}

  // Loop through properties and assign them to the trails
  for (trail in trailProps) {


    // assign variable of the empty object with [trail] array
    trailsGeoJSON[trail] = L.geoJson(featuredTrails, {
      // is point to layer ok for use on polylines?
      pointToLayer: function(feature, latLngs){
        return L.polyline (feature, latLngs);
      },
      filter: function(feature) {
        // Test for equivalence, then return feature
        if (feature.properties.trailName == trail)
              return feature
      },
      style: function(feature) {
        if (feature.properties.trailName == trail)
              return {"color": trailProps[trail].color}

      }, 
      onEachFeature: function(feature, layer) {
        if (feature.properties.trailName == trail) {
         // layer.bindPopup(trailProps[trail].stats)
        }

      }
      }).addTo(map); 
  }
  // loop through the geoJSONs and add event when clicked
  for (trail in trailsGeoJSON) {

    trailsGeoJSON[trail].on("click", function(e){
      map.fitBounds(trailsGeoJSON[trail].getBounds()) 
      var div = document.getElementById("info")
      div.style.display= "inherit"
      // use the trailsProp object to populate info
      div.innerHTML = trailProps[trail].info
    })
  }```

ghybs ghybs · Accepted Answer · 2020-03-29T18:49:07

Similarly to Leaflet OnClick data not dynamically you very probably just need to ensure your trail variable in for loop is block scoped in each loop iteration:

for (const trail in trailsGeoJSON) {
  // etc.
}

On Click Only Selects Last Value in Object

1 Answers