// 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); });
<div id="my-map"></div>
html, body, #my-map { width: 100%; height: 100%; margin: 0; }