Adding Isochrones to a Leaflet Map with JavaScript

An isochrone or reachability map represents an area that you can travel to within a given time from a particular location. For example, isochrone can show what you can reach within 30 minutes from your home. For instance, isochrone maps show you what you can get within 30 minutes from home.

Isochrones are increasingly used as an analytics tool in real estate, travel & tourism, urban planning, and other location-aware digital products. Here are some examples of isochrone implementation:

• Find reachable areas for taxi services;
• Checking coverage of networks;
• Estimating connectivity and reachability of places.

This tutorial demonstrates how to add isochrones to a JavaScript application using the Leaflet map library and the Geoapify Isolines API.

Generating an Isochrone With An API

To calculate an isochrone, you need to know where you are traveling from, how you are traveling, and how much time you want to spend getting there.

Your location is located by latitude and longitude coordinates, the travel time is measured in seconds, and the mode of transportation. The most popular modes of transportation are:

For information on more modes of transportation supported by Isolines, please visit the Isolines documentation page.

With Geoapify, you need to send an HTTP Get request to the Isoline API endpoint. Here is an example of an API URL:

https://api.geoapify.com/v1/isoline?lat=33.761758&lon=-84.394172&type=time&mode=drive&range=1800&apiKey=YOUR_API_KEY

This is how you call the API with the JavaScript fetch() function:

fetch(`https://api.geoapify.com/v1/isoline?lat=33.761758&lon=-84.394172&type=time&mode=drive&range=1800&apiKey=${myAPIKey}`)
.then(data => data.json())
.then(geoJSONFeatures => {
  // add isochrone as GeoJSON here
});

Here is a result isochrone generated by the URL above:

The API returns a GeoJSON object, which is supported from a box by most map libraries including the Leaflet library.

JavaScript to add Isochrone to a Leaflet Map

To add an isochrone as a GeoJSON to your Leaflet map, you can use the L.geoJSON() method. The method accepts an Isochrone object and options that specify the visualization and data transformation.

Here is code sample demonstrating how to add an isochrone object and style it:

L.geoJSON(geoJSONFeatures, {
  style: (feature) => {
    return {
      stroke: true,
      color: '#9933ff',
      weight: 2,
      opacity: 0.7,
      fill: true,
      fillColor: '#333399',
      fillOpacity: 0.15,
      smoothFactor: 0.5,
      interactive: false
    };
  }
}).addTo(map);

Please see the Leaflet Documentation page for more information on GeoJSON layer visualization options.

JSFiddle code sample

To help you add isochrones to your app or website, we've prepared a code sample on JSFiddle:

Here is a code sample that shows you how to create a Leaflet map, get an isochrone with API, and visualize the it on the map.

To learn more about maps and spatial data, check out Geoapify's tutorials.