Create a hover effect with Mapbox Promote Id

Using events and feature states to create a per feature hover effect. See the example: https://docs.mapbox.com//mapbox-gl-js/example/hover-styles/

by dollysingh3192

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css">
<!DOCTYPE html>
<html>
<head>
    <title>Mapbox GL JS debug page</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>

<body>
  <div id='map'></div>

</body>
</html>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

//Your accessToken here
mapboxgl.accessToken = 'pk.eyJ1IjoiYWxhbnRnZW8tcHJlc2FsZXMiLCJhIjoiY2pxcmZ1cW1mMG1tcDN4bDVvYzA4MWg5MyJ9.7QtVj_0ythHwEg1n_zaRTQ';

    var map = window.map = new mapboxgl.Map({
        container: 'map',
        zoom: 4,
        center: [-96, 38],
        style: {version: 8, layers: [], sources: {}}
    });

    map.on('load', () => {

        map.addSource('counties', {
            "type": "vector",
            "url": "mapbox://mapbox.82pkq93d",
            "promoteId": {"original": "COUNTY"}
        });

        map.addLayer({
            "id": "counties",
            "type": "fill",
            "source": "counties",
            "source-layer": "original",
            "paint": {
                "fill-outline-color": "black",
                "fill-color": ["case", ["boolean", ["feature-state", "hover"], false], "red", "lightgrey"]
            }
        });

        map.addLayer({
            "id": "counties-borders",
            "type": "line",
            "source": "counties",
            "source-layer": "original",
            "paint": {
                "line-color": ["case", ["boolean", ["feature-state", "hover"], false], "yellow", "green"]
            }
        });

        let selectedCounty = null;

        function resetFeatureState() {
            if (selectedCounty) {
                map.setFeatureState({source: 'counties', sourceLayer: 'original', id: selectedCounty}, {hover: false});
                selectedCounty = null;
            }
        }

        map.on("mouseleave", "counties", () => {
            resetFeatureState();
        });

        map.on("mousemove", "counties", (e) => {
            const feature = e.features[0];
            debugger;

            if (selectedCounty !== feature.id) {
                resetFeatureState();
                map.setFeatureState({source: 'counties', sourceLayer: 'original', id: feature.id}, {hover: true});
                selectedCounty = feature.id;
            }
        });
    });