Mapbox-GL GeoJSON - Clipped
Chopping up isochrones takes time… but it’s possible! 
<!DOCTYPE html>
<html>

<head>
    <!--  Include targomo core -->
    <script src="https://releases.targomo.com/core/latest.min.js"></script>
    <!--  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>
    <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__')
        // 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'];
        
        const attributionText = `<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>`;
        
        // add the map and set the initial center to berlin
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'https://api.maptiler.com/maps/darkmatter/style.json?key=__your_maptiler_api_key__',
            zoom: 12,
            center: lnglat,
            attributionControl: false
        })
            .addControl(new mapboxgl.NavigationControl())
            .addControl(new mapboxgl.AttributionControl({ compact: true, customAttribution: attributionText }));
        
        // disable scroll zoom
        map.scrollZoom.disable();
        
        // you need to define some options for the polygon service
        const options = {
            travelType: 'transit',
            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 }
        ]
        
        // color stop function
        function getColorStops(times, colors) {
            var colorsConfig = times.map((time, idx) => {
                return [times[idx], colors[idx]];
            });
            return colorsConfig;
        }
        
        map.on('load', () => {
            const marker = new mapboxgl.Marker()
                .setLngLat(lnglat).addTo(map);
            // call the Targomo service
            client.polygons.fetch(sources, options).then((geojsonPolygons) => {
                const polySort = geojsonPolygons.features.sort((a, b) => {
                    return b.properties.time - a.properties.time;
                })
        
                let clippedPolys = [];
        
                polySort.forEach((polygon, idx) => {
                    const isLast = idx == (polySort.length - 1);
                    const previous = polySort[idx - 1];
                    if (previous) {
                        var clip = turf.difference(previous, polygon);
                        clippedPolys.push(clip);
                    } if (isLast) {
                        clippedPolys.push(polygon);
                    }
                });
                var donuts = turf.featureCollection(clippedPolys);
                map.addLayer({
                    'id': 'polygons',
                    'type': 'fill',
                    'source': {
                        'type': 'geojson',
                        'data': donuts
                    },
                    'layout': {},
                    'paint': {
                        'fill-color': {
                            'property': 'time',
                            'stops': getColorStops(travelTimes, timeColors)
                        },
                        'fill-outline-color': 'rgba(0,0,0,0)',
                        'fill-antialias': true,
                        'fill-opacity': .5
                    }
                }, 'highway_path');
        
                map.flyTo({
                    center: [lnglat[0], lnglat[1] - .02],
                    zoom: 10.5, bearing: -60, speed: .5
                })
            });
        })
    </script>
</body>

</html>
content_copy
Copied to clipboard