MapLibre GL JS

Show an Isochrone in MapLibre GL JS

On this page

This example shows the area you can reach on foot within 10 minutes from a point in Vienna. It uses the Isochrone Control, the Maptoolkit plugin for MapLibre GL JS that requests the polygon from the Isochrone API and draws it. Drag the marker to a new point, or drag the icon in the bottom-right corner onto the map, and the area is calculated again.

import * as maplibregl from "maplibre-gl";
    import { IsochroneControl } from "https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-isochrone-control@1.0.1/dist/maplibre-isochrone-control.js";
    import { LogoControl } from "https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.1.2/dist/maplibre-logo-control.js";

    const API_KEY = "YOUR_API_KEY";

    const map = new maplibregl.Map({
      container: "map",
      attributionControl: { compact: false },
      style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
      center: [16.372182, 48.208266],
      zoom: 14,
    });

    // The control calls the Isochrone API with its own key option.
    const isochrone = new IsochroneControl({
      apiKey: API_KEY,
      routingProfile: "foot",
      timeLimit: 10,
    });
    map.addControl(isochrone);

    // Show an area right away instead of waiting for the reader to drop the marker.
    map.on("load", () => {
      isochrone.addToMap({ lng: 16.372493, lat: 48.20883 });
    });

    map.addControl(new LogoControl({ variant: "com" }));

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- MapLibre GL JS 6 is an ES module. The import map tells the browser
       where to load "maplibre-gl" from. -->
  <script type="importmap">
    {
      "imports": {
        "maplibre-gl": "https://cdn.jsdelivr.net/npm/maplibre-gl@6.16.0/dist/maplibre-gl.mjs"
      }
    }
  </script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@6.16.0/dist/maplibre-gl.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-isochrone-control@1.0.1/dist/maplibre-isochrone-control.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.1.2/dist/maplibre-logo-control.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 type="module">
    import * as maplibregl from "maplibre-gl";
    import { IsochroneControl } from "https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-isochrone-control@1.0.1/dist/maplibre-isochrone-control.js";
    import { LogoControl } from "https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.1.2/dist/maplibre-logo-control.js";

    const API_KEY = "YOUR_API_KEY";

    const map = new maplibregl.Map({
      container: "map",
      attributionControl: { compact: false },
      style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
      center: [16.372182, 48.208266],
      zoom: 14,
    });

    // The control calls the Isochrone API with its own key option.
    const isochrone = new IsochroneControl({
      apiKey: API_KEY,
      routingProfile: "foot",
      timeLimit: 10,
    });
    map.addControl(isochrone);

    // Show an area right away instead of waiting for the reader to drop the marker.
    map.on("load", () => {
      isochrone.addToMap({ lng: 16.372493, lat: 48.20883 });
    });

    map.addControl(new LogoControl({ variant: "com" }));
  </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 centered around [16.372493, 48.20883] with an Isochrone for 10 minutes walking time around the center, using MapLibre GL and the Maptoolkit Isochrone Control.

How it works

The control is a client for the Isochrone API. For every point it sends GET https://routing.maptoolkit.net/isochrone with these parameters:

Control option	API parameter	Value in this example
`timeLimit`	`time`	`10` (minutes)
`routingProfile`	`routeType`	`foot`
`apiKey`	`api_key`	your key
the marker	`point`	`lat,lng`

The key in the style URL does not reach the control, so pass it as apiKey too. The control converts the response, a plain array of [lat, lng] pairs, into a polygon and fits the map to it. Every option of the control is on the plugin page.

time is limited to 60 minutes. Above that the API returns 400 with Parameter 'time' must not exceed 60 minutes. A missing or unknown key returns 403. The control does not show these errors on the map: it writes them to the browser console and draws nothing. If no area appears, check the console first.

routeType decides the shape as much as the time does. A 10 minute foot isochrone is a small, round area. The same 10 minutes as car follows the road network outward and is much less round. foot, bike and car are the values the API accepts.

addToMap() sets the first point. Without it the map starts without an area, and the reader has to drag the icon onto the map first. Call it after the map’s load event.

When to call the API yourself

The control shows one area for one point at a time. Call the Isochrone API directly when you need the polygon as data:

Several travel times at once, drawn as bands from dark to light.
Testing your own locations against the area, for example which stores or stops fall inside it.
Calculating areas on a server, where there is no map.

For “how do I get there” rather than “how far can I get”, the Routing API uses the same key.