Mapbox-GL Isochrones with Polygon Source
Visualize the area which can reach the 9ème Arrondissement on foot in 30 minutes
<!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 view fitting -->
<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%;
}
</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__');
// source polygon (9ème arrondissement)
const arr9 = {
"type":"Polygon",
"coordinates":[[[2.339777,48.882029],[2.337824,48.882308],[2.336954,48.882495],[2.332442,48.88385],[2.329443,48.884553],[2.32814,48.883708],[2.327181,48.883481],[2.326847,48.875626],[2.326576,48.875583],[2.327053,48.873736],[2.326754,48.87314],[2.325836,48.869562],[2.328007,48.869918],[2.340044,48.871981],[2.34788,48.870704],[2.347912,48.874024],[2.348321,48.87602],[2.349114,48.877478],[2.349292,48.879048],[2.349859,48.880626],[2.34959,48.883488],[2.349506,48.883725],[2.34695,48.883421],[2.339777,48.882029]]]
}
const attributionText = `<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">© Targomo</a>`;
// add the map and set the initial centered to the 9ème arrondissement
const map = new mapboxgl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/positron/style.json?key=__your_maptiler_api_key__',
zoom: 12,
center: turf.centroid(arr9).geometry.coordinates,
attributionControl: false
})
.addControl(new mapboxgl.NavigationControl())
.addControl(new mapboxgl.AttributionControl({ compact: true, customAttribution: attributionText }));
// disable scroll zoom
map.scrollZoom.disable();
// isochrone polygons options
const options = {
sourceGeometries: [{
id: "arr9",
geometry: arr9
}],
serializer: 'geojson',
travelType: 'walk',
travelEdgeWeights: [1800],
maxEdgeWeight: 1800,
edgeWeight: 'time',
srid: 4326,
simplify: 50,
serializer: 'geojson',
buffer: 0.002
}
map.on('load', () => {
map.addLayer({
'id': '9eme',
'type': 'fill',
'source': {
'type': 'geojson',
'data': arr9
},
'layout': {},
'paint': {
'fill-color': '#F00',
'fill-opacity': .25,
}
});
// call the Targomo service
client.polygons.fetch(options).then((geojsonPolygons) => {
map.addLayer({
'id': 'polygons',
'type': 'fill',
'source': {
'type': 'geojson',
'data': geojsonPolygons
},
'layout': {},
'paint': {
'fill-color': '#000',
'fill-opacity': .25
}
}, '9eme');
map.fitBounds(turf.bbox(geojsonPolygons), { padding: 10 });
});
})
</script>
</body>
</html>Copied to clipboard
