feat(widgets): Add OverviewMapWidget for spatial navigation

examples/get-started/pure-js/widgets/app.js

@@ -8,6 +8,7 @@ import {
   CompassWidget,
   ZoomWidget,
   FullscreenWidget,
+  _OverviewMapWidget as OverviewMapWidget,
   DarkGlassTheme,
   LightGlassTheme
 } from '@deck.gl/widgets';
@@ -77,6 +78,7 @@ new Deck({
   widgets: [
     new ZoomWidget({style: widgetTheme}),
     new CompassWidget({style: widgetTheme}),
-    new FullscreenWidget({style: widgetTheme})
+    new FullscreenWidget({style: widgetTheme}),
+    new OverviewMapWidget({style: widgetTheme, placement: 'bottom-right'})
   ]
 });

modules/react/src/index.ts

@@ -18,8 +18,10 @@ export {ScaleWidget as _ScaleWidget} from './widgets/scale-widget';
 export {ScreenshotWidget as _ScreenshotWidget} from './widgets/screenshot-widget';
 export {SplitterWidget as _SplitterWidget} from './widgets/splitter-widget';
 export {ThemeWidget as _ThemeWidget} from './widgets/theme-widget';
+export {OverviewMapWidget as _OverviewMapWidget} from './widgets/overview-map-widget';
 export {useWidget} from './utils/use-widget';
 export type {ContextMenuWidgetProps} from '@deck.gl/widgets';
+export type {OverviewMapWidgetProps} from '@deck.gl/widgets';
 
 // Types
 export type {DeckGLContextValue} from './utils/deckgl-context';

modules/react/src/widgets/overview-map-widget.tsx

@@ -0,0 +1,12 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {_OverviewMapWidget as OverviewMapWidgetClass} from '@deck.gl/widgets';
+import type {OverviewMapWidgetProps} from '@deck.gl/widgets';
+import {useWidget} from '../utils/use-widget';
+
+export const OverviewMapWidget = (props: OverviewMapWidgetProps = {}) => {
+  useWidget(OverviewMapWidgetClass, props);
+  return null;
+};

modules/widgets/src/index.ts

@@ -30,6 +30,7 @@ export {ThemeWidget as _ThemeWidget} from './theme-widget';
 export {LoadingWidget as _LoadingWidget} from './loading-widget';
 export {FpsWidget as _FpsWidget} from './fps-widget';
 export {StatsWidget as _StatsWidget} from './stats-widget';
+export {OverviewMapWidget as _OverviewMapWidget} from './overview-map-widget';
 
 export type {FullscreenWidgetProps} from './fullscreen-widget';
 export type {CompassWidgetProps} from './compass-widget';
@@ -48,6 +49,7 @@ export type {SplitterWidgetProps} from './splitter-widget';
 export type {TimelineWidgetProps} from './timeline-widget';
 export type {ViewSelectorWidgetProps} from './view-selector-widget';
 export type {GimbalWidgetProps} from './gimbal-widget';
+export type {OverviewMapWidgetProps} from './overview-map-widget';
 
 export {LightTheme, DarkTheme, LightGlassTheme, DarkGlassTheme} from './themes';
 export type {DeckWidgetTheme} from './themes';