[fix] Fix react-map-gl mapbox api props (keplergl#2362)

Signed-off-by: Ihor Dykhta <[email protected]>
DeepUpRosenthal · Oct 10, 2023 · ec0881d · ec0881d
1 parent d0a8658
commit ec0881d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/babel-register.js b/babel-register.js
@@ -44,6 +44,9 @@ require('@babel/polyfill');
 var path = require('path');
 var glob = require('glob');
 
+// Requiring mapbox-gl here prevents polyfilling errors during tests.
+require('mapbox-gl');
+
 // eslint-disable-next-line func-names
 process.argv.slice(2).forEach(function(arg) {
   // eslint-disable-next-line func-names

diff --git a/jest.setup.js b/jest.setup.js
@@ -21,6 +21,10 @@
 import '@testing-library/jest-dom';
 import * as Utils from '@kepler.gl/utils';
 
+jest.mock('mapbox-gl/dist/mapbox-gl', () => ({
+  Map: () => ({})
+}));
+
 jest.mock('@kepler.gl/utils', () => ({
   ...jest.requireActual('@kepler.gl/utils'),
   hasPortableWidth: jest.fn(),

diff --git a/src/components/src/map-container.tsx b/src/components/src/map-container.tsx
@@ -979,8 +979,9 @@ export default function MapContainerFactory(
       const mapProps = {
         ...internalViewState,
         preserveDrawingBuffer: true,
-        mapboxApiAccessToken: currentStyle?.accessToken || mapboxApiAccessToken,
-        mapboxApiUrl,
+        mapboxAccessToken: currentStyle?.accessToken || mapboxApiAccessToken,
+        baseApiUrl: mapboxApiUrl,
+        mapLib: mapboxgl,
         transformRequest: this.props.transformRequest || transformRequest
       };
 
@@ -1065,6 +1066,9 @@ export default function MapContainerFactory(
               viewState={internalViewState}
               mapStyle={mapStyle.topMapStyle}
               style={MAP_STYLE.top}
+              mapboxAccessToken={mapProps.mapboxAccessToken}
+              baseApiUrl={mapProps.baseApiUrl}
+              mapLib={mapboxgl}
               {...topMapContainerProps}
             />
           ) : null}

diff --git a/src/components/src/modals/add-map-style-modal.tsx b/src/components/src/modals/add-map-style-modal.tsx
@@ -175,8 +175,9 @@ function AddMapStyleModalFactory() {
       const mapboxApiAccessToken = inputStyle.accessToken || this.props.mapboxApiAccessToken;
       const mapProps = {
         ...mapState,
-        mapboxApiUrl,
-        mapboxApiAccessToken,
+        baseApiUrl: mapboxApiUrl,
+        mapboxAccessToken: mapboxApiAccessToken,
+        mapLib: mapboxgl,
         preserveDrawingBuffer: true,
         transformRequest
       };