[Enhancement] support mapbox url protocol (#2693)

Signed-off-by: Sahit Tuntas Sadono <[email protected]>

Author: sahitono

src/components/src/map-container.tsx

@@ -987,7 +987,9 @@ export default function MapContainerFactory(
         mapboxAccessToken: currentStyle?.accessToken || mapboxApiAccessToken,
         baseApiUrl: mapboxApiUrl,
         mapLib: getApplicationConfig().getMapLib(),
-        transformRequest: this.props.transformRequest || transformRequest
+        transformRequest:
+          this.props.transformRequest ||
+          transformRequest(currentStyle?.accessToken || mapboxApiAccessToken)
       };
 
       const hasGeocoderLayer = Boolean(layers.find(l => l.id === GEOCODER_LAYER_ID));

src/components/src/modals/add-map-style-modal.tsx

@@ -162,7 +162,7 @@ function AddMapStyleModalFactory() {
         mapboxAccessToken: mapboxApiAccessToken,
         mapLib: getApplicationConfig().getMapLib(),
         preserveDrawingBuffer: true,
-        transformRequest
+        transformRequest: transformRequest(mapboxApiAccessToken)
       };
 
       return (

src/utils/package.json

@@ -58,6 +58,7 @@
     "lodash.isequal": "^4.5.0",
     "lodash.memoize": "^4.1.2",
     "lodash.throttle": "^4.1.1",
+    "maplibregl-mapbox-request-transformer": "^0.0.2",
     "mini-svg-data-uri": "^1.0.3",
     "moment-timezone": "^0.5.35",
     "react": "^18.2.0",

src/utils/src/map-style-utils/mapbox-utils.ts

@@ -1,6 +1,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
+import {isMapboxURL, transformMapboxUrl} from 'maplibregl-mapbox-request-transformer';
+
 /**
  * Determines whether a Map Style is using Mapbox Tiles
  * @param {any} mapStyle the mapStyle to check
@@ -24,8 +26,19 @@ export function isStyleUsingMapboxTiles(mapStyle) {
   });
 }
 
-export const transformRequest = (url: string): {url: string} => {
-  return {
-    url
+/**
+ * Transform mapbox protocol so can be used with maplibre
+ * @param mapboxKey mapbox api key
+ * @returns transformed url
+ */
+export const transformRequest = (
+  mapboxKey: string
+): ((url: string, resourceType: string) => {url: string}) => {
+  return (url: string, resourceType: string) => {
+    if (isMapboxURL(url)) {
+      return transformMapboxUrl(url, resourceType, mapboxKey);
+    }
+
+    return {url};
   };
 };

yarn.lock

@@ -3623,6 +3623,7 @@ __metadata:
     lodash.isequal: "npm:^4.5.0"
     lodash.memoize: "npm:^4.1.2"
     lodash.throttle: "npm:^4.1.1"
+    maplibregl-mapbox-request-transformer: "npm:^0.0.2"
     mini-svg-data-uri: "npm:^1.0.3"
     moment-timezone: "npm:^0.5.35"
     react: "npm:^18.2.0"
@@ -21443,6 +21444,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"maplibregl-mapbox-request-transformer@npm:^0.0.2":
+  version: 0.0.2
+  resolution: "maplibregl-mapbox-request-transformer@npm:0.0.2"
+  checksum: 10c0/fb73e476a94039a884982e831060feae70977edba7963249bb8b924cdc72fdee29e1968710e026a45dcd4079b5c11477689f54d528ea0bd481aba47cc0ac924d
+  languageName: node
+  linkType: hard
+
 "markdown-escapes@npm:^1.0.0":
   version: 1.0.4
   resolution: "markdown-escapes@npm:1.0.4"