Draw a GeoJSON polygon (isoline) as with Leaflet

Geoapify APIs return results in GeoJSON format which is natively supported by most of the client-side map libraries. Our Isoline API return a GeoJSON.FeatureCollection with Features with geometry type MultiPolygon.

In this code sample, we would like to show how to draw a GeoJSON polygon object with Leaflet. The full version of the code sample you can find on JSFiddle.

1. Get an isoline polygon

Geoapify Isoline API works via HTTP Get request and return JSON object as a result. You will require an API key to use the API in your project. Register and get an API key for Free - here!

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) => console.log(geoJSONFeatures));

2. Visualize GeoJSON object with Leaflet

Use L.geoJSON() function to visualize the isoline:

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,
    };
  },
}).addTo(map);