mapbox cursor and popups

mapbox.js

/*
================================================================================
CREATE POPUP CONTENT

Creates the content that populates the popup
================================================================================
*/

function createPopupContent(feature) {
  // grab the id property from the feature we've selected
  let content = '<<your popup content>>';
  return content;
}

/*
================================================================================
DISPLAY MAP TOOLTIP

Displays tooltip on the map when a feature is clicked on.
================================================================================
*/

function displayPopup(event, uniqueProp) {
  // collect all the features at the point of the event
  const features = map.queryRenderedFeatures(event.point, {});

  // if there are no features at that point, return out of the function
  if (!features.length) { return; }

  if (features[0].properties[uniqueProp] === undefined) { return; }

  // else, set feature to the first feature in the list of features
  const feature = features[0];

  // construct a new mapbox popup, set it's long/lat position to the long/lat
  // of the feature and set it's html to the result of the createPopupContent function
  const popup = new mapboxgl.Popup().setLngLat(feature.geometry.coordinates)
    .setHTML(createPopupContent(feature));

  // add the popup to the map
  popup.addTo(map);

  // animate the map to the coordinates of the feature
  map.flyTo({
    center: feature.geometry.coordinates,
    zoom: 10,
  });
}


/*
================================================================================
CONTROL MAP CURSOR

Changes cursor appearance based on if cursor is hovered over map or map feature
================================================================================
*/

function updateMapCursor(event, uniqueProp) {
  // find all features at the point of the event
  const features = map.queryRenderedFeatures(event.point, {});
  // if the first feature in the list of features has the unique propoerty, set the
  // cursor to a pointer
  map.getCanvas().style.cursor = (features.length && features[0].properties[uniqueProp] !== undefined) ? 'pointer' : '';
}


// when the map is clicked, run the displayPopup, 
// passing in the event and one of the properties unique to your feature as a string
map.on('click', event => displayPopup(event, '<<unique property string>>'));

// update the cursor based on if user is hovering over point on a map
// passing in the event and one of the properties unique to your feature as a string
map.on('mousemove', event => updateMapCursor(event, '<<unique property string>>'));