Leaflet GeoJSON Isochrones

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" >
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js" crossorigin=""></script>
    <script src="https://releases.targomo.com/core/latest.min.js" ></script>
    <script src="https://releases.targomo.com/leaflet/latest-full.min.js"></script>
    <style>
        body,
        html {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 100%;
        }

    </style>
</head>

<body>
    <!--  where the map will live  -->
    <div id="map"></div>
    <script>
        // create targomo client
        const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__');
        
        // Create a Leaflet map with basemap, set the center of the map to the city center of Berlin.
        const tileLayer = new tgm.leaflet.TgmLeafletTileLayer(client, 'Light');
        var map = L.map('map', {
            layers: [tileLayer],
            scrollWheelZoom: false
        }).setView([52.52, 13.405], 14);
        const attributionText = '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>';
        map.attributionControl.addAttribution(attributionText);
        
        // Define a source location which is passed into the Targomo polygon service.
        const sources = [{ id: 1, lat: 52.52, lng: 13.405 }];
        
        // Add markers for the sources on the map.
        sources.forEach(source => {
            L.marker([source.lat, source.lng]).addTo(map)
        });
        
        // Set the traveloptions and options for the polygon service here. The `serializer` property tells the Targomo services to return geojson.
        const options = {
            travelType: 'walk',
            travelEdgeWeights: [600, 1200],
            srid: 4326,
            buffer: 0.0005,
            serializer: 'geojson'
        };
        
        // Request polygons once immediately on page load and immediately add it to the map using the default geojson map layer.
        // Check out https://leafletjs.com/examples/geojson/ for more information on how to style the geojson in Leaflet.
        client.polygons.fetch(sources, options).then((result) => {
            L.geoJson(result, {
            }).addTo(map);
        });
    </script>
</body>
content_copy
Copied to clipboard