Isochrone Polygons vs Radius
Why are isochrones better than radii? Compare bike isochrone vs radius in Stockholm.
<!DOCTYPE html>
<html>
<head>
<!-- Include maplibregl javascript and css -->
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-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]
// add the map and set the initial center to berlin
const map = new maplibregl.Map({
container: 'map',
style: client.basemaps.getGLStyleURL("Light"),
zoom: 12,
center: lnglat
}).addControl(new maplibregl.NavigationControl())
// 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 maplibregl.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,
attribution: '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">© Targomo</a>'
},
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>Copied to clipboard
