v12 styles don't work anymore

[nicolaric-akenza]

Somehow, v12 styles (e.g. mapbox://styles/mapbox/streets-v12) do not work anymore. the models between mapbox and maplibre seem to be out of sync. can we map the models somehow in this library?

[truongvan]

There is a variation between the style specifications of Mapbox and Maplibre. All you need is a transformStyle function to correct the differences.

[danielkurecka]

Here is a transformStyle function that fixes it:

map.setStyle('mapbox://styles/mapbox/streets-v12', {
    transformStyle: (previousStyle, nextStyle) => {
        if (nextStyle.projection && nextStyle.projection.name) {
            delete nextStyle.projection.name;
        }
        return nextStyle;
    },
});

The issue is due to projection.name not being a valid property in MapLibre's style specification.

https://maplibre.org/maplibre-style-spec/projection/
https://docs.mapbox.com/style-spec/reference/projection/

[dbauszus-glx]

How does this work in combination with the transformRequest example?

import { isMapboxURL, transformMapboxUrl } from 'maplibregl-mapbox-request-transformer'

const mapboxKey = 'pk.123'

const transformRequest = (url: string, resourceType: string) => {
  if (isMapboxURL(url)) {
    return transformMapboxUrl(url, resourceType, mapboxKey)
  }
  
  // Do any other transforms you want
  return {url}
}

var map = new maplibregl.Map({
  container: 'map',
  center: [-122.420679, 37.772537],
  zoom: 13,
  style: 'mapbox://styles/mapbox/satellite-streets-v11',
  transformRequest
});

I added the setStyle with the transformStyle method but to no avail.

[axekan]

How does this work in combination with the transformRequest example?

import { isMapboxURL, transformMapboxUrl } from 'maplibregl-mapbox-request-transformer'

const mapboxKey = 'pk.123'

const transformRequest = (url: string, resourceType: string) => {
if (isMapboxURL(url)) {
return transformMapboxUrl(url, resourceType, mapboxKey)
}

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

var map = new maplibregl.Map({
container: 'map',
center: [-122.420679, 37.772537],
zoom: 13,
style: 'mapbox://styles/mapbox/satellite-streets-v11',
transformRequest
});
I added the setStyle with the transformStyle method but to no avail.

Try adding validateStyle: false to maplibre options. Example:

const map = new maplibregl.Map({
    container: mapContainer,
    style: 'mapbox://styles/mapbox/satellite-streets-v12?optimize=true',
    validateStyle: false,
    center: [18.0686, 59.3293],
    zoom: 12,
    transformRequest,
});