Get Features Under the Mouse Pointer

map.queryRenderedFeatures in Maptoolkit Maps JS returns all features from any rendered layer that intersect a given point or bounding box on screen. By calling it on each mousemove event with the cursor position, you can display live feature data for whatever the user points at. Use this to build inspector panels, map debuggers, or hover tooltips that show properties from any layer without attaching separate event listeners to each one.

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: [11.39085, 47.27574],
        zoom: 14,
        attributionControl: { compact: false }
    });

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

    map.on('mousemove', (e) => {
        const features = map.queryRenderedFeatures(e.point);
        const featuresEl = document.getElementById('features');
        if (features.length === 0) {
            featuresEl.innerHTML = '<strong>Features under cursor:</strong><br>None';
            return;
        }
        const info = features.slice(0, 5).map(f =>
            `<div style="border-top:1px solid #eee;margin-top:4px;padding-top:4px;"><em>${f.layer.id}</em> (${f.layer.type})</div>`
        ).join('');
        featuresEl.innerHTML = `<strong>Features under cursor:</strong>${info}`;
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Get Features Under the Mouse Pointer - Maptoolkit Maps JS</title>
    <meta property="og:description" content="Query and display map features under the mouse cursor using queryRenderedFeatures." />
    <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%; }
        #features {
            position: absolute;
            top: 10px;
            right: 10px;
            background: white;
            padding: 10px 14px;
            border-radius: .4rem;
            font-family: sans-serif;
            font-size: 12px;
            max-width: 240px;
            max-height: 300px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div id="features"><strong>Features under cursor:</strong><br>Move the mouse over the 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: [11.39085, 47.27574],
        zoom: 14,
        attributionControl: { compact: false }
    });

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

    map.on('mousemove', (e) => {
        const features = map.queryRenderedFeatures(e.point);
        const featuresEl = document.getElementById('features');
        if (features.length === 0) {
            featuresEl.innerHTML = '<strong>Features under cursor:</strong><br>None';
            return;
        }
        const info = features.slice(0, 5).map(f =>
            `<div style="border-top:1px solid #eee;margin-top:4px;padding-top:4px;"><em>${f.layer.id}</em> (${f.layer.type})</div>`
        ).join('');
        featuresEl.innerHTML = `<strong>Features under cursor:</strong>${info}`;
    });
</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 14, centered around [11.39085, 47.27574]. Display a panel showing map features under the mouse cursor using queryRenderedFeatures.

Get Coordinates of the Mouse Pointer Jump to a Series of Locations

Get Features Under the Mouse Pointer

Related Examples