Maplibre-GL Basic Isochrones
Use 3d extrusion to overcome polygon overlapping
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/maplibre-gl@5.14.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@5.14.0/dist/maplibre-gl.css" rel="stylesheet">
<script src="https://unpkg.com/@turf/turf@7.2.0/turf.min.js"></script>
<script src="https://releases.targomo.com/core/latest.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>// define a pair of coordinates, where the map should be centered
// and should serve a the source for polygonization
const lnglat = [13.37, 52.51]
const travelTimes = [300, 600, 900, 1200, 1500, 1800]
const timeColors = ['#006837', '#39B54A', '#8CC63F', '#F7931E', '#F15A24', '#C1272D']
// Initialize map and client with TgmExampleUtils (using Berlin preset)
const { client, map } = TgmExampleUtils.initMapLibreMap({
...TgmExampleUtils.PRESETS.berlin,
styleType: 'Bright',
mapOptions: { pitch: 65 }
})
// define some options for the polygon service
const options = {
travelType: 'bike',
travelEdgeWeights: travelTimes,
maxEdgeWeight: 1800,
edgeWeight: 'time',
srid: 4326,
simplify: 200,
serializer: 'geojson',
buffer: 0.002
}
const sources = [
{ lat: lnglat[1], lng: lnglat[0], id: 1 }
]
// height stops function
function getHeightStops(travelTimes, heightFactor) {
return [
[travelTimes[0], travelTimes.length * (10 * heightFactor)],
[travelTimes[travelTimes.length - 1], travelTimes.length * heightFactor]
]
}
// color stop function
function getColorStops(times, colors) {
const colorsConfig = times.map((time, idx) => {
return [times[idx], colors[idx]]
})
return colorsConfig
}
map.on('load', () => {
TgmExampleUtils.createMarker(lnglat, map)
// call the Targomo service
client.polygons.fetch(sources, options).then((geojsonPolygons) => {
map.addLayer({
id: 'polygons',
type: 'fill-extrusion',
source: {
type: 'geojson',
data: geojsonPolygons,
attribution: '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">© Targomo</a>'
},
layout: {},
paint: {
'fill-extrusion-base': 0,
'fill-extrusion-height': {
property: 'time',
stops: getHeightStops(travelTimes, 2)
},
'fill-extrusion-color': {
property: 'time',
stops: getColorStops(travelTimes, timeColors)
},
'fill-extrusion-opacity': .5
}
})
map.fitBounds(turf.bbox(geojsonPolygons), { padding: 20 })
})
})</script>
</body>
</html>
Copied to clipboard
