> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)
# Highlight buildings in the Mapbox Standard Style
This example demonstrates how to highlight individual buildings in the [Mapbox Standard Style](https://docs.mapbox.com/map-styles/standard/) using the [`addInteraction`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addinteraction) method with the built-in `buildings` [featureset](https://docs.mapbox.com/map-styles/standard/api/#featuresets).
The code below demonstrates how to:
- Highlight a building on hover using the `highlight` [feature state](https://docs.mapbox.com/style-spec/reference/expressions/#feature-state) and a pointer cursor to show it is selectable
- Persistently select a building on click using the `select` feature state, clearing any previous selection
- Customize the hover and selection colors using the `colorBuildingHighlight` and `colorBuildingSelect` [configuration properties](https://docs.mapbox.com/map-styles/standard/api/#configuration-properties)
- Disable 3D landmarks using the `show3dLandmarks` configuration property, as this highlighting technique does not work for buildings represented as 3D models
The `buildings` featureset and `colorBuildingHighlight`/`colorBuildingSelect` configuration properties are only available in styles that import the [Mapbox Standard Style](https://docs.mapbox.com/map-styles/standard/).
> Example code:
**JavaScript**
```html
Highlight buildings in the Mapbox Standard Style
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef(null);
const mapRef = useRef(null);
const hoveredBuildingRef = useRef(null);
const selectedBuildingRef = useRef(null);
useEffect(() => {
const map = (mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/standard',
center: [-74.0066, 40.7135],
zoom: 15.5,
pitch: 45,
bearing: -17.6,
config: {
// Customize the highlight and select colors for the buildings featureset.
// colorBuildingHighlight controls the hover color (default: blue).
// colorBuildingSelect controls the click/selection color (default: blue).
// show3dLandmarks is set to false, as this highlighting technique does not work for buildings represented as 3D models.
basemap: {
colorBuildingHighlight: '#93C5FD',
colorBuildingSelect: '#1E40AF',
show3dLandmarks: false
}
}
}));
// Show a pointer cursor and highlight the building on hover
map.addInteraction('building-mouseenter', {
type: 'mouseenter',
target: { featuresetId: 'buildings', importId: 'basemap' },
handler: ({ feature }) => {
if (hoveredBuildingRef.current) {
map.setFeatureState(hoveredBuildingRef.current, { highlight: false });
}
hoveredBuildingRef.current = feature;
map.setFeatureState(feature, { highlight: true });
map.getCanvas().style.cursor = 'pointer';
}
});
// Remove the highlight and reset the cursor when the mouse leaves a building.
// Only clear if the leaving feature matches the currently hovered building —
// this prevents stale mouseleave events (which fire per-feature due to
// return false) from clearing a highlight set by a later mouseenter.
map.addInteraction('building-mouseleave', {
type: 'mouseleave',
target: { featuresetId: 'buildings', importId: 'basemap' },
handler: ({ feature }) => {
if (
hoveredBuildingRef.current &&
feature.id === hoveredBuildingRef.current.id
) {
map.setFeatureState(hoveredBuildingRef.current, { highlight: false });
hoveredBuildingRef.current = null;
map.getCanvas().style.cursor = '';
}
return false;
}
});
// Persistently select a building on click, clearing any previous selection
map.addInteraction('building-click', {
type: 'click',
target: { featuresetId: 'buildings', importId: 'basemap' },
handler: ({ feature }) => {
if (selectedBuildingRef.current) {
map.setFeatureState(selectedBuildingRef.current, { select: false });
}
selectedBuildingRef.current = feature;
map.setFeatureState(feature, { select: true });
}
});
return () => map.remove();
}, []);
return (
);
};
export default MapboxExample;
```