> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt) # Add interactions to a Mapbox Standard Style This example demonstrates how to use [`addInteraction`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#addinteraction) with Mapbox Standard Style's built-in [Featuresets](https://docs.mapbox.com/map-styles/standard/api/#featuresets) and [configuration properties](https://docs.mapbox.com/map-styles/standard/api/#configuration-properties). The code below demonstrates how to: - Highlight place labels on hover using the `highlight` feature state and `colorPlaceLabelHighlight` configuration property - Select place labels on click using the `select` feature state and `colorPlaceLabelSelect` configuration property > Example code: **JavaScript** ```html Add interactions to a Mapbox Standard Style
``` **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 [selectedPlace, setSelectedPlace] = useState(null); const [hoveredPlace, setHoveredPlace] = useState(null); // Refs to track the latest state values const selectedPlaceRef = useRef(null); const hoveredPlaceRef = 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: [-74, 40.72], zoom: 12, bearing: 30, style: 'mapbox://styles/mapbox/standard', config: { basemap: { colorPlaceLabelHighlight: 'red', colorPlaceLabelSelect: 'blue' } } })); map.addInteraction('place-click', { type: 'click', target: { featuresetId: 'place-labels', importId: 'basemap' }, handler: ({ feature }) => { if (selectedPlaceRef.current) { map.setFeatureState(selectedPlaceRef.current, { select: false }); } map.setFeatureState(feature, { select: true }); setSelectedPlace(feature); } }); map.addInteraction('place-mouseenter', { type: 'mouseenter', target: { featuresetId: 'place-labels', importId: 'basemap' }, handler: ({ feature }) => { if ( hoveredPlaceRef.current && hoveredPlaceRef.current.id === feature.id ) return; if (hoveredPlaceRef.current) { map.setFeatureState(hoveredPlaceRef.current, { highlight: false }); } map.getCanvas().style.cursor = 'pointer'; map.setFeatureState(feature, { highlight: true }); setHoveredPlace(feature); } }); map.addInteraction('place-mouseleave', { type: 'mouseleave', target: { featuresetId: 'place-labels', importId: 'basemap' }, handler: () => { if (hoveredPlaceRef.current) { map.setFeatureState(hoveredPlaceRef.current, { highlight: false }); setHoveredPlace(null); } map.getCanvas().style.cursor = ''; } }); map.addInteraction('map-click', { type: 'click', handler: () => { if (selectedPlaceRef.current) { map.setFeatureState(selectedPlaceRef.current, { select: false }); setSelectedPlace(null); } } }); return () => map.remove(); }, []); // Sync Refs with State useEffect(() => { selectedPlaceRef.current = selectedPlace; }, [selectedPlace]); useEffect(() => { hoveredPlaceRef.current = hoveredPlace; }, [hoveredPlace]); const displayFeature = selectedPlace || hoveredPlace; return (
{displayFeature && (
featureset: {displayFeature.target.featuresetId}
feature state:{' '} {Object.entries( mapRef.current.getFeatureState(displayFeature) ).map(([key, value]) => (
  • {key}: {value.toString()}
    • ))}
    properties {Object.entries(displayFeature.properties).map(([key, value]) => (
  • {key}: {value.toString()}
    • ))}
    )}
    ); }; export default MapboxExample; ```