1

I'm trying to display popup information from overlapping polygons similar to this question, but instead of a click, I'm using the mouse over to identify my popup. In areas that have overlapping polygons, I'd like to display the Name and Description from all polygons. I'm trying to incorporate the correct answer to my particular case, but I'm just not understanding the logic.

My Original Code

   //change info window on hover
          map.on('mousemove', function(e) {
          var neighborhood = map.queryRenderedFeatures(e.point, {
            layers: ['Neighborhood_layer']
          });

          if (neighborhood.length > 0) {
            document.getElementById('pd').innerHTML = 
            "<p><em>Name: " + neighborhood[0].properties.Name +
            "<p><em>Name: " + neighborhood[0].properties.Description +
            "</em></p>";
          } else {
            document.getElementById('pd').innerHTML = '<p>Hover over a Neighborhood</p>';
          }
        });
      });

My Attempt

  //change info window on hover
      map.on('mousemove', function(e) {
      var neighborhood = map.queryRenderedFeatures(e.point, {
        layers: ['Neighborhood_layer']
 setHTML(e.features.map(function(neighborhood) { return feature.properties.Name; }).join(', '))
 setHTML(e.features.map(function(neighborhood) { return feature.properties.Description; }).join(', '))
      });

      if (neighborhood.length > 0) {
        document.getElementById('pd').innerHTML = 
        "<p><em>Name: " + neighborhood[0].properties.Name +
        "<p><em>Name: " + neighborhood[0].properties.Description +
        "</em></p>";
      } else {
        document.getElementById('pd').innerHTML = '<p>Hover over a Neighborhood</p>';

    });
  });

UPDATED Attempt I'm not understanding the logic, but if I change neighborhood [0] to neighborhood [1], I'm able to identify most overlapping features but not all...

  //change info window on hover
      map.on('mousemove', function(e) {
      var neighborhood = map.queryRenderedFeatures(e.point, {
        layers: ['Neighborhood_layer']
 setHTML(e.features.map(function(neighborhood) { return feature.properties.Name; }).join(', '))
 setHTML(e.features.map(function(neighborhood) { return feature.properties.Description; }).join(', '))
      });

      if (neighborhood.length > 0) {
        document.getElementById('pd').innerHTML = 
        "<p><em>Name: " + neighborhood[1].properties.Name +
        "<p><em>Name: " + neighborhood[1].properties.Description +
        "</em></p>";
      } else {
        document.getElementById('pd').innerHTML = '<p>Hover over a Neighborhood</p>';

    });
  });
0

neighbourhood is an Array of features under the mouse, so where you are grabbing the first only with neighbourhood[0] you can iterate over or concatenate.

  • Andrew, thank you so much for responding!! If I'm understanding you correctly, the neighborhood[0] only grabs the first one. Now how would I change that to include the other overlapping features? Sorry, I'm new to this! – pac_co Jul 25 '18 at 1:50

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.