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 or create your own from US FIPS / county data 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/v3.9.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.9.0/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',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/streets-v12',
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)'
}
},
// Place polygons under labels, roads and buildings.
'building'
);
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', '']
},
// Place polygons under labels, roads and buildings.
'building'
);
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>
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
mapRef.current = new mapboxgl.Map({
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/streets-v12',
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)'
}
},
'building'
);
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', '']
},
'building'
);
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 <div id="map" ref={mapContainerRef} style={{ height: '100%' }}></div>;
};
export default MapboxExample;
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.Was this example helpful?