Using with Mapbox V12?

[chanmathew]

Hi there,

First of all thanks for this great lib!

I'm trying to use the library with the latest Mapbox maps, but it seems to error out.

I was following the discussion here from Maplibre-GL and using the maplibregl-mapbox-request-transformer library as mentioned: maplibre/maplibre-gl-js#1226 (comment)

Here's my implementation, using latest "svelte-maplibre-gl": "^0.1.6":

const transformRequest = (url: string, resourceType: maplibregl.ResourceType | undefined) => {
	if (isMapboxURL(url) && resourceType) {
		return transformMapboxUrl(url, resourceType, env.PUBLIC_MAPBOX_TOKEN);
	}

	// Do any other transforms you want
	return { url };
};

<MapLibre
	class="relative h-full w-full"
	bind:map={mapState.map}
	style="mapbox://styles/mapbox/streets-v12"
	attributionControl={false}
	{transformRequest}
	onzoom={({ target: map }) => {
		currentZoom = map.getZoom();
	}}
	onmove={handleMapMove}
	padding={mapState.paddingDefaults}
>

However I seem to be getting these errors preventing the map from loading. The maps seem to load fine for V11 but not V12, which is blocking the use of custom maps, as the custom maps are all made on V12.

If I switch it to their mapbox://styles/mapbox/standard, I get even more errors: