add: transform request

packages/visualizations/src/components/MapPoi/Map.svelte

@@ -33,6 +33,7 @@
         sourceLink,
         aspectRatio,
         interactive,
+        transformRequest,
     } = getMapOptions(options));
 
     const bbox = createDeepEqual(_bbox);
@@ -58,6 +59,7 @@
             {sourceLink}
             {aspectRatio}
             {interactive}
+            {transformRequest}
         />
     {/key}
 </div>

packages/visualizations/src/components/MapPoi/MapRender.svelte

@@ -17,6 +17,7 @@
     export let style: MapOptions['style'];
     export let sources: StyleSpecification['sources'];
     export let layers: StyleSpecification['layers'];
+    export let transformRequest: MapOptions['transformRequest'];
 
     // Options
     export let bbox: BBox | undefined;
@@ -51,6 +52,7 @@
         const options = {
             bounds: bbox as LngLatBoundsLike,
             ...getCenterZoomOptions({ zoom, center }),
+            transformRequest,
         };
         map.initialize(style, container, options);
     });

packages/visualizations/src/components/MapPoi/types.ts

@@ -3,6 +3,7 @@ import type {
     StyleSpecification,
     GeoJSONFeature,
     LngLatLike,
+    RequestTransformFunction,
 } from 'maplibre-gl';
 import type { BBox, GeoJsonProperties } from 'geojson';
 
@@ -22,6 +23,14 @@ export interface PoiMapOptions {
      * - Or an object with a 'sources' and a 'layers' keys. Useful when using a Raster or WMS basemap.
      */
     style?: string | PoiMapStyleOption;
+    /**
+     * A callback run before the Map makes a request for an external URL.
+     * The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests.
+     * Expected to return an object with a url property and optionally headers and credentials properties.
+     *
+     * Especially useful for mapbox://
+     */
+    transformRequest?: RequestTransformFunction;
     /**
      * Maximum boundaries of the map, outside of which the user cannot zoom/move
      * Also set the position of the map when rendering.

packages/visualizations/src/components/MapPoi/utils.ts

@@ -108,6 +108,7 @@ export const getMapOptions = (options: PoiMapOptions) => {
         description,
         legend,
         sourceLink,
+        transformRequest,
     } = options;
     return {
         aspectRatio,
@@ -120,6 +121,7 @@ export const getMapOptions = (options: PoiMapOptions) => {
         description,
         legend,
         sourceLink,
+        transformRequest,
     };
 };