Maptoolkit Maps JS

Add a Draggable Isochrone in Maptoolkit Maps JS

Maps JS includes a built-in IsochroneControl that handles the API call, polygon rendering, and drag interaction automatically. Add it to the map and drag the pin to recalculate the reachable area.

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

    map.addControl(new maptoolkit.NavigationControl(), 'top-right');
    map.addControl(new maptoolkit.IsochroneControl({ range: 10, type: 'foot', fitBounds: true }), 'bottom-right');

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Isochrone - Maptoolkit Maps JS</title>
    <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%; }
    </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: [16.372182, 48.208266],
        zoom: 14,
        attributionControl: { compact: false }
    });

    map.addControl(new maptoolkit.NavigationControl(), 'top-right');
    map.addControl(new maptoolkit.IsochroneControl({ range: 10, type: 'foot', fitBounds: true }), 'bottom-right');
</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 a map centered on Vienna with a 10-minute walking isochrone control.

How it works

This is the shortest of the three isochrone examples because IsochroneControl does the work the others do by hand: it calls the service, converts the response into GeoJSON and adds the fill and outline layers for you.

range: 10 is the travel time in minutes, capped at 60 by the service. type: 'foot' is the travel mode, and it changes the shape as much as the time does: the same 10 minutes as car follows the road network outward and is much less round.

fitBounds: true zooms the map to the polygon once it arrives. Without it the isochrone may be drawn outside the current view, which looks like nothing happened.

If you need the polygon itself rather than a drawn layer, call the endpoint directly as the Leaflet and MapLibre examples do.

Next steps

range and type are the dials that change the answer, and the control is happy being reconfigured, so showing five, ten and twenty minutes at once is a small step from here.

When you need the shape rather than the drawing, call the endpoint directly and keep the polygon: testing which of your own locations fall inside it is a point-in-polygon check, and that is usually the point of drawing it at all. The Routing API answers the other half, how to actually get there.

MapLibre GL JS