Leaflet: draw GeoJSON polygon

Get an isochrone and draw it with Leaflet

by Geoapify

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css">
<div id="my-map"></div>

CSS

html,
body,
#my-map {
  width: 100%;
  height: 100%;
  margin: 0;
}

JavaScript

// Leaflet has native support for raster maps, So you can create a map with a few commands only!

// The Leaflet map Object
var map = L.map('my-map').setView([39.9782041, -75.1948359], 10);
   
// The API Key provided is restricted to JSFiddle website
// Get your own API Key on https://myprojects.geoapify.com
var myAPIKey = "6dc7fb95a3b246cfa0f3bcef5ce9ed9a";

// Retina displays require different mat tiles quality
var isRetina = L.Browser.retina;

var baseUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey={apiKey}";
var retinaUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}@2x.png?apiKey={apiKey}";

// Add map tiles layer. Set 20 as the maximal zoom and provide map data attribution.
L.tileLayer(isRetina ? retinaUrl : baseUrl, {
    attribution: 'Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | © OpenStreetMap <a href="https://www.openstreetmap.org/copyright" target="_blank">contributors</a>',
    apiKey: myAPIKey,
    maxZoom: 20,
    id: 'osm-bright',
}).addTo(map);

//generate an 30 min bicycle isochrone from Philadelphia, United States of America
fetch(`https://api.geoapify.com/v1/isoline?lat=39.9782041&lon=-75.1948359&type=distance&mode=bicycle&range=30000&apiKey=${myAPIKey}`).then(data => data.json()).then(geoJSONFeatures => {
	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);
});