Create a Draggable Marker

Create a Draggable Marker in Maptoolkit Maps JS

A draggable marker in Maptoolkit Maps JS is created by passing draggable: true to the Marker constructor, which enables the drag interaction without any additional event handling. You can listen to the dragend event to read the marker’s new position using getLngLat. Use draggable markers in address pickers, delivery drop-off selectors, or any form where users need to choose a geographic location by dragging a pin on the map.

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: 12,
        attributionControl: { compact: false }
    });

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

    const marker = new maptoolkit.Marker({ draggable: true })
        .setLngLat([11.39085, 47.27574])
        .addTo(map);

    function updateCoords() {
        const { lng, lat } = marker.getLngLat();
        document.getElementById('coords').textContent = `${lng.toFixed(5)}, ${lat.toFixed(5)}`;
    }

    marker.on('drag', updateCoords);

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Create a Draggable Marker - Maptoolkit Maps JS</title>
    <meta property="og:description" content="Create a marker that the user can drag to a new location." />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.css" />
    <style>
        html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
        #map { width: 100%; height: 100%; }
        #coords {
            position: absolute;
            bottom: 30px;
            left: 10px;
            background: white;
            padding: 8px 14px;
            border-radius: .4rem;
            font-family: sans-serif;
            font-size: 13px;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div id="coords">Drag the marker</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: 12,
        attributionControl: { compact: false }
    });

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

    const marker = new maptoolkit.Marker({ draggable: true })
        .setLngLat([11.39085, 47.27574])
        .addTo(map);

    function updateCoords() {
        const { lng, lat } = marker.getLngLat();
        document.getElementById('coords').textContent = `${lng.toFixed(5)}, ${lat.toFixed(5)}`;
    }

    marker.on('drag', updateCoords);
</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 12, centered around [11.39085, 47.27574]. Place a draggable marker at the center that displays its coordinates, updating as it is dragged.

How it works

draggable: true is the whole feature. The library handles pointer capture, the cursor and the map’s own pan behaviour, so dragging the marker does not also drag the map.

getLngLat() returns the current position as an object with lng and lat, not an array, which is worth knowing when you pass it on to something expecting [lng, lat].

The event choice is a trade-off. drag fires continuously while the pointer moves, which suits a live coordinate readout; dragend fires once on release, which is what you want before firing a request. Wiring a geocoding or routing call to drag sends one request per frame.

toFixed(5) is about five decimal places, roughly a meter. More digits imply precision the interaction does not have.

Next steps

A dragged pin usually needs to answer a question when it lands. The Geocoding API turns the dropped coordinate into an address, which is the standard “confirm your location” flow, and the Isochrone API turns it into the area reachable from that point.

Constraining the drag is the other common requirement: snapping to the road network, rejecting a position outside a service area, or validating against your own data before accepting it.

Check if WebGL is Supported Create a Draggable Point

Create a Draggable Marker in Maptoolkit Maps JS

How it works

Next steps

Related Examples