Create a hover effect
Use events and feature states to create a per feature hover effect.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Create a hover effect</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script><link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css" rel="stylesheet" /><style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><div id="map"></div><script>goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';var map = new goongjs.Map({container: 'map',style: 'https://tiles.goong.io/assets/goong_map_web.json',center: [-100.486052, 37.830348],zoom: 2});var hoveredStateId = null; map.on('load', function () {map.addSource('states', {'type': 'geojson','data': 'https://docs.goong.io/assets/us_states.geojson'}); // The feature-state dependent fill-opacity expression will render the hover effect// when a feature's hover state is set to true.map.addLayer({'id': 'state-fills','type': 'fill','source': 'states','layout': {},'paint': {'fill-color': '#627BC1','fill-opacity': ['case',['boolean', ['feature-state', 'hover'], false],1,0.5]}}); map.addLayer({'id': 'state-borders','type': 'line','source': 'states','layout': {},'paint': {'line-color': '#627BC1','line-width': 2}}); // When the user moves their mouse over the state-fill layer, we'll update the// feature state for the feature under the mouse.map.on('mousemove', 'state-fills', function (e) {if (e.features.length > 0) {if (hoveredStateId) {map.setFeatureState({ source: 'states', id: hoveredStateId },{ hover: false });}hoveredStateId = e.features[0].id;map.setFeatureState({ source: 'states', id: hoveredStateId },{ hover: true });}}); // When the mouse leaves the state-fill layer, update the feature state of the// previously hovered feature.map.on('mouseleave', 'state-fills', function () {if (hoveredStateId) {map.setFeatureState({ source: 'states', id: hoveredStateId },{ hover: false });}hoveredStateId = null;});});</script> </body></html>