Multi-Range Isolines with MapLibre GL and Geoapify Isoline API

#webdev #maplibre #javascript #tutorial

An isoline (also called an isochrone or isodistance) is a polygon that defines an area reachable from a point within a given cost — typically time (seconds) or distance (meters). Businesses use isolines for service area maps, delivery coverage zones, or commute analysis.

The Geoapify Isoline API allows you to query isolines programmatically and get the results as GeoJSON. It supports multi-range queries, so instead of sending multiple requests, you can ask for several thresholds (e.g., 5, 10, 15 minutes) in a single API call by passing range=300,600,900. Each feature in the response includes a range property, which makes filtering and visualization straightforward.

In this tutorial, we’ll show how to call the API with multi-range parameters, handle the GeoJSON response, and display the results in MapLibre GL using one source and filtered layers.

👉 You can see the ready-to-use code and live demo on CodePen — Multi-Range Isolines

What are isolines?

An isoline (isochrone or isodistance) is a polygon that shows how far you can travel from a specific point within a given limit.

Time-based isolines: areas reachable in 5, 10, or 15 minutes.
Distance-based isolines: areas reachable within 1, 3, or 5 kilometers.

They help visualize accessibility — for example, how much of a city is covered by a delivery service or which neighborhoods fall within a 20-minute commute.

But often you need to compare several thresholds at once — for example, 15, 20, and 30 minutes. That’s where multi-range isolines come in.

Getting isolines with the API

The Geoapify Isoline API lets you query isolines programmatically and returns the results as GeoJSON.

It supports multi-range queries, so instead of making separate requests for each threshold, you can pass a comma-separated list of values in the range parameter (for example, range=900,1200,1800). This way you get multiple isolines in a single response — ensuring consistency across ranges and reducing the number of API calls.

Here’s an example request that returns 15-, 20-, and 30-minute (that is, 900, 1200, and 1800 seconds) driving isolines around New Orleans:

https://api.geoapify.com/v1/isoline?
  lat=29.967524849999997
  &lon=-90.08681463178436
  &type=time
  &mode=drive
  &range=900,1200,1800
  &apiKey=YOUR_API_KEY

Replace YOUR_API_KEY with your own key.

Each feature in the response includes a range property (e.g., 900, 1200, 1800), which makes it straightforward to filter and style isolines differently when you display them.

API response

A multi-range query returns a standard GeoJSON FeatureCollection. Each feature corresponds to one range value and includes a range property you can use later for filtering and styling.

Here’s a simplified example:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": { "range": 900, "mode": "drive", "type": "time" },
      "geometry": {
        "type": "Polygon",
        "coordinates": [...]
      }
    },
    {
      "type": "Feature",
      "properties": { "range": 1200, "mode": "drive", "type": "time" },
      "geometry": {
        "type": "Polygon",
        "coordinates": [...]
      }
    },
    {
      "type": "Feature",
      "properties": { "range": 1800, "mode": "drive", "type": "time" },
      "geometry": {
        "type": "Polygon",
        "coordinates": [...]
      }
    }
  ]
}

The important part is the range property (in seconds for type=time or meters for type=distance). This makes it easy to apply different colors or styles to each isoline when rendering on a map.

Alright — here’s the next section focused on visualization with MapLibre GL:

Visualizing isolines with MapLibre GL

Once you have the GeoJSON response, you can display it directly in MapLibre GL. The simplest approach is:

Add the Isoline API response as a GeoJSON source.
For each range value, create one fill layer and one line layer.
Use a filter on the range property so each layer only renders the isoline for its value.
Apply different colors for each range to make them easy to compare.

Here’s a minimal example:

// Add GeoJSON source
map.addSource("isolines", {
  type: "geojson",
  data: data // response from the API
});

// Render [900, 1200, 1800] sec isolines
ranges.forEach((range, i) => {
  const hue = Math.round((i / Math.max(ranges.length, 1)) * 300);
  const color = `hsl(${hue} 85% 60%)`;

  map.addLayer({
    id: `fill-${range}`,
    type: "fill",
    source: "isolines",
    paint: {
      "fill-color": color,
      "fill-opacity": 0.3
    },
    filter: ["==", ["get", "range"], range]
  });

  map.addLayer({
    id: `line-${range}`,
    type: "line",
    source: "isolines",
    paint: {
      "line-color": color,
      "line-width": 2
    },
    filter: ["==", ["get", "range"], range]
  });
});

This way, all isolines come from a single source, and each range gets its own style. The larger isolines are drawn first so smaller ones sit on top.

Perfect — here’s how the next section of your article can look, including the CodePen embed:

Full working demo

You’ve now seen how to request multi-range isolines with the Geoapify Isoline API and render them in MapLibre GL. To save time, we prepared a ready-to-use example you can explore directly.

Open it, replace YOUR_API_KEY with your own from Geoapify, and you’ll get interactive multi-range isolines in just a few seconds.

Wrapping up

Multi-range isolines are a simple but powerful way to compare accessibility at different thresholds — whether for delivery coverage, commute analysis, or planning service areas. With the Geoapify Isoline API, you can request multiple ranges in one call and render them efficiently in MapLibre GL using a single source and filtered layers.

👉 Try it yourself:

With just a few lines of code, you can bring multi-range accessibility analysis into your own applications.