Maplibre-GL Inverse Isochrones

By leveraging turf.js, we can bring the focus to the accessible areas - 30 minute walk to Birrificio Lambrate 
<!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__')
        // Coordinates to center the map
        const lnglat = [9.231557, 45.485672]
        
        // add the map and set the initial center to berlin
        const map = new maplibregl.Map({
            container: 'map',
            style: client.basemaps.getGLStyleURL("Bright"),
            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: 'walk',
            travelEdgeWeights: [1800], // 30 minutes only
            maxEdgeWeight: 1800,
            edgeWeight: 'time',
            srid: 4326,
            simplify: 200,
            serializer: 'geojson',
            buffer: 0.002
        }
        
        const sources = [ { lat: lnglat[1], lng: lnglat[0], id: 1 } ]
        
        map.on('load', () => {
            const marker = new maplibregl.Marker()
                .setLngLat(lnglat).addTo(map)
            // call the Targomo service
            client.polygons.fetch(sources, options).then((geojsonPolygons) => {
                const inverse = turf.featureCollection([
                    // cut the polygons out of a global box
                    turf.difference(
                        turf.bboxPolygon([-180, 80, 180, -80]), // pretty much the inhabited world
                        geojsonPolygons.features[0] // we only requested one travel time
                    )
                ])
        
                map.addLayer({
                    id: 'polygons',
                    type: 'fill',
                    source: {
                        type: 'geojson',
                        data: inverse,
                        attribution: '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>'
                    },
                    layout: {},
                    paint: {
                        'fill-color': '#000',
                        'fill-opacity': .2
                    }
                })
        
                map.fitBounds(turf.bbox(geojsonPolygons), { padding: 10 })
            })
        })
    </script>
</body>

</html>
content_copy
Copied to clipboard