0

I'm trying to apply this tutorial, but since it's polygons and not points, and I'm not familiar with Javascript, I hope I could make the hover works with extruded polygons. I see that the hovering event style.cursor = 'pointer' is working, but the popup is not appearing.

The text information is from a layer made in Mapbox studio. How do I correct the code to work with extruded polygons?

<body>
<style>
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
</style>
<div id="map"></div>
<script>
   mapboxgl.accessToken = 'pk.eyJ1Ijoia2V2aW5jYXJ2YWxobyIsImEiOiJjbDFsNDZnczgwNHVoM2lraGN0cWZlOHJvIn0./////';
   var map = new mapboxgl.Map({
       container: 'map',
       style: 'mapbox://styles/kevincarvalho/cldyij0bs000a01p6yosswikv',
   });

   // Create a popup, but don't add it to the map yet.
     var popup = new mapboxgl.Popup({
       offset: [0, 0],
       closeButton: false,
       closeOnClick: false
     });

 map.on('load', function() {
   map.on('mouseenter', 'edificios-perimetros-djws7r', function(e) {
     map.getCanvas().style.cursor = 'pointer';

     // Copy coordinates array.
     var coordinates = e.features[0].geometry.coordinates.slice();
     var title = e.features[0].properties.Legenda;

     // Ensure that if the map is zoomed out such that multiple
     // copies of the feature are visible, the popup appears
     // over the copy being pointed to.
     while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
     coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
     }

     // Populate the popup and set its coordinates
     // based on the feature found.
     popup
     .setLngLat(coordinates)
     .setHTML(title)
     .addTo(map);
     });

   map.on('mouseleave', 'edificios-perimetros-djws7r', function() {
     map.getCanvas().style.cursor = '';
     popup.remove();
   });
 });

</script>

</body>

1 Answer 1

1

I replaced the coordinates var with the function e.lngLat and it's working now with 3D buildings:

  map.on('load', function() {
    map.on('mouseenter', 'edificios-perimetros-djws7r', function(e) {
      map.getCanvas().style.cursor = 'pointer';

      // Copy coordinates array.
      var title = e.features[0].properties.Legenda;

      // Populate the popup and set its coordinates
      // based on the feature found.
      popup
      .setLngLat(e.lngLat)
      .setHTML(title)
      .addTo(map);
      });

    map.on('mouseleave', 'edificios-perimetros-djws7r', function() {
      map.getCanvas().style.cursor = '';
      popup.remove();
    });
  });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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