kepler fixes

visgl · Jan 22, 2025 · f42ed2b · f42ed2b
1 parent e0e50f6
commit f42ed2b
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 23 deletions.
diff --git a/examples/kepler/index.html b/examples/kepler/index.html
@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>Hubble.gl in Kepler.gl</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css" rel="stylesheet" />
   <style>
     body {margin: 0; font-family: sans-serif; overflow: hidden;}
     #app {width: 100vw; height: 100vh; display: flex; flex-direction: row; align-items: stretch;}

diff --git a/examples/vite.config.local.mjs b/examples/vite.config.local.mjs
@@ -13,11 +13,11 @@ export default defineConfig(async () => {
       alias: {
         ...aliases,
         // Use root dependencies
-        // '@luma.gl': join(rootDir, './node_modules/@luma.gl'),
+        '@luma.gl': join(rootDir, './node_modules/@luma.gl'), // Multiple installs cause issues for equality e.g. "instanceof Program" "Model needs a Program"
         // '@math.gl': join(rootDir, './node_modules/@math.gl'),
         // '@arcgis/core': join(rootDir, './node_modules/@arcgis/core'),
         // '@loaders.gl/core': join(rootDir, './node_modules/@loaders.gl/core'),
-        'react': join(rootDir, './node_modules/react'),
+        'react': join(rootDir, './node_modules/react'), // Multiple installs cause issues for hooks e.g. useState
       }
     },
     define: {

diff --git a/modules/react/src/components/export-video/export-video-panel-preview.tsx b/modules/react/src/components/export-video/export-video-panel-preview.tsx
@@ -35,6 +35,7 @@ export type ExportVideoPanelPreviewProps = {
 type ExportVideoPanelPreviewState = {
   memoDevicePixelRatio: number;
   mapStyle: string;
+  mapboxAccessToken?: string;
   deckLayers: Layer[];
   glContext?: WebGLRenderingContext;
 };
@@ -63,13 +64,14 @@ export class ExportVideoPanelPreview extends Component<
   constructor(props: ExportVideoPanelPreviewProps) {
     super(props);
     const mapStyle = this.props.mapData.mapStyle;
-    const mapStyleUrl = mapStyle.mapStyles[mapStyle.styleType].url;
+    const {url, accessToken} = mapStyle.mapStyles[mapStyle.styleType];
 
     this.mapRef = React.createRef<MapRef>();
     this.deckRef = React.createRef<Deck>();
 
     this.state = {
-      mapStyle: mapStyleUrl, // Unsure if mapStyle would ever change but allowing it just in case
+      mapStyle: url, // Unsure if mapStyle would ever change but allowing it just in case
+      mapboxAccessToken: accessToken,
       glContext: undefined,
       memoDevicePixelRatio: 1,
       deckLayers: []
@@ -183,31 +185,38 @@ export class ExportVideoPanelPreview extends Component<
       mapProps,
       disableBaseMap
     } = this.props;
-    const {glContext, mapStyle, deckLayers} = this.state;
+    const {glContext, mapStyle, deckLayers, mapboxAccessToken} = this.state;
     const deck = this.deckRef.current;
     const {width, height} = this._getContainer();
     const doubleResolution = {width: resolution[0] * 2, height: resolution[1] * 2};
     return (
       <>
         <DeckCanvas id="deck-canvas" $width={width} $height={height}>
-          {disableBaseMap || !glContext ? (
+          {disableBaseMap ? (
             <DeckGL
               ref={ref => setRef(this.deckRef, ref?.deck)}
-              {...deckProps}
+              {...adapter.getProps({deck, extraProps: {...deckProps, layers: deckLayers}})}
               // {...doubleResolution}
               {...this._getContainer()}
               layers={deckLayers}
             />
           ) : (
             <ReactMapGL
               // style={doubleResolution}
+              ref={this.mapRef}
               style={this._getContainer()}
               antialias
+              {...mapProps}
+              {...viewState}
               mapStyle={mapStyle}
+              mapboxAccessToken={mapboxAccessToken}
               onLoad={this._onMapLoad}
-              {...mapProps}
+              onMove={e => setViewState(e.viewState)}
             >
-              <DeckGLOverlay ref={this.deckRef} {...deckProps} layers={deckLayers} />
+              <DeckGLOverlay
+                ref={this.deckRef}
+                {...adapter.getProps({deck, extraProps: {...deckProps, layers: deckLayers}})}
+              />
             </ReactMapGL>
           )}
         </DeckCanvas>
@@ -255,16 +264,6 @@ export class ExportVideoPanelPreview extends Component<
     //         )}
     //       </DeckGL>
     //     </DeckCanvas>
-    //     {rendering && (
-    //       <RenderingSpinner
-    //         rendering={rendering}
-    //         saving={saving}
-    //         width={width}
-    //         height={height}
-    //         adapter={adapter}
-    //         durationMs={durationMs}
-    //       />
-    //     )}
     //   </>
     // );
   }

diff --git a/modules/react/src/kepler-layers.ts b/modules/react/src/kepler-layers.ts
@@ -74,7 +74,13 @@ function renderLayer(
       animationConfig,
       objectHovered
     })
-    .map((deckLayer: Layer) => deckLayer.clone({pickable: false, beforeId}));
+    .map((deckLayer: Layer) =>
+      deckLayer.clone({
+        pickable: false,
+        // @ts-expect-error MapboxOverlay layers are extended to include beforeId
+        beforeId
+      })
+    );
   return overlays.concat(layerOverlay || []);
 }
 

diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
   ],
   "devDependencies": {
     "@loaders.gl/polyfills": "^4.2.0",
+    "@luma.gl/experimental": "^8.5.0",
     "@probe.gl/bench": "^3.5.0",
     "@probe.gl/test-utils": "^3.5.0",
     "coveralls": "^3.0.0",
@@ -57,10 +58,12 @@
     "tape-catch": "^1.0.6"
   },
   "resolutions_comments": [
-    "@loaders.gl/video: https://github.com/visgl/loaders.gl/issues/2164"
+    "@loaders.gl/video: https://github.com/visgl/loaders.gl/issues/2164",
+    "@luma.gl/experimental: must include in devDeps for local dev examples"
   ],
   "resolutions": {
-    "@loaders.gl/video": "3.0.12"
+    "@loaders.gl/video": "3.0.12",
+    "@luma.gl/experimental": "8.5.21"
   },
   "volta": {
     "node": "18.20.5",

diff --git a/yarn.lock b/yarn.lock
@@ -2454,6 +2454,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@luma.gl/experimental@npm:8.5.21":
+  version: 8.5.21
+  resolution: "@luma.gl/experimental@npm:8.5.21"
+  dependencies:
+    "@luma.gl/constants": "npm:8.5.21"
+    "@math.gl/core": "npm:^3.5.0"
+    earcut: "npm:^2.0.6"
+  peerDependencies:
+    "@loaders.gl/gltf": ^3.0.0
+    "@loaders.gl/images": ^3.0.0
+    "@luma.gl/engine": ^8.4.0
+    "@luma.gl/gltools": ^8.4.0
+    "@luma.gl/shadertools": ^8.4.0
+    "@luma.gl/webgl": ^8.4.0
+  checksum: 10c0/ed65e12b71fbabca9dccaf237b5d185eb7303491a92a9b8c438f9f8d1d551fe8ac615503bb86fd46c8d2244e9a7fc0b57e4c6254622f3d537d33c4ae329fe6a3
+  languageName: node
+  linkType: hard
+
 "@luma.gl/gltools@npm:8.5.21":
   version: 8.5.21
   resolution: "@luma.gl/gltools@npm:8.5.21"
@@ -5581,7 +5599,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"earcut@npm:^2.2.2":
+"earcut@npm:^2.0.6, earcut@npm:^2.2.2":
   version: 2.2.4
   resolution: "earcut@npm:2.2.4"
   checksum: 10c0/01ca51830edd2787819f904ae580087d37351f6048b4565e7add4b3da8a86b7bc19262ab2aa7fdc64129ab03af2d9cec8cccee4d230c82275f97ef285c79aafb
@@ -7544,6 +7562,7 @@ __metadata:
   resolution: "hubble.gl-monorepo@workspace:."
   dependencies:
     "@loaders.gl/polyfills": "npm:^4.2.0"
+    "@luma.gl/experimental": "npm:^8.5.0"
     "@probe.gl/bench": "npm:^3.5.0"
     "@probe.gl/test-utils": "npm:^3.5.0"
     coveralls: "npm:^3.0.0"