Maplibre-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 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 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]]]
        }
        
        // add the map and set the initial centered to the 9ème arrondissement
        const map = new maplibregl.Map({
            container: 'map',
            style: client.basemaps.getGLStyleURL("Light"),
            zoom: 12,
            center: turf.centroid(arr9).geometry.coordinates
        }).addControl(new maplibregl.NavigationControl())
        
        // 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,
                        attribution: '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>'
                    },
                    layout: {},
                    paint: {
                        'fill-color': '#000',
                        'fill-opacity': .25
                    }
                }, '9eme')
        
                map.fitBounds(turf.bbox(geojsonPolygons), { padding: 10 })
            })
        })
    </script>
</body>
</html>
content_copy
Copied to clipboard