Isochrone Polygons vs Radius

Why are isochrones better than radii? Compare bike isochrone vs radius in Stockholm.
<!DOCTYPE html>
<html>
<head>
    <!--  Include mapboxgl javascript and css -->
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.css" rel="stylesheet">
    <!-- Include turf for geographic analysis -->
    <script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
    
    <!--  Include targomo core -->
    <script src="https://releases.targomo.com/core/latest.min.js"></script>
    <style>
        body, html {
            margin: 0; width: 100%; height: 100%;
        }
        #map {
            width: 100%; height: 100%;
        }
        .legend {
            position: absolute; padding: 8px;
            top: 10px; left: 10px;
            font-family: Helvetica, Arial, Sans-Serif;
            background: white; border-radius: 4px;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
        }
        .legend > div { display: flex; align-items: center; }
        .badge {
            width: 11px; height: 11px; 
            margin-right: 5px; opacity: 0.5;
        }
    </style>
</head><body>
    <!--  where the map will live  -->
    <div id="map"></div>
    <div class="legend">
        <div><span style="background:#7570b3" class="badge"></span>reachable by both</div>
        <div><span style="background:#1b9e77" class="badge"></span>missed by radius</div>
        <div><span style="background:#d95f02" class="badge"></span>not actually reachable</div>
    </div>
    <script>
        // create targomo client
        const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__')
        // define a pair of coordinates, where the map should be centered
        // and should serve a the source for polygonization
        const lnglat = [ 18.097101, 59.324949 ];
        const travelTime = [900];
        
        const attributionText = `<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>`;
        
        // add the map and set the initial center to berlin
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'https://api.maptiler.com/maps/positron/style.json?key=__your_maptiler_api_key__',
            zoom: 12,
            center: lnglat,
            attributionControl: false
        })
            .addControl(new mapboxgl.NavigationControl())
            .addControl(new mapboxgl.AttributionControl({ compact: true, customAttribution: attributionText }));
        
        // disable scroll zoom
        map.scrollZoom.disable();
        
        // you need to define some options for the polygon service
        const options = {
            travelType: 'bike',
            travelEdgeWeights: travelTime,
            maxEdgeWeight: 1800,
            edgeWeight: 'time',
            srid: 4326, simplify: 50,
            serializer: 'geojson',
            buffer: 0.002, quadrantSegments: 8
        };
        
        const sources = [
            { lat: lnglat[1], lng: lnglat[0], id: 1 }
        ]
        
        map.on('load', () => {
            const marker = new mapboxgl.Marker()
                .setLngLat(lnglat).addTo(map);
            
            const radius = 2; // 2km
            const circle = turf.circle(lnglat, radius);
        
            // call the Targomo service
            client.polygons.fetch(sources, options).then((geojsonPolygons) => {
                const isochrone = geojsonPolygons.features[0]
        
                // isochrone only
                const diff1 = turf.difference(isochrone, circle);
                map.addLayer({
                    'id': 'diff1',
                    'type': 'fill',
                    'source': {
                        'type': 'geojson',
                        'data': diff1
                    },
                    'layout': {},
                    'paint': {
                        'fill-color': '#1b9e77',
                        'fill-antialias': true,
                        'fill-opacity': .5
                    }
                }, 'place_other');
        
                // radius only
                const diff2 = turf.difference(circle, isochrone);
                map.addLayer({
                    'id': 'diff2',
                    'type': 'fill',
                    'source': {
                        'type': 'geojson',
                        'data': diff2
                    },
                    'layout': {},
                    'paint': {
                        'fill-color': '#d95f02',
                        'fill-antialias': true,
                        'fill-opacity': .5
                    }
                }, 'place_other');
        
                // reachable by both
                const intersection = turf.intersect(circle, isochrone);
                map.addLayer({
                    'id': 'intersection',
                    'type': 'fill',
                    'source': {
                        'type': 'geojson',
                        'data': intersection
                    },
                    'layout': {},
                    'paint': {
                        'fill-color': '#7570b3',
                        'fill-antialias': true,
                        'fill-opacity': .5
                    }
                }, 'place_other');
            });
        })
    </script>
</body>
</html>
content_copy
Copied to clipboard