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="" type="text/javascript"></script>
    <script src="https://releases.targomo.com/core/latest.min.js"></script>
    <script src="https://releases.targomo.com/leaflet/latest-full.min.js"></script>
    <script src="../_shared/tgm-utils.js"></script>

    <style>
        body, html {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        
    </style>
</head>
<body>
    
    <div id="map"></div>
    <script>// Initialize map with TgmExampleUtils
        const { client, map } = TgmExampleUtils.initLeafletMap({
            ...TgmExampleUtils.PRESETS.berlin,
            zoom: 14
        });
        
        // 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 using TgmExampleUtils
        sources.forEach(source => {
            TgmExampleUtils.createMarker([source.lat, source.lng], 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>
</html>
content_copy
Copied to clipboard