Change and inspect requests with transformRequest
Use the Map object's transformRequest option to run a callback before the map makes any external request. The callback can rewrite the URL, attach headers, or set the credentials property for cross-origin requests — useful for self-hosted or third-party resources that need custom authentication or routing.
To change a request, return a RequestParameters object (or a Promise that resolves to one); return nothing to leave the request unchanged. This example adds a vector tile source hosted outside of Mapbox — the USGS National Hydrography Dataset — and signs every request to that host with an auth_token parameter, leaving requests to any other host unchanged.
Mapbox-hosted resources are already signed with your access token, so transformRequest is only needed for resources you fetch from elsewhere. This dataset is public and ignores the auth_token parameter, which stands in for whatever your own server or third-party provider expects.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Change and inspect requests with transformRequest</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.30.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.30.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// This host needs no auth token; we sign it only to demonstrate transformRequest.
const nhdTiles =
'https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/NDHPlus_v21/VectorTileServer/tile/{z}/{y}/{x}.pbf';
const authToken = 'example-auth-token';
const map = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: 'map',
zoom: 8,
minZoom: 7,
center: [-121.6, 38.1],
style: 'mapbox://styles/mapbox/standard',
config: {
basemap: {
theme: 'monochrome'
}
},
// `transformRequest` runs before every request the map makes. Return a
// `RequestParameters` object ({url, headers, credentials}) to modify a
// request, or nothing to leave it unchanged.
transformRequest: (url) => {
if (new URL(url).hostname !== new URL(nhdTiles).hostname) return;
const separator = url.includes('?') ? '&' : '?';
return {
url: `${url}${separator}auth_token=${authToken}`
// Or authorize with a header instead:
// headers: {'Authorization': `Bearer ${authToken}`}
};
}
});
map.on('load', () => {
map.addSource('nhd', {
type: 'vector',
tiles: [nhdTiles],
maxzoom: 7,
attribution:
'<a href="https://www.usgs.gov/national-hydrography">USGS National Hydrography Dataset</a>'
});
map.addLayer({
id: 'rivers',
type: 'line',
source: 'nhd',
'source-layer': 'Flowlines:2',
slot: 'middle',
paint: {
'line-color': '#4264fb',
'line-width': 1.5
}
});
});
</script>
</body>
</html>
YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。