> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)
# Select features around a clicked point
Click on 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) or create your own from [US FIPS / county data](https://transition.fcc.gov/oet/info/maps/census/fips/fips.txt) and upload it to Mapbox Studio's [Tilesets page](https://console.mapbox.com/studio/tilesets/).
> Example code:
**JavaScript**
```html
Select features around a clicked point
```
**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();
const mapRef = useRef();
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.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('click', (e) => {
const bbox = [
[e.point.x - 5, e.point.y - 5],
[e.point.x + 5, e.point.y + 5]
];
const selectedFeatures = mapRef.current.queryRenderedFeatures(bbox, {
layers: ['counties']
});
const fips = selectedFeatures.map((feature) => feature.properties.FIPS);
mapRef.current.setFilter('counties-highlighted', [
'in',
'FIPS',
...fips
]);
});
});
}, []);
return ;
};
export default MapboxExample;
```