All docsMapbox GL JSExamplesSelect features around a clicked point

Select features around a clicked point

Click on the map to query features using queryRenderedFeatures.

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 and upload it to Mapbox Studio's Tilesets page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Select features around a clicked point</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-98, 38.88],
minZoom: 2,
zoom: 3
});
map.on('load', () => {
// Add a custom vector tileset source. The tileset used in
// this example contains a feature for every county in the U.S.
// Each county contains four properties. For example:
// {
// COUNTY: "Uintah County",
// FIPS: 49047,
// median-income: 62363,
// population: 34576
// }
map.addSource('counties', {
'type': 'vector',
'url': 'mapbox://mapbox.82pkq93d'
});
map.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)'
}
},
'settlement-label'
); // Place polygon under these labels.
map.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', '']
},
'settlement-label'
); // Place polygon under these labels.
map.on('click', (e) => {
// Set `bbox` as 5px reactangle area around clicked point.
const bbox = [
[e.point.x - 5, e.point.y - 5],
[e.point.x + 5, e.point.y + 5]
];
// Find features intersecting the bounding box.
const selectedFeatures = map.queryRenderedFeatures(bbox, {
layers: ['counties']
});
const fips = selectedFeatures.map(
(feature) => feature.properties.FIPS
);
// Set a filter matching selected features by FIPS codes
// to activate the 'counties-highlighted' layer.
map.setFilter('counties-highlighted', ['in', 'FIPS', ...fips]);
});
});
</script>
</body>
</html>