1

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 no errors are being thrown.

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
})
}
1

Problem is that inside click event processing function you are referring trail object key value that at the time of click event has key value of the last object. For layer you have to use e.target object and for trail name e.target.feature.properties.trailName.

So your click processing function could then look something like this:

trailsGeoJSON[trail].on("click", function(e){
  var layer = e.target;
  var trail = layer.feature.properties.trailName;
  map.fitBounds(layer.getBounds());
  var div = document.getElementById("info");
  div.style.display= "inherit";
  div.innerHTML = trailProps[trail].info;
});
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.