Adding Isochrones to a Leaflet Map with JavaScript
Tags: javascript, leaflet, webdev, tutorial
Published: 2022-04-25 13:25:04

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](https://leafletjs.com/) and  the [Geoapify Isolines API](https://www.geoapify.com/isoline-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:

| Mode | Description |
|---|---|
| `drive` | Cars under 3.5 tons and of a height not exceeding 1.6 meters |
| `light_truck` | Small delivery trucks or campers under 3.5 tonnes |
| `truck` | Trucks up to 22 tonnes |
| `bus` | Passenger buses |
| `scooter` | Motorized scooters |
| `bicycle` | Bicycles |
| `walk` | Walking |

For information on more modes of transportation supported by Isolines, please visit the [Isolines documentation page](https://apidocs.geoapify.com/docs/isolines/).

With Geoapify, you need to send an HTTP Get request to the Isoline API endpoint. Here is an example of an API URL:
```bash
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:

```javascript
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:

![30-min driving isochrone from 210 Baker Street NW, Atlanta, GA 30313, United States of America](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4n1tlvr12agnobp6w3v.png)

The API returns a [GeoJSON object](https://en.wikipedia.org/wiki/GeoJSON), 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()](https://leafletjs.com/reference.html#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:

```javascript
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](https://leafletjs.com/reference.html#path-option) 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:

{% embed https://jsfiddle.net/Geoapify/5q1b4wmv/ %}

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](https://www.geoapify.com/tutorials/).