Use maplibre in trips example (#290)

* Add filenames for each example

* Use maplibre in trips example

* Fix deck animation types

* Use maplibre import

examples/website/basic-basemap-mapbox-legacy/app.jsx

@@ -181,6 +181,7 @@ export default function App({mapStyle = 'mapbox://styles/mapbox/streets-v11'}) {
         setBusy={setBusy}
         formatConfigs={formatConfigs}
         timecode={timecode}
+        filename="basic-basemap-mapbox-legacy"
       />
     </Container>
   );

examples/website/basic-basemap-mapbox/app.jsx

@@ -181,6 +181,7 @@ export default function App({mapStyle = 'mapbox://styles/mapbox/streets-v11'}) {
         setBusy={setBusy}
         formatConfigs={formatConfigs}
         timecode={timecode}
+        filename="basic-basemap-mapbox"
       />
     </Container>
   );

examples/website/basic-basemap/README.md

@@ -4,7 +4,7 @@ This is a basic basemap + deck.gl data animation utilizing [react-map-gl](https:
 
 Copy the content of this folder to your project.
 
-Other options can be found at [using with Mapbox GL](https://deck.gl/docs/developer-guide/base-maps/using-with-mapbox).
+Other options can be found at [using with Maplibre GL](https://deck.gl/docs/developer-guide/base-maps/using-with-maplibre).
 
 ### Installation
 

examples/website/basic-basemap/app.jsx

@@ -182,6 +182,7 @@ export default function App({mapStyle = 'https://basemaps.cartocdn.com/gl/positr
         setBusy={setBusy}
         formatConfigs={formatConfigs}
         timecode={timecode}
+        filename="basic-basemap"
       />
     </Container>
   );

examples/website/camera/app.jsx

@@ -138,6 +138,7 @@ export default function App() {
         setBusy={setBusy}
         formatConfigs={formatConfigs}
         timecode={timecode}
+        filename="camera"
       >
         <button disabled={busy} onClick={() => setViewStateA(filterCamera(cameraFrame))}>
           Set Camera Start

examples/website/terrain/app.jsx

@@ -191,6 +191,7 @@ export default function App() {
         setBusy={setBusy}
         formatConfigs={formatConfigs}
         timecode={timecode}
+        filename="terrain"
       >
         <div style={{width: '100%'}}>
           <label style={{fontFamily: 'sans-serif', width: '40%', marginRight: '10%'}}>

examples/website/trips/README.md

@@ -11,15 +11,7 @@ Users can drag, zoom in and zoom out, change pitch and bearing from within the d
 
 Copy the content of this folder to your project. 
 
-To see the base map, you need a [Mapbox access token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/). You can either set an environment variable:
-
-```bash
-export MapboxAccessToken=<mapbox_access_token>
-```
-
-Or set `MAPBOX_TOKEN` directly in `app.js`.
-
-Other options can be found at [using with Mapbox GL](https://deck.gl/docs/get-started/using-with-map).
+Other options can be found at [using with Maplibre GL](https://deck.gl/docs/developer-guide/base-maps/using-with-maplibre).
 
 ### Installation
 

examples/website/trips/app.tsx

@@ -9,7 +9,7 @@ import {createRoot} from 'react-dom/client';
 import {BasicControls, useHubbleGl, useDeckAnimation} from '@hubble.gl/react';
 import {AmbientLight, PointLight, LightingEffect, Deck} from '@deck.gl/core/typed';
 import {MapboxOverlay, MapboxOverlayProps} from '@deck.gl/mapbox/typed';
-import Map, {MapRef, useControl} from 'react-map-gl';
+import Map, {MapRef, useControl} from 'react-map-gl/maplibre';
 import {PolygonLayer} from '@deck.gl/layers/typed';
 import {TripsLayer} from '@deck.gl/geo-layers/typed';
 import {setRef} from './set-ref';
@@ -129,7 +129,7 @@ const DeckGLOverlay = forwardRef<Deck, MapboxOverlayProps>(
   }
 );
 
-export default function App({mapStyle = 'mapbox://styles/mapbox/dark-v9'}) {
+export default function App({mapStyle = 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'}) {
   const deckRef = useRef<Deck>(null);
   const mapRef = useRef<MapRef>(null);
   const [busy, setBusy] = useState(false);
@@ -177,7 +177,7 @@ export default function App({mapStyle = 'mapbox://styles/mapbox/dark-v9'}) {
     ]
   });
 
-  const {deckProps, mapProps, adapter, cameraFrame, setCameraFrame} = useHubbleGl({
+  const {deckProps, mapProps, adapter, cameraFrame, setCameraFrame} = useHubbleGl<MapRef>({
     deckRef,
     mapRef,
     deckAnimation,
@@ -239,6 +239,7 @@ export default function App({mapStyle = 'mapbox://styles/mapbox/dark-v9'}) {
         setBusy={setBusy}
         formatConfigs={formatConfigs}
         timecode={timecode}
+        filename="trips"
       />
     </Container>
   );

examples/website/trips/package.json

@@ -12,7 +12,7 @@
     "d3-color": "^1.4.1",
     "react-map-gl": "^7.1.0",
     "hubble.gl": "^1.4.0-alpha.0",
-    "mapbox-gl": "^1.13.0",
+    "maplibre-gl": "^3.6.2",
     "deck.gl": "^8.9",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",

modules/core/src/animations/deck-animation.ts

@@ -22,8 +22,8 @@ export type DeckAnimationProps = {
 };
 
 export type DeckAnimationConstructor = AnimationConstructor & {
-  getLayers: (animation: DeckAnimation) => Layer[];
-  onLayersUpdate: (layers: Layer[]) => void;
+  getLayers?: (animation: DeckAnimation) => Layer[];
+  onLayersUpdate?: (layers: Layer[]) => void;
   onCameraUpdate?: (frame: CameraDataType) => void;
 } & DeckAnimationProps;
 

modules/react/src/components/basic-controls.tsx

@@ -75,6 +75,7 @@ type BasicControlsProps = {
   formatConfigs: Partial<FormatConfigs>;
   timecode: Timecode;
   embed?: boolean;
+  filename?: string;
 };
 
 export default function BasicControls({
@@ -84,7 +85,8 @@ export default function BasicControls({
   setBusy,
   formatConfigs,
   timecode,
-  embed = true
+  embed = true,
+  filename = undefined
 }: PropsWithChildren<BasicControlsProps>) {
   const [encoder, setEncoder] = useState<Encoders>(WEBM);
   const [blob, setBlob] = useState<Blob>(undefined);
@@ -119,14 +121,15 @@ export default function BasicControls({
     adapter.render({
       Encoder: ENCODERS[encoder],
       formatConfigs,
+      filename,
       timecode,
       onStopped: () => setRenderStatus('saving'),
       onComplete: () => setBusy(false),
       onSave: embed && onSave
     });
     setRenderStatus('in-progress');
     setBusy(true);
-  }, [adapter, onSave, encoder, embed, formatConfigs, timecode]);
+  }, [adapter, onSave, encoder, embed, formatConfigs, timecode, filename]);
 
   const onStop = useCallback(() => {
     adapter.stop({

modules/react/src/hooks.ts

@@ -35,14 +35,14 @@ export function useDeckAnimation(params: DeckAnimationConstructor) {
   return useMemo(() => new DeckAnimation(params), []);
 }
 
-export function useHubbleGl({
+export function useHubbleGl<ReactMapRef extends MapRef>({
   deckRef,
   mapRef = undefined,
   deckAnimation,
   initialViewState = undefined
 }: {
   deckRef: RefObject<Deck>;
-  mapRef?: RefObject<MapRef>;
+  mapRef?: RefObject<ReactMapRef>;
   deckAnimation: DeckAnimation;
   initialViewState?: MapViewState;
 }) {