> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)
# Highlight features within a bounding box
Hold Shift and drag the map to query features using [`queryRenderedFeatures`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures).
> **Note: Use a custom tileset**
>
> This example uses U.S. county data uploaded to Mapbox as a vector tileset. This data is not updated or maintained and **should not be used in production applications.** If you're interested in creating an application that uses U.S. county data, you can download a Shapefile from [census.gov's data portal](https://www.census.gov/geographies/mapping-files/time-series/geo/cartographic-boundary.html) and upload it to Mapbox Studio's [Tilesets page](https://console.mapbox.com/studio/tilesets/).
> Example code:
**JavaScript**
```html
Highlight features within a bounding box
```
**React**
```jsx
/* eslint jsx-a11y/no-static-element-interactions: 0 */
import React, { useEffect, useRef, useState } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
const [start, setStart] = useState(false);
const [currentPosition, setCurrentPosition] = useState(false);
useEffect(() => {
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: [-98, 38.88],
minZoom: 2,
zoom: 3
});
mapRef.current.boxZoom.disable();
const popup = new mapboxgl.Popup({
closeButton: false
});
mapRef.current.on('load', () => {
mapRef.current.addSource('counties', {
type: 'vector',
url: 'mapbox://mapbox.82pkq93d'
});
mapRef.current.addLayer({
id: 'counties',
type: 'fill',
source: 'counties',
'source-layer': 'original',
paint: {
'fill-outline-color': 'rgba(0,0,0,0.1)',
'fill-color': 'rgba(0,0,0,0.1)'
},
slot: 'middle'
});
mapRef.current.addLayer({
id: 'counties-highlighted',
type: 'fill',
source: 'counties',
'source-layer': 'original',
paint: {
'fill-outline-color': '#484896',
'fill-color': '#6e599f',
'fill-opacity': 0.75
},
filter: ['in', 'FIPS', ''],
slot: 'top'
});
mapRef.current.on('mousemove', (e) => {
const features = mapRef.current.queryRenderedFeatures(e.point, {
layers: ['counties-highlighted']
});
mapRef.current.getCanvas().style.cursor = features.length
? 'pointer'
: '';
if (!features.length) {
popup.remove();
return;
}
popup
.setLngLat(e.lngLat)
.setText(features[0].properties.COUNTY)
.addTo(mapRef.current);
});
});
}, []);
const mousePos = (e) => {
const canvas = mapRef.current.getCanvasContainer();
const rect = canvas.getBoundingClientRect();
return new mapboxgl.Point(
e.clientX - rect.left - canvas.clientLeft,
e.clientY - rect.top - canvas.clientTop
);
};
const finish = (bbox) => {
setStart();
if (bbox) {
const features = mapRef.current.queryRenderedFeatures(bbox, {
layers: ['counties']
});
if (features.length >= 1000) {
return window.alert('Select a smaller number of features');
}
const fips = features.map((feature) => feature.properties.FIPS);
mapRef.current.setFilter('counties-highlighted', ['in', 'FIPS', ...fips]);
}
mapRef.current.dragPan.enable();
};
const handleMouseDown = (e) => {
if (!(e.shiftKey && e.button === 0)) return;
mapRef.current.dragPan.disable();
setStart(mousePos(e));
};
const handleMouseMove = (e) => {
setCurrentPosition(mousePos(e));
};
const handleMouseUp = (e) => {
if (start) {
finish([start, mousePos(e)]);
}
};
const handleKeyDown = (e) => {
if (e.keyCode === 27) finish();
};
let width;
let height;
let transform;
if (start) {
const minX = Math.min(start.x, currentPosition.x),
maxX = Math.max(start.x, currentPosition.x),
minY = Math.min(start.y, currentPosition.y),
maxY = Math.max(start.y, currentPosition.y);
transform = `translate(${minX}px, ${minY}px)`;
width = maxX - minX;
height = maxY - minY;
}
return (
<>
);
};
export default MapboxExample;
```