Isochrone with Leaflet map

<html>
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <style>
    body { width: 100%; height: 100%; padding: 0; margin: 0; font-family: Arial, sans-serif; }
    #map { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <script>
    // Initialize Leaflet map
    let map = L.map("map").setView([48.208266, 16.372182], 15);
    // Add Maptoolkit tiles as L.tileLayer
    L.tileLayer("https://rtc-cdn.maptoolkit.net/rtc/toursprung-terrain/{z}/{x}/{y}{ratio}.png?api_key=your_api_key", {
      ratio: L.Browser.retina ? "@2x" : "",
      maxZoom: 18,
      attribution:
        "© <a href='https://www.maptoolkit.com' target='_blank'>Toursprung</a> \
        © <a href='https://www.openstreetmap.org/copyright' target='_blank'>OSM</a>",
    }).addTo(map);
    // Get isochrone from Routing API
    let point = [48.208830, 16.372493];
    let url = new URL("https://routing.maptoolkit.net/isochrone");
    url.searchParams.append("time", 10); // minutes
    url.searchParams.append("point", point.join(","));
    url.searchParams.append("routeType", "foot");
    url.searchParams.append("api_key", "your_api_key");
    fetch(url)
      .then((r) => r.json())
      .then((polygon) => {
        // Add isochrone polygon to map
        new L.Polygon(polygon, { interactive: false, color: "#2a3561", fillOpacity: 0.2, weight: 2 }).addTo(map);
        // Add isochrone marker to map
        new L.Marker(point, {
          interactive: false,
          icon: new L.Icon({
            iconUrl: "https://static.maptoolkit.net/sprites/toursprung/marker.svg",
            iconSize: [30, 29],
            iconAnchor: [15, 29],
          }),
        }).addTo(map).bindPopup(L.popup({ offset: [0, -20] }).setContent("Within a 10 minute walking distance")).openPopup();
      });
  </script>
</body>
</html>