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">&copy; Targomo</a>`;
        
        // add the map and set the initial centered to the 9ème arrondissement
        const map = new mapboxgl.Map({
            container: 'map',
            style: client.basemaps.getGLStyleURL("Light"),
            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>
content_copy
Copied to clipboard