JavaScript Tutorial to draw Isolines with Leaflet

Lines that trace identical values between points are called isolines:

• Isochrones connect points that can be reached within a given time from a location;
• Isodistances describe lines of equal distance from a certain point, making it easy to find locations within a certain radius.

Isoline maps are widely used for analyzing travel time and reachability. For example, businesses can optimize their employees' commute time, analyze the opportunities of a location and predict how urban changes influence travel time.

In this tutorial, we will show you how to use Geoapify Isoline API to calculate isochrones and isodistances and draw them with Leaflet - JavaScript map library.

Isoline API: get isochrones and isodistances

Geoapify Isolines API lets you calculate up to 60-minute isochrones and ** up to 60-kilometer** isodistances. If you need to get larger isolines, please contact us.

You can get isolines with a simple HTTP Get request. Sign up for an account to get an API key and build isolines with Geoapify.

Here are some examples of URLs:

30-minute drive Isochrone (8104 Weiningen, Switzerland)

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

30 kilometers biking Isodistance ( Philadelphia, United States of America)

https://api.geoapify.com/v1/isoline?lat=39.9782041&lon=-75.1948359&type=distance&mode=bicycle&range=30000&apiKey=YOUR_API_KEY

Type parameter defines the type (time or distance) of isoline, while range parameter defines the size (seconds for isochrones, meters for isodistances). The mode parameter defines the type of transportation - drive, truck, walk, bicycle, and more.

Here is an example showing how to send an HTTP Get request in Javascript:

//generate an 30 min transit isochrone from Munich center
fetch(`https://api.geoapify.com/v1/isoline?lat=48.13736145&lon=11.574172059316222&type=time&mode=transit&range=1800&apiKey=YOUR_API_KEY`).then(data => data.json()).then(geoJSONFeatures => {
  console.log(geoJSONFeatures);
});

Read more about API parameters on the Isoline API documentation page.

Draw isochrone/isodistance with Leaflet

The Isoline API can return GeoJSON responses. Working with GeoJSONs using Leaflet is easy to do for various purposes. The Leaflet GeoJSON layer object enables visualization of GeoJSONs on the map.

This code sample shows how to get isochrone and draw it as a GeoJSON layer on a map:

const myAPIKey = 'YOUR_API_KEY';
let myGeoJSONLayer;

fetch(`https://api.geoapify.com/v1/isoline?lat=48.13736145&lon=11.574172059316222&type=time&mode=transit&range=1800&apiKey=${myAPIKey}`).then(data => data.json()).then(geoJSONFeatures => {
	myGeoJSONLayer = L.geoJSON(geoJSONFeatures, {
      style: (feature) => {
        return {
          stroke: true,
          color: '#9933ff',
          weight: 2,
          opacity: 0.7,
          fill: true,
          fillColor: '#7300e6',
          fillOpacity: 0.15,
          smoothFactor: 0.5,
          interactive: false
        };
      }
    });

    myGeoJSONLayer.addTo(myLeafletMap);
});

You can remove GeoJSON with the .remove() method just as you would a normal layer on Leaflet:

myGeoJSONLayer.remove();

Looking for a way to get an isoline on a Leaflet map? Look at this simple code sample that shows how to get and draw an isoline (isodistance):

Styling Isolines in Leaflet

You can choose to display isolines with a custom color, opacity, and stroke. To do so, provide the style function as a parameter when creating the GeoJSON layer:

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);

Here are some GeoJSON styling options that might be helpful to you:

You can find all the styling options for GeoJSON on the Leaflet documentation page.

Draw Isoline as a hole

You can display the isoline as an empty polygon on the map. This will make the map's isochrone or isodistance boundaries clearer for users, giving them a clear view of the area that is reachable from a location at a given time or a given distance.

The solution to this problem is straightforward. First, you create a polygon covering the whole map and add the isoline as a polygon hole:

//collect polygons from isoline GeoJSON features
const holePolygons = geoJSONFeatures.features[0].geometry.coordinates.map(poly => poly[0]);
const mapCover = [[-179.99, 89.99], [-179.99, 0], [-179.99, -89.99], [0, -89.99], [179.99, -89.99], [179.99, 0], [179.99, 89.99], [0, 89.99], [-179.99, 89.99]];

// create a new GeoJSON
const geoJSONPolygon = {
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
    "coordinates": [mapCover, ...holePolygons]
  }
}

// add the GeoJSON to the Leaflet map
L.geoJSON(geoJSONPolygon, {
  stroke: true,
  color: '#000',
  weight: 2,
  opacity: 0.7,
  fill: true,
  fillColor: '#000',
  fillOpacity: 0.3,
  smoothFactor: 0.5,
  interactive: false
}).addTo(map);

Here is some code that illustrates an isoline as a hole:

Conclusion

If you are looking for a way to draw isolines on your site or application, you can use the API offered by Geoapify. To achieve this result, simply follow the steps that have been described in this tutorial.

You can try isolines in our Playground and then implement your ideas on the Leaflet GeoJson layers. For example, as there are many features and options available, you'll undoubtedly find the ones you need both for companies and customers.

You can start working with Geoapify for Free. Just create an API key and start using it to develop isodistances or isochrones. You can upgrade at any time by choosing one of our Pricing Plans. Whether you need a more complex route or a complex map with isolines, we will find the best solution for you.