Leaflet: .bindPopup with layer groups opens popup in the same spot for all features

Question

I'm building a Leaflet map of recent earthquakes that pulls from three APIs to create three layer groups on a map. I'm also building a sidebar with a list of earthquakes from just one of the three API links. When a user clicks on a map marker, a popup appears with more information about the quake. And when they click on a list item in the sidebar, I'd like for the popup for the corresponding quake to open, the same as if the user had clicked on the marker.

The popups work fine when the user clicks on the map markers. However, when I click on the list item, the popups with the correct information do open, but they all appear in the same place, and not at the quake's correct lat/lng.

I tried using FeatureGroup instead of LayerGroup, as suggestedhere, but the same thing happens. I also tried adding the popup to a specific layer with addTo(layers[key]);, but this changes nothing, either.

Here is the relevant code:

URLs = {
  PAST_MONTH: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson",
  PAST_WEEK: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson", 
  PAST_DAY: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson",
};

Object.entries(URLs).forEach(([key, url]) => {

  d3.json(url).then(function (response){


    //Add features to the map.
    response.features.forEach(feature => {
    var calif = feature.properties.title.split(",");
    if (calif[1] === " CA") {
      console.log(feature.properties.title);
      quake = L.geoJSON(feature, {
        pointToLayer: function(feature, latlng) {
          return L.circleMarker(latlng, {
            radius: getRadius(feature.properties.mag),
            fillColor: getColor(feature.properties.mag),
            color: getColor(feature.properties.mag),
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
          });
        },
      });


    //populate the sidebar with JUST the list of earthquakes in the past week
    if (url === URLs.PAST_WEEK) {
      var list = document.getElementsByClassName("quake-list");
      var listItem = document.createElement("li");
      listItem.innerHTML = feature.properties.title + " " + moment(feature.properties.time).startOf('day').fromNow(); 
      list[0].appendChild(listItem);
      listItem.addEventListener('click', function() {
          quake.bindPopup("<h3>" + feature.properties.title + "</h3><hr>" + 
              "<strong>Magnitude: </strong>" + feature.properties.mag + 
              "<br><strong>Date and time: </strong>" + convertUnixTime(feature.properties.time))
          quake.openPopup();
      })
    }

      // Add popup with info, when user clicks on map markers
      quake.bindPopup("<h3>" + feature.properties.title + "</h3><hr>" + 
      "<strong>Magnitude: </strong>" + feature.properties.mag + 
      "<br><strong>Date and time: </strong>" + convertUnixTime(feature.properties.time));

      // Add to specific layer
      quake.addTo(layers[key]);

    }; 

    });
  });
});

And this is the specific part where I can't figure out how to bind the popups to the list items so that they appear at the correct lat/lng:

//populate the sidebar with JUST the list of earthquakes in the past week
    if (url === URLs.PAST_WEEK) {
      var list = document.getElementsByClassName("quake-list");
      var listItem = document.createElement("li");
      listItem.innerHTML = feature.properties.title + " " + moment(feature.properties.time).startOf('day').fromNow(); 
      list[0].appendChild(listItem);
      listItem.addEventListener('click', function() {
          quake.bindPopup("<h3>" + feature.properties.title + "</h3><hr>" + 
              "<strong>Magnitude: </strong>" + feature.properties.mag + 
              "<br><strong>Date and time: </strong>" + convertUnixTime(feature.properties.time))
          quake.openPopup();
      })
    }

I'm new to Leaflet and would appreciate any help. I'm sure I'm missing something obvious but I've been racking my brain trying to see what I'm missing. Thank you!

score 0 · Answer 1 · answered Jan 13 '20 at 06:53

Instead adding the popup to the layergroup bind the popup to each layer.

if (url === URLs.PAST_WEEK) {
      var list = document.getElementsByClassName("quake-list");
      var listItem = document.createElement("li");
      listItem.innerHTML = feature.properties.title + " " + moment(feature.properties.time).startOf('day').fromNow(); 
      list[0].appendChild(listItem);
      listItem.addEventListener('click', function() {
          quake.eachLayer(function(layer){
            layer.bindPopup("<h3>" + feature.properties.title + "</h3><hr>" + 
                "<strong>Magnitude: </strong>" + feature.properties.mag + 
                "<br><strong>Date and time: </strong>" + convertUnixTime(feature.properties.time),
{autoClose: false})
            layer.openPopup();
         });
      })
    }

score 0 · Answer 2 · answered Jan 13 '20 at 16:52

The problem turns out to be an issue with scope for the "quake" variable. This code works:

  var quake = L.geoJSON(feature, {
    pointToLayer: function(feature, latlng) {
      return L.circleMarker(latlng, {
        radius: getRadius(feature.properties.mag),
        fillColor: getColor(feature.properties.mag),
        color: getColor(feature.properties.mag),
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
      });
    },
  });

Leaflet: .bindPopup with layer groups opens popup in the same spot for all features

2 Answers2