> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt) # Add feature-level interactions to a map This example demonstrates how to use [`addInteraction`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#addinteraction) to handle independent feature-level interactions. The example uses feature state to change the styling when a feature is clicked or hovered. When clicking a feature, it becomes selected and displays its properties in a card. Using `mouseenter` and `mouseleave` events, features are highlighted as the mouse moves over them. > Example code: **JavaScript** ```html Add feature-level interactions to a map
``` **React** ```jsx import React, { useState, useEffect, useRef } from 'react'; import * as mapboxgl from 'mapbox-gl/esm'; import 'mapbox-gl/dist/mapbox-gl.css'; const MapboxExample = () => { const mapContainerRef = useRef(null); const mapRef = useRef(null); // State const [selectedFeature, setSelectedFeature] = useState(null); // Refs to track the latest state values const selectedFeatureRef = useRef(null); useEffect(() => { const map = (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, center: [-98, 38.88], maxZoom: 5, minZoom: 1, zoom: 3 })); map.on('style.load', () => { map.addSource('airports', { type: 'vector', url: 'mapbox://mapbox.04w69w5j', promoteId: 'abbrev' }); map.addLayer({ id: 'airport', source: 'airports', 'source-layer': 'ne_10m_airports', type: 'circle', paint: { 'circle-color': [ 'case', ['boolean', ['feature-state', 'selected'], false], '#f00', '#4264fb' ], 'circle-radius': [ 'case', ['boolean', ['feature-state', 'selected'], false], 6, ['boolean', ['feature-state', 'highlight'], false], 6, 4 ], 'circle-stroke-width': 2, 'circle-stroke-color': '#ffffff' } }); // Clicking on a feature will highlight it and display its properties in the card map.addInteraction('click', { type: 'click', target: { layerId: 'airport' }, handler: ({ feature }) => { if (selectedFeatureRef.current) { map.setFeatureState(selectedFeatureRef.current, { selected: false }); } map.setFeatureState(feature, { selected: true }); setSelectedFeature(feature); } }); // Clicking on the map will deselect the selected feature map.addInteraction('map-click', { type: 'click', handler: () => { if (selectedFeatureRef.current) { map.setFeatureState(selectedFeatureRef.current, { selected: false }); setSelectedFeature(null); } } }); // Hovering over a feature will highlight it map.addInteraction('mouseenter', { type: 'mouseenter', target: { layerId: 'airport' }, handler: ({ feature }) => { map.setFeatureState(feature, { highlight: true }); map.getCanvas().style.cursor = 'pointer'; } }); // Moving the mouse away from a feature will remove the highlight map.addInteraction('mouseleave', { type: 'mouseleave', target: { layerId: 'airport' }, handler: ({ feature }) => { map.setFeatureState(feature, { highlight: false }); map.getCanvas().style.cursor = ''; return false; } }); }); return () => map.remove(); }, []); // Sync Ref with State useEffect(() => { selectedFeatureRef.current = selectedFeature; }, [selectedFeature]); return (
{selectedFeature && (
${selectedFeature.properties.name}
{Object.entries(selectedFeature.properties).map(([key, value]) => (
  • {key}: {value.toString()}
    • ))}
    )}
    ); }; export default MapboxExample; ```