Create a Hover Effect

Feature state in Maptoolkit Maps JS lets you attach arbitrary key-value data to individual features and reference that data in paint expressions, without modifying the source GeoJSON. This example sets a hover boolean on the feature under the cursor and uses it in a fill-color expression to change the layer color. Use feature state for hover highlights, selection states, or any interaction that needs to change the appearance of specific features at runtime.

const API_KEY = 'YOUR_API_KEY';

    const map = new maptoolkit.Map({
        container: 'map',
        apiKey: API_KEY,
        style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
        center: [-100.486052, 37.830348],
        zoom: 2,
        attributionControl: { compact: false }
    });

    map.addControl(new maptoolkit.NavigationControl(), 'top-right');

    let hoveredStateId = null;

    map.on('load', () => {
        map.addSource('states', {
            type: 'geojson',
            data: 'https://maplibre.org/maplibre-gl-js/docs/assets/us_states.geojson'
        });

        map.addLayer({
            id: 'state-fills',
            type: 'fill',
            source: 'states',
            paint: {
                'fill-color': '#627BC1',
                'fill-opacity': [
                    'case',
                    ['boolean', ['feature-state', 'hover'], false],
                    1,
                    0.5
                ]
            }
        });

        map.addLayer({
            id: 'state-borders',
            type: 'line',
            source: 'states',
            paint: {
                'line-color': '#627BC1',
                'line-width': 2
            }
        });

        map.on('mousemove', 'state-fills', (e) => {
            if (e.features.length > 0) {
                if (hoveredStateId !== null) {
                    map.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: false });
                }
                hoveredStateId = e.features[0].id;
                map.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: true });
            }
        });

        map.on('mouseleave', 'state-fills', () => {
            if (hoveredStateId !== null) {
                map.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: false });
            }
            hoveredStateId = null;
        });
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Create a Hover Effect - Maptoolkit Maps JS</title>
    <meta property="og:description" content="Highlight a feature when the user hovers over it using feature state." />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/@maptoolkit/[email protected]/dist/maptoolkit.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@maptoolkit/[email protected]/dist/maptoolkit.css" />
    <style>
        html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
        #map { width: 100%; height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const API_KEY = 'YOUR_API_KEY';

    const map = new maptoolkit.Map({
        container: 'map',
        apiKey: API_KEY,
        style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
        center: [-100.486052, 37.830348],
        zoom: 2,
        attributionControl: { compact: false }
    });

    map.addControl(new maptoolkit.NavigationControl(), 'top-right');

    let hoveredStateId = null;

    map.on('load', () => {
        map.addSource('states', {
            type: 'geojson',
            data: 'https://maplibre.org/maplibre-gl-js/docs/assets/us_states.geojson'
        });

        map.addLayer({
            id: 'state-fills',
            type: 'fill',
            source: 'states',
            paint: {
                'fill-color': '#627BC1',
                'fill-opacity': [
                    'case',
                    ['boolean', ['feature-state', 'hover'], false],
                    1,
                    0.5
                ]
            }
        });

        map.addLayer({
            id: 'state-borders',
            type: 'line',
            source: 'states',
            paint: {
                'line-color': '#627BC1',
                'line-width': 2
            }
        });

        map.on('mousemove', 'state-fills', (e) => {
            if (e.features.length > 0) {
                if (hoveredStateId !== null) {
                    map.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: false });
                }
                hoveredStateId = e.features[0].id;
                map.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: true });
            }
        });

        map.on('mouseleave', 'state-fills', () => {
            if (hoveredStateId !== null) {
                map.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: false });
            }
            hoveredStateId = null;
        });
    });
</script>
</body>
</html>

Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.

Use the Maptoolkit Connector. Create an interactive map with zoom level 2, centered around [-100.486, 37.830]. Display US states (from https://maplibre.org/maplibre-gl-js/docs/assets/us_states.geojson) with a hover effect that highlights the state under the cursor.

Create a Heatmap Layer Create a Time Slider

Create a Hover Effect

Related Examples