Embedded Files
Part 4: Add a hover over
Part 4: Add a hover over
In order to add a hover over to show the building data we need to decide what kind of popup we want and how to interact with it. One option is to create a popup which appears when you click on a building such as this example, but as we have other buildings without data we need a more sophisticated popup. This automatically opens and closes as it moves over the buildings with data (those under recent or upcoming development). This code has been adapted from this example.
To create this add some style to the css file e.g.:
.mapboxgl-popup { max-width: 400px; font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;}Add a blank popup function just after map.on('load', function() {
var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false });Within the for loop prior to the last bracket add this to create the popup text:
map.on('mouseenter', statusName, function(e) { // Change the cursor style to a pointer. map.getCanvas().style.cursor = 'pointer'; // give the popup coordinates and populate the popup with text popup.setLngLat(e.lngLat)// chose various properties from the data to show in the popup .setHTML(e.features[0].properties.status + ": " + e.features[0].properties.address + "<br> Expected Height: " + e.features[0].properties.bldhgt_ahd + "m / " + e.features[0].properties.num_floors + " storys <br> Proposed Use: " + e.features[0].properties.land_use_1 + ", " + e.features[0].properties.land_use_2 + ", " + e.features[0].properties.land_use_3) .addTo(map);});To close the popup when the pointer is no longer hovering over a building, use the 'mouseleave' event:
map.on('mouseleave', statusNames[i], function(e){ map.getCanvas().style.cursor = ''; popup.remove();});
Google Sites
Report abuse