Zooming in on map breaks isochrone

[iamwillow]

Version:

"mapbox-gl": "^1.12.0",

Bug:

When zooming in, the isochrone map UI breaks. It looks like the outline is still intact, but the fill gets distorted.

Zoomed out:

Zoomed in:

I circled the isochrone outline in red to show that it is still loading properly. Only the fill is broken.

Isochrone Code:

const fetchIsochrone = https://api.mapbox.com/isochrone/v1/mapbox/${mapInfo.commuteType}/${dataLon},${dataLat}.json?contours_minutes=${mapInfo.commuteTime}&access_token=${MAPBOX_TOKEN};

Here is a copy of the isochrone data that gets returned with that API call: isochrone_data.txt

map.on("load", function () {
    map.addSource("iso", {
        type: "geojson",
        data: fetchIsochrone,
    });
    map.addLayer({
        id: "isoLayer",
        type: "fill",
        source: "iso",
        layout: {},
        paint: {
            "fill-color": "#2557a7",
            "fill-opacity": 0.3,
        },
    }, "poi-label" ); 
});

[riastrad]

Thank you for using Mapbox! Based on the code snippet you've shared, it looks like you're using Mapbox GL JS rather than Mapbox.js.

For general how-to questions like this, we recommend contacting Mapbox Support or asking on Stack Overflow.