Select features around a clicked point | Mapbox GL JS

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.

JavaScript

React

JavaScript

React

<!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.5.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.5.1/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>

JavaScript

React

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(() => {
    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;

Was this example helpful?