Transform mapbox:// urls in MapboxGL Styles for use in MapLibreGL.
npm install maplibregl-mapbox-request-transformerThis library provides a request transforming function enabling the consumption of MapboxGL Styles in MapLibreGL.
By default Mapbox styles are referenced by, and include others to mapbox URLs such as mapbox://styles/mapbox/satellite-streets-v11, however MapLibreGL, since version 2, does not know how to handle these references. This library parsers the mapbox URL and converts into a valid http urls usable by MapLibreGL.
Also compatible with react-map-gl.
npm install maplibregl-mapbox-request-transformer --save
``Usage
$3
For v12 styles you can either use the built in style transformer
``
import {
isMapboxURL,
transformMapboxUrl,
transformMapboxStyle
} from 'maplibregl-mapbox-request-transformer'const mapboxKey = 'pk.123'
const transformRequest = (url: string, resourceType: string) => {
if (isMapboxURL(url)) {
return transformMapboxUrl(url, resourceType, mapboxKey)
}
return {url}
}
var map = new maplibregl.Map({
container: 'map',
center: [-122.420679, 37.772537],
zoom: 13,
transformRequest
});
// For V12 Styles you'll also need to add
map.setStyle('mapbox://styles/mapbox/streets-v12', {
transformStyle: transformMapboxStyle
})
``
Or pass you can pass in validateStyle: false to the map options
``
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)
}
return {url}
}
var map = new maplibregl.Map({
container: 'map',
center: [-122.420679, 37.772537],
zoom: 13,
style: 'mapbox://styles/mapbox/streets-v12'
transformRequest,
validateStyle: false,
});
``$3
``
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)
}
return {url}
}
var map = new maplibregl.Map({
container: 'map',
center: [-122.420679, 37.772537],
zoom: 13,
style: 'mapbox://styles/mapbox/streets-v11'
transformRequest
});
```