---
title: "Create a hover effect | JavaScript maps SDK"
description: "Create per-feature hover effect using events and states."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Create a hover effect
Create a hover effect for individual map features by utilizing events and [feature states](https://docs.maptiler.com/sdk-js/api/map/#map#setfeaturestate). This allows you to highlight specific elements on the map when they are hovered over by the user.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map',
style: MapStyle.STREETS,
center: [-100.486052, 37.830348],
zoom: 2
});
let hoveredStateId = null;
map.on('load', function () {
map.addSource('states', {
'type': 'geojson',
'data':
'https://docs.maptiler.com/sdk-js/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;
});
});
```
#### index.html
```html
Create a hover effect | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Create a hover effect
```
## Related examples
### [Display a popup on hover](https://docs.maptiler.com/sdk-js/examples/popup-on-hover/)
Examples
Show a popup when hovering over a custom marker.
### [Get features under the mouse pointer](https://docs.maptiler.com/sdk-js/examples/queryrenderedfeatures/)
Examples
Show properties of hovered map elements with queryRenderedFeatures.
### [Interactive choropleth map](https://docs.maptiler.com/sdk-js/examples/interactive-choropleth/)
Examples
Use events and feature states to create a interactive choropleth map.