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>
