map11.js

// adding menu but doing nothing yet 
 var popup = new mapboxgl.Popup({
 closeButton: false,
 closeOnClick: true
 });
map.on('click', 'unclustered-point', function(e) {
 // Change the cursor style as a UI indicator.
 map.getCanvas().style.cursor = 'pointer';
var coordinates = e.features[0].geometry.coordinates.slice();
 var description = '<h2>aptos: '+e.features[0].properties.total_aptos+'<h2>local: '+e.features[0].properties.nm_local+'</h2>'+'\n'
 +'<h2>endereço: ' +e.features[0].properties.endereco+'</h2><p>município: '+ e.features[0].properties.municipio + '\n'
 +'</h2><p>bairro: '+e.features[0].properties.bairro + '</h2><p>zona: ' + e.features[0].properties.zona_eleitoral + '\n'
 +'</h2><p>total de seções: '+e.features[0].properties.total_seção 
 ;
 // 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(description)
 .addTo(map);
 });
map.on('mouseleave', 'unclustered-point', function() {
 map.getCanvas().style.cursor = '';
 popup.remove();
 });
</script>
 </script>
</body>
</html>