@deck.gl/widgets 9.0.0-beta.1 → 9.0.0-beta.11

package/dist/{es5/stylesheet.css → stylesheet.css}

@@ -2,12 +2,9 @@
   margin: var(--widget-margin, 12px);
 }
 
-.deck-widget-button-border {
-  width: var(--button-size, 28px);
-  height: var(--button-size, 28px);
-  box-sizing: border-box;
-  flex-shrink: 0;
-
+/* Common button container styles */
+.deck-widget-button,
+.deck-widget-button-group {
   background: var(--button-stroke, rgba(255, 255, 255, 0.3));
   border-radius: var(--button-corner-radius, 8px);
   box-shadow: var(--button-shadow, 0px 0px 8px 0px rgba(0, 0, 0, 0.25));
@@ -17,12 +14,34 @@
   justify-content: center;
 }
 
-.deck-widget-button-border button {
+/* Single button */
+.deck-widget-button {
+  width: var(--button-size, 28px);
+  height: var(--button-size, 28px);
+}
+
+/* Button group */
+.deck-widget-button-group {
+  width: calc(var(--button-size, 28px) - 2);
+  height: calc((var(--button-size, 28px) * 2) - 1);
+  
+  flex-direction: row;
+  padding: 1px;
+  gap: 1px;
+}
+
+.deck-widget-button-group.vertical {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+/* Common button styles */
+.deck-widget-button-group button,
+.deck-widget-button button {
   width: calc(var(--button-size, 28px) - 2px);
   height: calc(var(--button-size, 28px) - 2px);
-  box-sizing: border-box;
-  flex-shrink: 0;
 
+  box-sizing: border-box;
   background: var(--button-background, #fff);
   backdrop-filter: var(--button-backdrop-filter, unset);
   border: var(--button-inner-stroke, unset);
@@ -34,8 +53,35 @@
   padding: 0;
 }
 
+/* Border radius adjustments for grouped buttons */
+.deck-widget-button-group.vertical > *:not(:last-child),
+.deck-widget-button-group.vertical > *:not(:last-child) > button {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.deck-widget-button-group.vertical > *:not(:first-child),
+.deck-widget-button-group.vertical > *:not(:first-child) > button {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+
+.deck-widget-button-group.horizontal > *:not(:last-child),
+.deck-widget-button-group.horizontal > *:not(:last-child) > button {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.deck-widget-button-group.horizontal > *:not(:first-child),
+.deck-widget-button-group.horizontal > *:not(:first-child) > button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* Icon button styles */
 .deck-widget button .deck-widget-icon {
-  background-color: var(--button-icon-idle, rgba(97, 97, 102, 1));
+  background-color: var(--button-icon-idle, #616166);
   background-position: 50%;
   background-repeat: no-repeat;
   display: block;
@@ -44,9 +90,10 @@
 }
 
 .deck-widget button .deck-widget-icon:hover {
-  background-color: var(--button-icon-hover, rgba(24, 24, 26, 1));
+  background-color: var(--button-icon-hover, rgb(24, 24, 26));
 }
 
+/* Fullscreen styles */
 .deck-widget.deck-widget-fullscreen button.deck-widget-fullscreen-enter .deck-widget-icon {
   mask-image: var(
     --icon-fullscreen-enter,
@@ -77,3 +124,26 @@
   width: 100% !important;
   z-index: 99999;
 }
+
+/* Zoom styles */
+.deck-widget.deck-widget-zoom button.deck-widget-zoom-in .deck-widget-icon {
+  mask-image: var(
+    --icon-zoom-in,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 26 26" fill="black"><path d="M12.1029 13.8971H7.89332C7.64334 13.8971 7.43196 13.8105 7.25918 13.6373C7.08639 13.4641 7 13.2521 7 13.0014C7 12.7508 7.08639 12.5396 7.25918 12.368C7.43196 12.1963 7.64334 12.1105 7.89332 12.1105H12.1029V7.90097C12.1029 7.65161 12.1895 7.43912 12.3627 7.26348C12.5359 7.08783 12.7479 7 12.9986 7C13.2492 7 13.4604 7.08783 13.632 7.26348C13.8037 7.43912 13.8895 7.65161 13.8895 7.90097V12.1105H18.099C18.3484 12.1105 18.5609 12.1971 18.7365 12.3703C18.9122 12.5436 19 12.7555 19 13.0062C19 13.2569 18.9122 13.468 18.7365 13.6397C18.5609 13.8113 18.3484 13.8971 18.099 13.8971H13.8895V18.1067C13.8895 18.3567 13.8029 18.568 13.6297 18.7408C13.4564 18.9136 13.2445 19 12.9938 19C12.7431 19 12.532 18.9136 12.3603 18.7408C12.1887 18.568 12.1029 18.3567 12.1029 18.1067V13.8971Z"/></svg>')
+  );
+  -webkit-mask-image: var(
+    --icon-zoom-in,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 26 26" fill="black"><path d="M12.1029 13.8971H7.89332C7.64334 13.8971 7.43196 13.8105 7.25918 13.6373C7.08639 13.4641 7 13.2521 7 13.0014C7 12.7508 7.08639 12.5396 7.25918 12.368C7.43196 12.1963 7.64334 12.1105 7.89332 12.1105H12.1029V7.90097C12.1029 7.65161 12.1895 7.43912 12.3627 7.26348C12.5359 7.08783 12.7479 7 12.9986 7C13.2492 7 13.4604 7.08783 13.632 7.26348C13.8037 7.43912 13.8895 7.65161 13.8895 7.90097V12.1105H18.099C18.3484 12.1105 18.5609 12.1971 18.7365 12.3703C18.9122 12.5436 19 12.7555 19 13.0062C19 13.2569 18.9122 13.468 18.7365 13.6397C18.5609 13.8113 18.3484 13.8971 18.099 13.8971H13.8895V18.1067C13.8895 18.3567 13.8029 18.568 13.6297 18.7408C13.4564 18.9136 13.2445 19 12.9938 19C12.7431 19 12.532 18.9136 12.3603 18.7408C12.1887 18.568 12.1029 18.3567 12.1029 18.1067V13.8971Z"/></svg>')
+  );
+}
+
+.deck-widget.deck-widget-zoom button.deck-widget-zoom-out .deck-widget-icon {
+  mask-image: var(
+    --icon-zoom-out,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 26 26" fill="black"> wBox="0 0 26 26" fill="none"><path d="M7.89332 13.8866C7.64334 13.8866 7.43196 13.8 7.25918 13.6268C7.08639 13.4535 7 13.2416 7 12.9909C7 12.7403 7.08639 12.5291 7.25918 12.3575C7.43196 12.1858 7.64334 12.1 7.89332 12.1H18.099C18.349 12.1 18.5617 12.1866 18.737 12.3598C18.9123 12.5331 19 12.745 19 12.9957C19 13.2463 18.9123 13.4575 18.737 13.6291C18.5617 13.8008 18.349 13.8866 18.099 13.8866H7.89332Z"/></svg>')
+  );
+  -webkit-mask-image: var(
+    --icon-zoom-out,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 26 26" fill="black"> wBox="0 0 26 26" fill="none"><path d="M7.89332 13.8866C7.64334 13.8866 7.43196 13.8 7.25918 13.6268C7.08639 13.4535 7 13.2416 7 12.9909C7 12.7403 7.08639 12.5291 7.25918 12.3575C7.43196 12.1858 7.64334 12.1 7.89332 12.1H18.099C18.349 12.1 18.5617 12.1866 18.737 12.3598C18.9123 12.5331 19 12.745 19 12.9957C19 13.2463 18.9123 13.4575 18.737 13.6291C18.5617 13.8008 18.349 13.8866 18.099 13.8866H7.89332Z"/></svg>')
+  );
+}

package/{typed → dist}/themes.d.ts

@@ -6,6 +6,8 @@ export declare const LightTheme: {
     '--button-backdrop-filter': string;
     '--button-icon-idle': string;
     '--button-icon-hover': string;
+    '--icon-compass-north-color': string;
+    '--icon-compass-south-color': string;
 };
 export declare const DarkTheme: {
     '--button-background': string;
@@ -15,6 +17,8 @@ export declare const DarkTheme: {
     '--button-backdrop-filter': string;
     '--button-icon-idle': string;
     '--button-icon-hover': string;
+    '--icon-compass-north-color': string;
+    '--icon-compass-south-color': string;
 };
 export declare const LightGlassTheme: {
     '--button-background': string;
@@ -24,6 +28,8 @@ export declare const LightGlassTheme: {
     '--button-backdrop-filter': string;
     '--button-icon-idle': string;
     '--button-icon-hover': string;
+    '--icon-compass-north-color': string;
+    '--icon-compass-south-color': string;
 };
 export declare const DarkGlassTheme: {
     '--button-background': string;
@@ -33,5 +39,7 @@ export declare const DarkGlassTheme: {
     '--button-backdrop-filter': string;
     '--button-icon-idle': string;
     '--button-icon-hover': string;
+    '--icon-compass-north-color': string;
+    '--icon-compass-south-color': string;
 };
 //# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;CAUtB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;CAUrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;CAW3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;CAW1B,CAAC"}

package/dist/themes.js

@@ -0,0 +1,44 @@
+export const LightTheme = {
+    '--button-background': '#fff',
+    '--button-stroke': 'rgba(255, 255, 255, 0.3)',
+    '--button-inner-stroke': 'unset',
+    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',
+    '--button-backdrop-filter': 'unset',
+    '--button-icon-idle': 'rgba(97, 97, 102, 1)',
+    '--button-icon-hover': 'rgba(24, 24, 26, 1)',
+    '--icon-compass-north-color': '#F05C44',
+    '--icon-compass-south-color': '#C2C2CC'
+};
+export const DarkTheme = {
+    '--button-background': 'rgba(18, 18, 20, 1)',
+    '--button-stroke': 'rgba(18, 18, 20, 0.30)',
+    '--button-inner-stroke': 'unset',
+    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',
+    '--button-backdrop-filter': 'unset',
+    '--button-icon-idle': 'rgba(158, 157, 168, 1)',
+    '--button-icon-hover': 'rgba(215, 214, 229, 1)',
+    '--icon-compass-north-color': '#F05C44',
+    '--icon-compass-south-color': '#C2C2CC'
+};
+export const LightGlassTheme = {
+    '--button-background': 'rgba(255, 255, 255, 0.6)',
+    '--button-stroke': 'rgba(255, 255, 255, 0.3)',
+    '--button-inner-stroke': '1px solid rgba(255, 255, 255, 0.6)',
+    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',
+    '--button-backdrop-filter': 'blur(4px)',
+    '--button-icon-idle': 'rgba(97, 97, 102, 1)',
+    '--button-icon-hover': 'rgba(24, 24, 26, 1)',
+    '--icon-compass-north-color': '#F05C44',
+    '--icon-compass-south-color': '#C2C2CC'
+};
+export const DarkGlassTheme = {
+    '--button-background': 'rgba(18, 18, 20, 0.75)',
+    '--button-stroke': 'rgba(18, 18, 20, 0.30)',
+    '--button-inner-stroke': '1px solid rgba(18, 18, 20, 0.75)',
+    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',
+    '--button-backdrop-filter': 'blur(4px)',
+    '--button-icon-idle': 'rgba(158, 157, 168, 1)',
+    '--button-icon-hover': 'rgba(215, 214, 229, 1)',
+    '--icon-compass-north-color': '#F05C44',
+    '--icon-compass-south-color': '#C2C2CC'
+};

package/dist/zoom-widget.d.ts

@@ -0,0 +1,55 @@
+import type { Deck, Viewport, Widget, WidgetPlacement } from '@deck.gl/core';
+interface ZoomWidgetProps {
+    id: string;
+    placement?: WidgetPlacement;
+    /**
+     * View to attach to and interact with. Required when using multiple views.
+     */
+    viewId?: string | null;
+    /**
+     * Button orientation.
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Tooltip message on zoom in button.
+     */
+    zoomInLabel?: string;
+    /**
+     * Tooltip message on zoom out button.
+     */
+    zoomOutLabel?: string;
+    /**
+     * Zoom transition duration in ms.
+     */
+    transitionDuration?: number;
+    /**
+     * CSS inline style overrides.
+     */
+    style?: Partial<CSSStyleDeclaration>;
+    /**
+     * Additional CSS class.
+     */
+    className?: string;
+}
+export declare class ZoomWidget implements Widget<ZoomWidgetProps> {
+    id: string;
+    props: ZoomWidgetProps;
+    placement: WidgetPlacement;
+    orientation: 'vertical' | 'horizontal';
+    viewId?: string | null;
+    viewport?: Viewport;
+    deck?: Deck<any>;
+    element?: HTMLDivElement;
+    constructor(props: ZoomWidgetProps);
+    onAdd({ deck }: {
+        deck: Deck<any>;
+    }): HTMLDivElement;
+    onRemove(): void;
+    setProps(props: Partial<ZoomWidgetProps>): void;
+    onViewportChange(viewport: any): void;
+    handleZoom(nextZoom: number): void;
+    handleZoomIn(): void;
+    handleZoomOut(): void;
+}
+export {};
+//# sourceMappingURL=zoom-widget.d.ts.map

package/dist/zoom-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom-widget.d.ts","sourceRoot":"","sources":["../src/zoom-widget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAI3E,UAAU,eAAe;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qBAAa,UAAW,YAAW,MAAM,CAAC,eAAe,CAAC;IACxD,EAAE,SAAU;IACZ,KAAK,EAAE,eAAe,CAAC;IACvB,SAAS,EAAE,eAAe,CAAc;IACxC,WAAW,EAAE,UAAU,GAAG,YAAY,CAAc;IACpD,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC9B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IACjB,OAAO,CAAC,EAAE,cAAc,CAAC;gBAEb,KAAK,EAAE,eAAe;IAYlC,KAAK,CAAC,EAAC,IAAI,EAAC,EAAE;QAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAA;KAAC,GAAG,cAAc;IA8BhD,QAAQ;IAKR,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC;IAIxC,gBAAgB,CAAC,QAAQ,KAAA;IAIzB,UAAU,CAAC,QAAQ,EAAE,MAAM;IAY3B,YAAY;IAMZ,aAAa;CAKd"}

package/dist/zoom-widget.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+/* global document */
+import { FlyToInterpolator } from '@deck.gl/core';
+import { render } from 'preact';
+import { ButtonGroup, GroupedIconButton } from "./components.js";
+export class ZoomWidget {
+    constructor(props) {
+        this.id = 'zoom';
+        this.placement = 'top-left';
+        this.orientation = 'vertical';
+        this.viewId = null;
+        this.id = props.id || 'zoom';
+        this.viewId = props.viewId || null;
+        this.placement = props.placement || 'top-left';
+        this.orientation = props.orientation || 'vertical';
+        props.transitionDuration = props.transitionDuration || 200;
+        props.zoomInLabel = props.zoomInLabel || 'Zoom In';
+        props.zoomOutLabel = props.zoomOutLabel || 'Zoom Out';
+        props.style = props.style || {};
+        this.props = props;
+    }
+    onAdd({ deck }) {
+        const { style, className } = this.props;
+        const element = document.createElement('div');
+        element.classList.add('deck-widget', 'deck-widget-zoom');
+        if (className)
+            element.classList.add(className);
+        if (style) {
+            Object.entries(style).map(([key, value]) => element.style.setProperty(key, value));
+        }
+        const ui = (_jsxs(ButtonGroup, { orientation: this.orientation, children: [_jsx(GroupedIconButton, { onClick: () => this.handleZoomIn(), label: this.props.zoomInLabel, className: "deck-widget-zoom-in" }), _jsx(GroupedIconButton, { onClick: () => this.handleZoomOut(), label: this.props.zoomOutLabel, className: "deck-widget-zoom-out" })] }));
+        render(ui, element);
+        this.deck = deck;
+        this.element = element;
+        return element;
+    }
+    onRemove() {
+        this.deck = undefined;
+        this.element = undefined;
+    }
+    setProps(props) {
+        Object.assign(this.props, props);
+    }
+    onViewportChange(viewport) {
+        this.viewport = viewport;
+    }
+    handleZoom(nextZoom) {
+        const viewId = this.viewId || 'default-view';
+        const nextViewState = {
+            ...this.viewport,
+            zoom: nextZoom,
+            transitionDuration: this.props.transitionDuration,
+            transitionInterpolator: new FlyToInterpolator()
+        };
+        // @ts-ignore Using private method temporary until there's a public one
+        this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+    }
+    handleZoomIn() {
+        if (this.viewport) {
+            this.handleZoom(this.viewport.zoom + 1);
+        }
+    }
+    handleZoomOut() {
+        if (this.viewport) {
+            this.handleZoom(this.viewport.zoom - 1);
+        }
+    }
+}

package/dist.min.js

@@ -4,7 +4,6 @@
   else if (typeof define === 'function' && define.amd) define([], factory);
         else if (typeof exports === 'object') exports['deck'] = factory();
   else root['deck'] = factory();})(globalThis, function () {
-"use strict";var __exports__=(()=>{var ye=Object.create;var D=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var xe=Object.getOwnPropertyNames;var we=Object.getPrototypeOf,Ce=Object.prototype.hasOwnProperty;var Fe=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),Pe=(t,e)=>{for(var n in e)D(t,n,{get:e[n],enumerable:!0})},U=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of xe(e))!Ce.call(t,i)&&i!==n&&D(t,i,{get:()=>e[i],enumerable:!(o=ke(e,i))||o.enumerable});return t},F=(t,e,n)=>(U(t,e,"default"),n&&U(n,e,"default")),B=(t,e,n)=>(n=t!=null?ye(we(t)):{},U(e||!t||!t.__esModule?D(n,"default",{value:t,enumerable:!0}):n,t)),Ee=t=>U(D({},"__esModule",{value:!0}),t);var $=Fe((ze,Y)=>{Y.exports=globalThis.deck});var R={};Pe(R,{DarkGlassTheme:()=>Be,DarkTheme:()=>je,FullscreenWidget:()=>ge,LightGlassTheme:()=>qe,LightTheme:()=>He});var w={},Z=B($());F(w,B($()));if(!Z.Layer)throw new Error("@deck.gl/core is not found");F(R,w);var be=B($());var j,h,le,Se,E,ee,ie,G,Le,T={},se=[],Te=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,V=Array.isArray;function P(t,e){for(var n in e)t[n]=e[n];return t}function ae(t){var e=t.parentNode;e&&e.removeChild(t)}function Ne(t,e,n){var o,i,r,s={};for(r in e)r=="key"?o=e[r]:r=="ref"?i=e[r]:s[r]=e[r];if(arguments.length>2&&(s.children=arguments.length>3?j.call(arguments,2):n),typeof t=="function"&&t.defaultProps!=null)for(r in t.defaultProps)s[r]===void 0&&(s[r]=t.defaultProps[r]);return W(t,s,o,i,null)}function W(t,e,n,o,i){var r={type:t,props:e,key:n,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:i??++le};return i==null&&h.vnode!=null&&h.vnode(r),r}function q(t){return t.children}function M(t,e){this.props=t,this.context=e}function A(t,e){if(e==null)return t.__?A(t.__,t.__.__k.indexOf(t)+1):null;for(var n;e<t.__k.length;e++)if((n=t.__k[e])!=null&&n.__e!=null)return n.__e;return typeof t.type=="function"?A(t):null}function _e(t){var e,n;if((t=t.__)!=null&&t.__c!=null){for(t.__e=t.__c.base=null,e=0;e<t.__k.length;e++)if((n=t.__k[e])!=null&&n.__e!=null){t.__e=t.__c.base=n.__e;break}return _e(t)}}function te(t){(!t.__d&&(t.__d=!0)&&E.push(t)&&!O.__r++||ee!==h.debounceRendering)&&((ee=h.debounceRendering)||ie)(O)}function O(){var t,e,n,o,i,r,s,a,_;for(E.sort(G);t=E.shift();)t.__d&&(e=E.length,o=void 0,i=void 0,r=void 0,a=(s=(n=t).__v).__e,(_=n.__P)&&(o=[],i=[],(r=P({},s)).__v=s.__v+1,J(_,s,r,n.__n,_.ownerSVGElement!==void 0,s.__h!=null?[a]:null,o,a??A(s),s.__h,i),pe(o,s,i),s.__e!=a&&_e(s)),E.length>e&&E.sort(G));O.__r=0}function ue(t,e,n,o,i,r,s,a,_,g,p){var l,m,c,u,f,S,d,v,x,y=0,b=o&&o.__k||se,N=b.length,C=N,L=e.length;for(n.__k=[],l=0;l<L;l++)(u=n.__k[l]=(u=e[l])==null||typeof u=="boolean"||typeof u=="function"?null:typeof u=="string"||typeof u=="number"||typeof u=="bigint"?W(null,u,null,null,u):V(u)?W(q,{children:u},null,null,null):u.__b>0?W(u.type,u.props,u.key,u.ref?u.ref:null,u.__v):u)!=null?(u.__=n,u.__b=n.__b+1,(v=Ae(u,b,d=l+y,C))===-1?c=T:(c=b[v]||T,b[v]=void 0,C--),J(t,u,c,i,r,s,a,_,g,p),f=u.__e,(m=u.ref)&&c.ref!=m&&(c.ref&&K(c.ref,null,u),p.push(m,u.__c||f,u)),f!=null&&(S==null&&(S=f),(x=c===T||c.__v===null)?v==-1&&y--:v!==d&&(v===d+1?y++:v>d?C>L-d?y+=v-d:y--:y=v<d&&v==d-1?v-d:0),d=l+y,typeof u.type!="function"||v===d&&c.__k!==u.__k?typeof u.type=="function"||v===d&&!x?u.__d!==void 0?(_=u.__d,u.__d=void 0):_=f.nextSibling:_=fe(t,f,_):_=ce(u,_,t),typeof n.type=="function"&&(n.__d=_))):(c=b[l])&&c.key==null&&c.__e&&(c.__e==_&&(_=A(c)),z(c,c,!1));for(n.__e=S,l=N;l--;)b[l]!=null&&(typeof n.type=="function"&&b[l].__e!=null&&b[l].__e==n.__d&&(n.__d=b[l].__e.nextSibling),z(b[l],b[l]))}function ce(t,e,n){for(var o,i=t.__k,r=0;i&&r<i.length;r++)(o=i[r])&&(o.__=t,e=typeof o.type=="function"?ce(o,e,n):fe(n,o.__e,e));return e}function fe(t,e,n){return n==null||n.parentNode!==t?t.insertBefore(e,null):e==n&&e.parentNode!=null||t.insertBefore(e,n),e.nextSibling}function Ae(t,e,n,o){var i=t.key,r=t.type,s=n-1,a=n+1,_=e[n];if(_===null||_&&i==_.key&&r===_.type)return n;if(o>(_!=null?1:0))for(;s>=0||a<e.length;){if(s>=0){if((_=e[s])&&i==_.key&&r===_.type)return s;s--}if(a<e.length){if((_=e[a])&&i==_.key&&r===_.type)return a;a++}}return-1}function Re(t,e,n,o,i){var r;for(r in n)r==="children"||r==="key"||r in e||H(t,r,null,n[r],o);for(r in e)i&&typeof e[r]!="function"||r==="children"||r==="key"||r==="value"||r==="checked"||n[r]===e[r]||H(t,r,e[r],n[r],o)}function ne(t,e,n){e[0]==="-"?t.setProperty(e,n??""):t[e]=n==null?"":typeof n!="number"||Te.test(e)?n:n+"px"}function H(t,e,n,o,i){var r;e:if(e==="style")if(typeof n=="string")t.style.cssText=n;else{if(typeof o=="string"&&(t.style.cssText=o=""),o)for(e in o)n&&e in n||ne(t.style,e,"");if(n)for(e in n)o&&n[e]===o[e]||ne(t.style,e,n[e])}else if(e[0]==="o"&&e[1]==="n")r=e!==(e=e.replace(/Capture$/,"")),e=e.toLowerCase()in t?e.toLowerCase().slice(2):e.slice(2),t.l||(t.l={}),t.l[e+r]=n,n?o||t.addEventListener(e,r?oe:re,r):t.removeEventListener(e,r?oe:re,r);else if(e!=="dangerouslySetInnerHTML"){if(i)e=e.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(e!=="width"&&e!=="height"&&e!=="href"&&e!=="list"&&e!=="form"&&e!=="tabIndex"&&e!=="download"&&e!=="rowSpan"&&e!=="colSpan"&&e in t)try{t[e]=n??"";break e}catch{}typeof n=="function"||(n==null||n===!1&&e[4]!=="-"?t.removeAttribute(e):t.setAttribute(e,n))}}function re(t){return this.l[t.type+!1](h.event?h.event(t):t)}function oe(t){return this.l[t.type+!0](h.event?h.event(t):t)}function J(t,e,n,o,i,r,s,a,_,g){var p,l,m,c,u,f,S,d,v,x,y,b,N,C,L,k=e.type;if(e.constructor!==void 0)return null;n.__h!=null&&(_=n.__h,a=e.__e=n.__e,e.__h=null,r=[a]),(p=h.__b)&&p(e);e:if(typeof k=="function")try{if(d=e.props,v=(p=k.contextType)&&o[p.__c],x=p?v?v.props.value:p.__:o,n.__c?S=(l=e.__c=n.__c).__=l.__E:("prototype"in k&&k.prototype.render?e.__c=l=new k(d,x):(e.__c=l=new M(d,x),l.constructor=k,l.render=Ue),v&&v.sub(l),l.props=d,l.state||(l.state={}),l.context=x,l.__n=o,m=l.__d=!0,l.__h=[],l._sb=[]),l.__s==null&&(l.__s=l.state),k.getDerivedStateFromProps!=null&&(l.__s==l.state&&(l.__s=P({},l.__s)),P(l.__s,k.getDerivedStateFromProps(d,l.__s))),c=l.props,u=l.state,l.__v=e,m)k.getDerivedStateFromProps==null&&l.componentWillMount!=null&&l.componentWillMount(),l.componentDidMount!=null&&l.__h.push(l.componentDidMount);else{if(k.getDerivedStateFromProps==null&&d!==c&&l.componentWillReceiveProps!=null&&l.componentWillReceiveProps(d,x),!l.__e&&(l.shouldComponentUpdate!=null&&l.shouldComponentUpdate(d,l.__s,x)===!1||e.__v===n.__v)){for(e.__v!==n.__v&&(l.props=d,l.state=l.__s,l.__d=!1),e.__e=n.__e,e.__k=n.__k,e.__k.forEach(function(I){I&&(I.__=e)}),y=0;y<l._sb.length;y++)l.__h.push(l._sb[y]);l._sb=[],l.__h.length&&s.push(l);break e}l.componentWillUpdate!=null&&l.componentWillUpdate(d,l.__s,x),l.componentDidUpdate!=null&&l.__h.push(function(){l.componentDidUpdate(c,u,f)})}if(l.context=x,l.props=d,l.__P=t,l.__e=!1,b=h.__r,N=0,"prototype"in k&&k.prototype.render){for(l.state=l.__s,l.__d=!1,b&&b(e),p=l.render(l.props,l.state,l.context),C=0;C<l._sb.length;C++)l.__h.push(l._sb[C]);l._sb=[]}else do l.__d=!1,b&&b(e),p=l.render(l.props,l.state,l.context),l.state=l.__s;while(l.__d&&++N<25);l.state=l.__s,l.getChildContext!=null&&(o=P(P({},o),l.getChildContext())),m||l.getSnapshotBeforeUpdate==null||(f=l.getSnapshotBeforeUpdate(c,u)),ue(t,V(L=p!=null&&p.type===q&&p.key==null?p.props.children:p)?L:[L],e,n,o,i,r,s,a,_,g),l.base=e.__e,e.__h=null,l.__h.length&&s.push(l),S&&(l.__E=l.__=null)}catch(I){e.__v=null,(_||r!=null)&&(e.__e=a,e.__h=!!_,r[r.indexOf(a)]=null),h.__e(I,e,n)}else r==null&&e.__v===n.__v?(e.__k=n.__k,e.__e=n.__e):e.__e=Ie(n.__e,e,n,o,i,r,s,_,g);(p=h.diffed)&&p(e)}function pe(t,e,n){for(var o=0;o<n.length;o++)K(n[o],n[++o],n[++o]);h.__c&&h.__c(e,t),t.some(function(i){try{t=i.__h,i.__h=[],t.some(function(r){r.call(i)})}catch(r){h.__e(r,i.__v)}})}function Ie(t,e,n,o,i,r,s,a,_){var g,p,l,m=n.props,c=e.props,u=e.type,f=0;if(u==="svg"&&(i=!0),r!=null){for(;f<r.length;f++)if((g=r[f])&&"setAttribute"in g==!!u&&(u?g.localName===u:g.nodeType===3)){t=g,r[f]=null;break}}if(t==null){if(u===null)return document.createTextNode(c);t=i?document.createElementNS("http://www.w3.org/2000/svg",u):document.createElement(u,c.is&&c),r=null,a=!1}if(u===null)m===c||a&&t.data===c||(t.data=c);else{if(r=r&&j.call(t.childNodes),p=(m=n.props||T).dangerouslySetInnerHTML,l=c.dangerouslySetInnerHTML,!a){if(r!=null)for(m={},f=0;f<t.attributes.length;f++)m[t.attributes[f].name]=t.attributes[f].value;(l||p)&&(l&&(p&&l.__html==p.__html||l.__html===t.innerHTML)||(t.innerHTML=l&&l.__html||""))}if(Re(t,c,m,i,a),l)e.__k=[];else if(ue(t,V(f=e.props.children)?f:[f],e,n,o,i&&u!=="foreignObject",r,s,r?r[0]:n.__k&&A(n,0),a,_),r!=null)for(f=r.length;f--;)r[f]!=null&&ae(r[f]);a||("value"in c&&(f=c.value)!==void 0&&(f!==t.value||u==="progress"&&!f||u==="option"&&f!==m.value)&&H(t,"value",f,m.value,!1),"checked"in c&&(f=c.checked)!==void 0&&f!==t.checked&&H(t,"checked",f,m.checked,!1))}return t}function K(t,e,n){try{typeof t=="function"?t(e):t.current=e}catch(o){h.__e(o,n)}}function z(t,e,n){var o,i;if(h.unmount&&h.unmount(t),(o=t.ref)&&(o.current&&o.current!==t.__e||K(o,null,e)),(o=t.__c)!=null){if(o.componentWillUnmount)try{o.componentWillUnmount()}catch(r){h.__e(r,e)}o.base=o.__P=null,t.__c=void 0}if(o=t.__k)for(i=0;i<o.length;i++)o[i]&&z(o[i],e,n||typeof t.type!="function");n||t.__e==null||ae(t.__e),t.__=t.__e=t.__d=void 0}function Ue(t,e,n){return this.constructor(t,n)}function de(t,e,n){var o,i,r,s;h.__&&h.__(t,e),i=(o=typeof n=="function")?null:n&&n.__k||e.__k,r=[],s=[],J(e,t=(!o&&n||e).__k=Ne(q,null,[t]),i||T,T,e.ownerSVGElement!==void 0,!o&&n?[n]:i?null:e.firstChild?j.call(e.childNodes):null,r,!o&&n?n:i?i.__e:e.firstChild,o,s),pe(r,t,s)}j=se.slice,h={__e:function(t,e,n,o){for(var i,r,s;e=e.__;)if((i=e.__c)&&!i.__)try{if((r=i.constructor)&&r.getDerivedStateFromError!=null&&(i.setState(r.getDerivedStateFromError(t)),s=i.__d),i.componentDidCatch!=null&&(i.componentDidCatch(t,o||{}),s=i.__d),s)return i.__E=i}catch(a){t=a}throw t}},le=0,Se=function(t){return t!=null&&t.constructor===void 0},M.prototype.setState=function(t,e){var n;n=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=P({},this.state),typeof t=="function"&&(t=t(P({},n),this.props)),t&&P(n,t),t!=null&&this.__v&&(e&&this._sb.push(e),te(this))},M.prototype.forceUpdate=function(t){this.__v&&(this.__e=!0,t&&this.__h.push(t),te(this))},M.prototype.render=q,E=[],ie=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,G=function(t,e){return t.__v.__b-e.__v.__b},O.__r=0,Le=0;var he=function(e){var n=e.className,o=e.label,i=e.onClick;return React.createElement("div",{className:"deck-widget-button-border"},React.createElement("button",{className:"deck-widget-button ".concat(n),type:"button",onClick:i,title:o},React.createElement("div",{className:"deck-widget-icon"})))};function ve(t,e,n,o,i,r,s){try{var a=t[r](s),_=a.value}catch(g){n(g);return}a.done?e(_):Promise.resolve(_).then(o,i)}function Q(t){return function(){var e=this,n=arguments;return new Promise(function(o,i){var r=t.apply(e,n);function s(_){ve(r,o,i,s,a,"next",_)}function a(_){ve(r,o,i,s,a,"throw",_)}s(void 0)})}}function X(t,e){return Me(t)||We(t,e)||$e(t,e)||De()}function De(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
-In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function $e(t,e){if(t){if(typeof t=="string")return me(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);if(n==="Object"&&t.constructor&&(n=t.constructor.name),n==="Map"||n==="Set")return Array.from(t);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return me(t,e)}}function me(t,e){(e==null||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}function We(t,e){var n=t==null?null:typeof Symbol<"u"&&t[Symbol.iterator]||t["@@iterator"];if(n!=null){var o=[],i=!0,r=!1,s,a;try{for(n=n.call(t);!(i=(s=n.next()).done)&&(o.push(s.value),!(e&&o.length===e));i=!0);}catch(_){r=!0,a=_}finally{try{!i&&n.return!=null&&n.return()}finally{if(r)throw a}}return o}}function Me(t){if(Array.isArray(t))return t}function Oe(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var ge=function(){function t(n){Oe(this,t),this.id="fullscreen",this.props=void 0,this.placement="top-left",this.deck=void 0,this.element=void 0,this.fullscreen=!1,this.id=n.id||"fullscreen",this.placement=n.placement||"top-left",n.enterLabel=n.enterLabel||"Enter Fullscreen",n.exitLabel=n.exitLabel||"Exit Fullscreen",n.style=n.style||{},this.props=n}var e=t.prototype;return e.onAdd=function(o){var i=o.deck,r=this.props,s=r.style,a=r.className,_=document.createElement("div");return _.classList.add("deck-widget","deck-widget-fullscreen"),a&&_.classList.add(a),s&&Object.entries(s).map(function(g){var p=X(g,2),l=p[0],m=p[1];return _.style.setProperty(l,m)}),this.deck=i,this.element=_,this.update(),document.addEventListener("fullscreenchange",this.onFullscreenChange.bind(this)),_},e.onRemove=function(){this.deck=void 0,this.element=void 0,document.removeEventListener("fullscreenchange",this.onFullscreenChange.bind(this))},e.update=function(){var o=this.props,i=o.enterLabel,r=o.exitLabel,s=this.element;if(s){var a=React.createElement(he,{onClick:this.handleClick.bind(this),label:this.fullscreen?r:i,className:this.fullscreen?"deck-widget-fullscreen-exit":"deck-widget-fullscreen-enter"});de(a,s)}},e.setProps=function(o){var i=this.props,r=this.element;r&&(i.className!==o.className&&(i.className&&r.classList.remove(i.className),o.className&&r.classList.add(o.className)),(0,be._deepEqual)(i.style,o.style,1)||(i.style&&Object.entries(i.style).map(function(s){var a=X(s,1),_=a[0];return r.style.removeProperty(_)}),o.style&&Object.entries(o.style).map(function(s){var a=X(s,2),_=a[0],g=a[1];return r.style.setProperty(_,g)}))),Object.assign(this.props,o)},e.getContainer=function(){var o,i;return this.props.container||((o=this.deck)===null||o===void 0||(i=o.getCanvas())===null||i===void 0?void 0:i.parentElement)},e.onFullscreenChange=function(){var o=this.fullscreen,i=document.fullscreenElement===this.getContainer();o!==i&&(this.fullscreen=!this.fullscreen),this.update()},e.handleClick=function(){var n=Q(regeneratorRuntime.mark(function i(){return regeneratorRuntime.wrap(function(s){for(;;)switch(s.prev=s.next){case 0:if(!this.fullscreen){s.next=5;break}return s.next=3,this.exitFullscreen();case 3:s.next=7;break;case 5:return s.next=7,this.requestFullscreen();case 7:this.update();case 8:case"end":return s.stop()}},i,this)}));function o(){return n.apply(this,arguments)}return o}(),e.requestFullscreen=function(){var n=Q(regeneratorRuntime.mark(function i(){var r;return regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:if(r=this.getContainer(),!(r!=null&&r.requestFullscreen)){a.next=6;break}return a.next=4,r.requestFullscreen({navigationUI:"hide"});case 4:a.next=7;break;case 6:this.togglePseudoFullscreen();case 7:case"end":return a.stop()}},i,this)}));function o(){return n.apply(this,arguments)}return o}(),e.exitFullscreen=function(){var n=Q(regeneratorRuntime.mark(function i(){return regeneratorRuntime.wrap(function(s){for(;;)switch(s.prev=s.next){case 0:if(!document.exitFullscreen){s.next=5;break}return s.next=3,document.exitFullscreen();case 3:s.next=6;break;case 5:this.togglePseudoFullscreen();case 6:case"end":return s.stop()}},i,this)}));function o(){return n.apply(this,arguments)}return o}(),e.togglePseudoFullscreen=function(){var o;(o=this.getContainer())===null||o===void 0||o.classList.toggle("deck-pseudo-fullscreen")},t}();var He={"--button-background":"#fff","--button-stroke":"rgba(255, 255, 255, 0.3)","--button-inner-stroke":"unset","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25)","--button-backdrop-filter":"unset","--button-icon-idle":"rgba(97, 97, 102, 1)","--button-icon-hover":"rgba(24, 24, 26, 1)"},je={"--button-background":"rgba(18, 18, 20, 1)","--button-stroke":"rgba(18, 18, 20, 0.30)","--button-inner-stroke":"unset","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25)","--button-backdrop-filter":"unset","--button-icon-idle":"rgba(158, 157, 168, 1)","--button-icon-hover":"rgba(215, 214, 229, 1)"},qe={"--button-background":"rgba(255, 255, 255, 0.6)","--button-stroke":"rgba(255, 255, 255, 0.3)","--button-inner-stroke":"1px solid rgba(255, 255, 255, 0.6)","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset","--button-backdrop-filter":"blur(4px)","--button-icon-idle":"rgba(97, 97, 102, 1)","--button-icon-hover":"rgba(24, 24, 26, 1)"},Be={"--button-background":"rgba(18, 18, 20, 0.75)","--button-stroke":"rgba(18, 18, 20, 0.30)","--button-inner-stroke":"1px solid rgba(18, 18, 20, 0.75)","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset","--button-backdrop-filter":"blur(4px)","--button-icon-idle":"rgba(158, 157, 168, 1)","--button-icon-hover":"rgba(215, 214, 229, 1)"};return Ee(R);})();
+"use strict";var __exports__=(()=>{var we=Object.create;var A=Object.defineProperty;var xe=Object.getOwnPropertyDescriptor;var Ce=Object.getOwnPropertyNames;var Pe=Object.getPrototypeOf,Le=Object.prototype.hasOwnProperty;var De=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),We=(t,e)=>{for(var n in e)A(t,n,{get:e[n],enumerable:!0})},Z=(t,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of Ce(e))!Le.call(t,o)&&o!==n&&A(t,o,{get:()=>e[o],enumerable:!(i=xe(e,o))||i.enumerable});return t},C=(t,e,n)=>(Z(t,e,"default"),n&&Z(n,e,"default")),N=(t,e,n)=>(n=t!=null?we(Pe(t)):{},Z(e||!t||!t.__esModule?A(n,"default",{value:t,enumerable:!0}):n,t)),Fe=t=>Z(A({},"__esModule",{value:!0}),t);var F=De(($e,oe)=>{oe.exports=globalThis.deck});var z={};We(z,{CompassWidget:()=>G,DarkGlassTheme:()=>je,DarkTheme:()=>Ae,FullscreenWidget:()=>B,LightGlassTheme:()=>Ve,LightTheme:()=>Ze,ZoomWidget:()=>q});var w={},ie=N(F(),1);C(w,N(F(),1));if(!ie.Layer)throw new Error("@deck.gl/core is not found");C(z,w);var ye=N(F(),1);var R,p,_e,Se,L,re,ue,J,Ee,T={},de=[],Ie=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,Q=Array.isArray;function P(t,e){for(var n in e)t[n]=e[n];return t}function pe(t){var e=t.parentNode;e&&e.removeChild(t)}function Ne(t,e,n){var i,o,s,l={};for(s in e)s=="key"?i=e[s]:s=="ref"?o=e[s]:l[s]=e[s];if(arguments.length>2&&(l.children=arguments.length>3?R.call(arguments,2):n),typeof t=="function"&&t.defaultProps!=null)for(s in t.defaultProps)l[s]===void 0&&(l[s]=t.defaultProps[s]);return j(t,l,i,o,null)}function j(t,e,n,i,o){var s={type:t,props:e,key:n,ref:i,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:o??++_e,__i:-1,__u:0};return o==null&&p.vnode!=null&&p.vnode(s),s}function S(t){return t.children}function U(t,e){this.props=t,this.context=e}function D(t,e){if(e==null)return t.__?D(t.__,t.__i+1):null;for(var n;e<t.__k.length;e++)if((n=t.__k[e])!=null&&n.__e!=null)return n.__e;return typeof t.type=="function"?D(t):null}function fe(t){var e,n;if((t=t.__)!=null&&t.__c!=null){for(t.__e=t.__c.base=null,e=0;e<t.__k.length;e++)if((n=t.__k[e])!=null&&n.__e!=null){t.__e=t.__c.base=n.__e;break}return fe(t)}}function se(t){(!t.__d&&(t.__d=!0)&&L.push(t)&&!$.__r++||re!==p.debounceRendering)&&((re=p.debounceRendering)||ue)($)}function $(){var t,e,n,i,o,s,l,a,_;for(L.sort(J);t=L.shift();)t.__d&&(e=L.length,i=void 0,s=(o=(n=t).__v).__e,a=[],_=[],(l=n.__P)&&((i=P({},o)).__v=o.__v+1,p.vnode&&p.vnode(i),Y(l,i,o,n.__n,l.ownerSVGElement!==void 0,32&o.__u?[s]:null,a,s??D(o),!!(32&o.__u),_),i.__v=o.__v,i.__.__k[i.__i]=i,ge(a,i,_),i.__e!=s&&fe(i)),L.length>e&&L.sort(J));$.__r=0}function he(t,e,n,i,o,s,l,a,_,c,d){var r,g,u,m,k,v=i&&i.__k||de,f=e.length;for(n.__d=_,Te(n,e,v),_=n.__d,r=0;r<f;r++)(u=n.__k[r])!=null&&typeof u!="boolean"&&typeof u!="function"&&(g=u.__i===-1?T:v[u.__i]||T,u.__i=r,Y(t,u,g,o,s,l,a,_,c,d),m=u.__e,u.ref&&g.ref!=u.ref&&(g.ref&&ee(g.ref,null,u),d.push(u.ref,u.__c||m,u)),k==null&&m!=null&&(k=m),65536&u.__u||g.__k===u.__k?(m||g.__e!=_||(_=D(g)),_=me(u,_,t)):typeof u.type=="function"&&u.__d!==void 0?_=u.__d:m&&(_=m.nextSibling),u.__d=void 0,u.__u&=-196609);n.__d=_,n.__e=k}function Te(t,e,n){var i,o,s,l,a,_=e.length,c=n.length,d=c,r=0;for(t.__k=[],i=0;i<_;i++)l=i+r,(o=t.__k[i]=(o=e[i])==null||typeof o=="boolean"||typeof o=="function"?null:typeof o=="string"||typeof o=="number"||typeof o=="bigint"||o.constructor==String?j(null,o,null,null,null):Q(o)?j(S,{children:o},null,null,null):o.constructor===void 0&&o.__b>0?j(o.type,o.props,o.key,o.ref?o.ref:null,o.__v):o)!=null?(o.__=t,o.__b=t.__b+1,a=ze(o,n,l,d),o.__i=a,s=null,a!==-1&&(d--,(s=n[a])&&(s.__u|=131072)),s==null||s.__v===null?(a==-1&&r--,typeof o.type!="function"&&(o.__u|=65536)):a!==l&&(a===l+1?r++:a>l?d>_-l?r+=a-l:r--:a<l?a==l-1&&(r=a-l):r=0,a!==i+r&&(o.__u|=65536))):(s=n[l])&&s.key==null&&s.__e&&!(131072&s.__u)&&(s.__e==t.__d&&(t.__d=D(s)),K(s,s,!1),n[l]=null,d--);if(d)for(i=0;i<c;i++)(s=n[i])!=null&&!(131072&s.__u)&&(s.__e==t.__d&&(t.__d=D(s)),K(s,s))}function me(t,e,n){var i,o;if(typeof t.type=="function"){for(i=t.__k,o=0;i&&o<i.length;o++)i[o]&&(i[o].__=t,e=me(i[o],e,n));return e}t.__e!=e&&(n.insertBefore(t.__e,e||null),e=t.__e);do e=e&&e.nextSibling;while(e!=null&&e.nodeType===8);return e}function ze(t,e,n,i){var o=t.key,s=t.type,l=n-1,a=n+1,_=e[n];if(_===null||_&&o==_.key&&s===_.type&&!(131072&_.__u))return n;if(i>(_!=null&&!(131072&_.__u)?1:0))for(;l>=0||a<e.length;){if(l>=0){if((_=e[l])&&!(131072&_.__u)&&o==_.key&&s===_.type)return l;l--}if(a<e.length){if((_=e[a])&&!(131072&_.__u)&&o==_.key&&s===_.type)return a;a++}}return-1}function le(t,e,n){e[0]==="-"?t.setProperty(e,n??""):t[e]=n==null?"":typeof n!="number"||Ie.test(e)?n:n+"px"}function V(t,e,n,i,o){var s;e:if(e==="style")if(typeof n=="string")t.style.cssText=n;else{if(typeof i=="string"&&(t.style.cssText=i=""),i)for(e in i)n&&e in n||le(t.style,e,"");if(n)for(e in n)i&&n[e]===i[e]||le(t.style,e,n[e])}else if(e[0]==="o"&&e[1]==="n")s=e!==(e=e.replace(/(PointerCapture)$|Capture$/i,"$1")),e=e.toLowerCase()in t?e.toLowerCase().slice(2):e.slice(2),t.l||(t.l={}),t.l[e+s]=n,n?i?n.u=i.u:(n.u=Date.now(),t.addEventListener(e,s?ce:ae,s)):t.removeEventListener(e,s?ce:ae,s);else{if(o)e=e.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(e!=="width"&&e!=="height"&&e!=="href"&&e!=="list"&&e!=="form"&&e!=="tabIndex"&&e!=="download"&&e!=="rowSpan"&&e!=="colSpan"&&e!=="role"&&e in t)try{t[e]=n??"";break e}catch{}typeof n=="function"||(n==null||n===!1&&e[4]!=="-"?t.removeAttribute(e):t.setAttribute(e,n))}}function ae(t){if(this.l){var e=this.l[t.type+!1];if(t.t){if(t.t<=e.u)return}else t.t=Date.now();return e(p.event?p.event(t):t)}}function ce(t){if(this.l)return this.l[t.type+!0](p.event?p.event(t):t)}function Y(t,e,n,i,o,s,l,a,_,c){var d,r,g,u,m,k,v,f,b,x,M,I,ne,O,X,y=e.type;if(e.constructor!==void 0)return null;128&n.__u&&(_=!!(32&n.__u),s=[a=e.__e=n.__e]),(d=p.__b)&&d(e);e:if(typeof y=="function")try{if(f=e.props,b=(d=y.contextType)&&i[d.__c],x=d?b?b.props.value:d.__:i,n.__c?v=(r=e.__c=n.__c).__=r.__E:("prototype"in y&&y.prototype.render?e.__c=r=new y(f,x):(e.__c=r=new U(f,x),r.constructor=y,r.render=Oe),b&&b.sub(r),r.props=f,r.state||(r.state={}),r.context=x,r.__n=i,g=r.__d=!0,r.__h=[],r._sb=[]),r.__s==null&&(r.__s=r.state),y.getDerivedStateFromProps!=null&&(r.__s==r.state&&(r.__s=P({},r.__s)),P(r.__s,y.getDerivedStateFromProps(f,r.__s))),u=r.props,m=r.state,r.__v=e,g)y.getDerivedStateFromProps==null&&r.componentWillMount!=null&&r.componentWillMount(),r.componentDidMount!=null&&r.__h.push(r.componentDidMount);else{if(y.getDerivedStateFromProps==null&&f!==u&&r.componentWillReceiveProps!=null&&r.componentWillReceiveProps(f,x),!r.__e&&(r.shouldComponentUpdate!=null&&r.shouldComponentUpdate(f,r.__s,x)===!1||e.__v===n.__v)){for(e.__v!==n.__v&&(r.props=f,r.state=r.__s,r.__d=!1),e.__e=n.__e,e.__k=n.__k,e.__k.forEach(function(H){H&&(H.__=e)}),M=0;M<r._sb.length;M++)r.__h.push(r._sb[M]);r._sb=[],r.__h.length&&l.push(r);break e}r.componentWillUpdate!=null&&r.componentWillUpdate(f,r.__s,x),r.componentDidUpdate!=null&&r.__h.push(function(){r.componentDidUpdate(u,m,k)})}if(r.context=x,r.props=f,r.__P=t,r.__e=!1,I=p.__r,ne=0,"prototype"in y&&y.prototype.render){for(r.state=r.__s,r.__d=!1,I&&I(e),d=r.render(r.props,r.state,r.context),O=0;O<r._sb.length;O++)r.__h.push(r._sb[O]);r._sb=[]}else do r.__d=!1,I&&I(e),d=r.render(r.props,r.state,r.context),r.state=r.__s;while(r.__d&&++ne<25);r.state=r.__s,r.getChildContext!=null&&(i=P(P({},i),r.getChildContext())),g||r.getSnapshotBeforeUpdate==null||(k=r.getSnapshotBeforeUpdate(u,m)),he(t,Q(X=d!=null&&d.type===S&&d.key==null?d.props.children:d)?X:[X],e,n,i,o,s,l,a,_,c),r.base=e.__e,e.__u&=-161,r.__h.length&&l.push(r),v&&(r.__E=r.__=null)}catch(H){e.__v=null,_||s!=null?(e.__e=a,e.__u|=_?160:32,s[s.indexOf(a)]=null):(e.__e=n.__e,e.__k=n.__k),p.__e(H,e,n)}else s==null&&e.__v===n.__v?(e.__k=n.__k,e.__e=n.__e):e.__e=Me(n.__e,e,n,i,o,s,l,_,c);(d=p.diffed)&&d(e)}function ge(t,e,n){e.__d=void 0;for(var i=0;i<n.length;i++)ee(n[i],n[++i],n[++i]);p.__c&&p.__c(e,t),t.some(function(o){try{t=o.__h,o.__h=[],t.some(function(s){s.call(o)})}catch(s){p.__e(s,o.__v)}})}function Me(t,e,n,i,o,s,l,a,_){var c,d,r,g,u,m,k,v=n.props,f=e.props,b=e.type;if(b==="svg"&&(o=!0),s!=null){for(c=0;c<s.length;c++)if((u=s[c])&&"setAttribute"in u==!!b&&(b?u.localName===b:u.nodeType===3)){t=u,s[c]=null;break}}if(t==null){if(b===null)return document.createTextNode(f);t=o?document.createElementNS("http://www.w3.org/2000/svg",b):document.createElement(b,f.is&&f),s=null,a=!1}if(b===null)v===f||a&&t.data===f||(t.data=f);else{if(s=s&&R.call(t.childNodes),v=n.props||T,!a&&s!=null)for(v={},c=0;c<t.attributes.length;c++)v[(u=t.attributes[c]).name]=u.value;for(c in v)u=v[c],c=="children"||(c=="dangerouslySetInnerHTML"?r=u:c==="key"||c in f||V(t,c,null,u,o));for(c in f)u=f[c],c=="children"?g=u:c=="dangerouslySetInnerHTML"?d=u:c=="value"?m=u:c=="checked"?k=u:c==="key"||a&&typeof u!="function"||v[c]===u||V(t,c,u,v[c],o);if(d)a||r&&(d.__html===r.__html||d.__html===t.innerHTML)||(t.innerHTML=d.__html),e.__k=[];else if(r&&(t.innerHTML=""),he(t,Q(g)?g:[g],e,n,i,o&&b!=="foreignObject",s,l,s?s[0]:n.__k&&D(n,0),a,_),s!=null)for(c=s.length;c--;)s[c]!=null&&pe(s[c]);a||(c="value",m!==void 0&&(m!==t[c]||b==="progress"&&!m||b==="option"&&m!==v[c])&&V(t,c,m,v[c],!1),c="checked",k!==void 0&&k!==t[c]&&V(t,c,k,v[c],!1))}return t}function ee(t,e,n){try{typeof t=="function"?t(e):t.current=e}catch(i){p.__e(i,n)}}function K(t,e,n){var i,o;if(p.unmount&&p.unmount(t),(i=t.ref)&&(i.current&&i.current!==t.__e||ee(i,null,e)),(i=t.__c)!=null){if(i.componentWillUnmount)try{i.componentWillUnmount()}catch(s){p.__e(s,e)}i.base=i.__P=null,t.__c=void 0}if(i=t.__k)for(o=0;o<i.length;o++)i[o]&&K(i[o],e,n||typeof t.type!="function");n||t.__e==null||pe(t.__e),t.__=t.__e=t.__d=void 0}function Oe(t,e,n){return this.constructor(t,n)}function E(t,e,n){var i,o,s,l;p.__&&p.__(t,e),o=(i=typeof n=="function")?null:n&&n.__k||e.__k,s=[],l=[],Y(e,t=(!i&&n||e).__k=Ne(S,null,[t]),o||T,T,e.ownerSVGElement!==void 0,!i&&n?[n]:o?null:e.firstChild?R.call(e.childNodes):null,s,!i&&n?n:o?o.__e:e.firstChild,i,l),ge(s,t,l)}R=de.slice,p={__e:function(t,e,n,i){for(var o,s,l;e=e.__;)if((o=e.__c)&&!o.__)try{if((s=o.constructor)&&s.getDerivedStateFromError!=null&&(o.setState(s.getDerivedStateFromError(t)),l=o.__d),o.componentDidCatch!=null&&(o.componentDidCatch(t,i||{}),l=o.__d),l)return o.__E=o}catch(a){t=a}throw t}},_e=0,Se=function(t){return t!=null&&t.constructor==null},U.prototype.setState=function(t,e){var n;n=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=P({},this.state),typeof t=="function"&&(t=t(P({},n),this.props)),t&&P(n,t),t!=null&&this.__v&&(e&&this._sb.push(e),se(this))},U.prototype.forceUpdate=function(t){this.__v&&(this.__e=!0,t&&this.__h.push(t),se(this))},U.prototype.render=S,L=[],ue=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,J=function(t,e){return t.__v.__b-e.__v.__b},$.__r=0,Ee=0;var He=0,qe=Array.isArray;function h(t,e,n,i,o,s){var l,a,_={};for(a in e)a=="ref"?l=e[a]:_[a]=e[a];var c={type:t,props:_,key:n,ref:l,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:--He,__i:-1,__u:0,__source:o,__self:s};if(typeof t=="function"&&(l=t.defaultProps))for(a in l)_[a]===void 0&&(_[a]=l[a]);return p.vnode&&p.vnode(c),c}var ve=t=>{let{className:e,label:n,onClick:i}=t;return h("div",{className:"deck-widget-button",children:h("button",{className:`deck-widget-icon-button ${e}`,type:"button",onClick:i,title:n,children:h("div",{className:"deck-widget-icon"})})})},be=t=>{let{children:e,orientation:n}=t;return h("div",{className:`deck-widget-button-group ${n}`,children:e})},te=t=>{let{className:e,label:n,onClick:i}=t;return h("button",{className:`deck-widget-icon-button ${e}`,type:"button",onClick:i,title:n,children:h("div",{className:"deck-widget-icon"})})};var B=class{constructor(e){this.id="fullscreen";this.placement="top-left";this.fullscreen=!1;this.id=e.id||"fullscreen",this.placement=e.placement||"top-left",e.enterLabel=e.enterLabel||"Enter Fullscreen",e.exitLabel=e.exitLabel||"Exit Fullscreen",e.style=e.style||{},this.props=e}onAdd({deck:e}){let{style:n,className:i}=this.props,o=document.createElement("div");return o.classList.add("deck-widget","deck-widget-fullscreen"),i&&o.classList.add(i),n&&Object.entries(n).map(([s,l])=>o.style.setProperty(s,l)),this.deck=e,this.element=o,this.update(),document.addEventListener("fullscreenchange",this.onFullscreenChange.bind(this)),o}onRemove(){this.deck=void 0,this.element=void 0,document.removeEventListener("fullscreenchange",this.onFullscreenChange.bind(this))}update(){let{enterLabel:e,exitLabel:n}=this.props,i=this.element;if(!i)return;let o=h(ve,{onClick:this.handleClick.bind(this),label:this.fullscreen?n:e,className:this.fullscreen?"deck-widget-fullscreen-exit":"deck-widget-fullscreen-enter"});E(o,i)}setProps(e){let n=this.props,i=this.element;i&&(n.className!==e.className&&(n.className&&i.classList.remove(n.className),e.className&&i.classList.add(e.className)),(0,ye._deepEqual)(n.style,e.style,1)||(n.style&&Object.entries(n.style).map(([o])=>i.style.removeProperty(o)),e.style&&Object.entries(e.style).map(([o,s])=>i.style.setProperty(o,s)))),Object.assign(this.props,e)}getContainer(){return this.props.container||this.deck?.getCanvas()?.parentElement}onFullscreenChange(){let e=this.fullscreen,n=document.fullscreenElement===this.getContainer();e!==n&&(this.fullscreen=!this.fullscreen),this.update()}async handleClick(){this.fullscreen?await this.exitFullscreen():await this.requestFullscreen(),this.update()}async requestFullscreen(){let e=this.getContainer();e?.requestFullscreen?await e.requestFullscreen({navigationUI:"hide"}):this.togglePseudoFullscreen()}async exitFullscreen(){document.exitFullscreen?await document.exitFullscreen():this.togglePseudoFullscreen()}togglePseudoFullscreen(){this.getContainer()?.classList.toggle("deck-pseudo-fullscreen")}};var W=N(F(),1);var G=class{constructor(e){this.id="compass";this.placement="top-left";this.viewId=null;this.id=e.id||"compass",this.viewId=e.viewId||null,this.placement=e.placement||"top-left",e.transitionDuration=e.transitionDuration||200,e.label=e.label||"Compass",e.style=e.style||{},this.props=e}setProps(e){Object.assign(this.props,e)}onViewportChange(e){this.viewport=e,this.update()}onAdd({deck:e}){let{style:n,className:i}=this.props,o=document.createElement("div");return o.classList.add("deck-widget","deck-widget-compass"),i&&o.classList.add(i),n&&Object.entries(n).map(([s,l])=>o.style.setProperty(s,l)),this.deck=e,this.element=o,this.update(),o}getRotation(){return this.viewport instanceof W.WebMercatorViewport?[-this.viewport.bearing,this.viewport.pitch]:this.viewport instanceof W._GlobeViewport?[0,Math.max(-80,Math.min(80,this.viewport.latitude))]:[0,0]}update(){let[e,n]=this.getRotation(),i=this.element;if(!i)return;let o=h("div",{className:"deck-widget-button",style:{perspective:100},children:h("button",{type:"button",onClick:()=>this.handleCompassReset(),label:this.props.label,style:{transform:`rotateX(${n}deg)`},children:h("svg",{fill:"none",width:"100%",height:"100%",viewBox:"0 0 26 26",children:h("g",{transform:`rotate(${e},13,13)`,children:[h("path",{d:"M10 13.0001L12.9999 5L15.9997 13.0001H10Z",fill:"var(--icon-compass-north-color, #F05C44)"}),h("path",{d:"M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z",fill:"var(--icon-compass-south-color, #C2C2CC)"})]})})})});E(o,i)}onRemove(){this.deck=void 0,this.element=void 0}handleCompassReset(){let e=this.viewId||"default-view";if(this.viewport instanceof W.WebMercatorViewport){let n={...this.viewport,bearing:0,...this.getRotation()[0]===0?{pitch:0}:{},transitionDuration:this.props.transitionDuration,transitionInterpolator:new W.FlyToInterpolator};this.deck._onViewStateChange({viewId:e,viewState:n,interactionState:{}})}}};var ke=N(F(),1);var q=class{constructor(e){this.id="zoom";this.placement="top-left";this.orientation="vertical";this.viewId=null;this.id=e.id||"zoom",this.viewId=e.viewId||null,this.placement=e.placement||"top-left",this.orientation=e.orientation||"vertical",e.transitionDuration=e.transitionDuration||200,e.zoomInLabel=e.zoomInLabel||"Zoom In",e.zoomOutLabel=e.zoomOutLabel||"Zoom Out",e.style=e.style||{},this.props=e}onAdd({deck:e}){let{style:n,className:i}=this.props,o=document.createElement("div");o.classList.add("deck-widget","deck-widget-zoom"),i&&o.classList.add(i),n&&Object.entries(n).map(([l,a])=>o.style.setProperty(l,a));let s=h(be,{orientation:this.orientation,children:[h(te,{onClick:()=>this.handleZoomIn(),label:this.props.zoomInLabel,className:"deck-widget-zoom-in"}),h(te,{onClick:()=>this.handleZoomOut(),label:this.props.zoomOutLabel,className:"deck-widget-zoom-out"})]});return E(s,o),this.deck=e,this.element=o,o}onRemove(){this.deck=void 0,this.element=void 0}setProps(e){Object.assign(this.props,e)}onViewportChange(e){this.viewport=e}handleZoom(e){let n=this.viewId||"default-view",i={...this.viewport,zoom:e,transitionDuration:this.props.transitionDuration,transitionInterpolator:new ke.FlyToInterpolator};this.deck._onViewStateChange({viewId:n,viewState:i,interactionState:{}})}handleZoomIn(){this.viewport&&this.handleZoom(this.viewport.zoom+1)}handleZoomOut(){this.viewport&&this.handleZoom(this.viewport.zoom-1)}};var Ze={"--button-background":"#fff","--button-stroke":"rgba(255, 255, 255, 0.3)","--button-inner-stroke":"unset","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25)","--button-backdrop-filter":"unset","--button-icon-idle":"rgba(97, 97, 102, 1)","--button-icon-hover":"rgba(24, 24, 26, 1)","--icon-compass-north-color":"#F05C44","--icon-compass-south-color":"#C2C2CC"},Ae={"--button-background":"rgba(18, 18, 20, 1)","--button-stroke":"rgba(18, 18, 20, 0.30)","--button-inner-stroke":"unset","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25)","--button-backdrop-filter":"unset","--button-icon-idle":"rgba(158, 157, 168, 1)","--button-icon-hover":"rgba(215, 214, 229, 1)","--icon-compass-north-color":"#F05C44","--icon-compass-south-color":"#C2C2CC"},Ve={"--button-background":"rgba(255, 255, 255, 0.6)","--button-stroke":"rgba(255, 255, 255, 0.3)","--button-inner-stroke":"1px solid rgba(255, 255, 255, 0.6)","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset","--button-backdrop-filter":"blur(4px)","--button-icon-idle":"rgba(97, 97, 102, 1)","--button-icon-hover":"rgba(24, 24, 26, 1)","--icon-compass-north-color":"#F05C44","--icon-compass-south-color":"#C2C2CC"},je={"--button-background":"rgba(18, 18, 20, 0.75)","--button-stroke":"rgba(18, 18, 20, 0.30)","--button-inner-stroke":"1px solid rgba(18, 18, 20, 0.75)","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset","--button-backdrop-filter":"blur(4px)","--button-icon-idle":"rgba(158, 157, 168, 1)","--button-icon-hover":"rgba(215, 214, 229, 1)","--icon-compass-north-color":"#F05C44","--icon-compass-south-color":"#C2C2CC"};return Fe(z);})();
       return __exports__;
       });

package/package.json

@@ -2,7 +2,8 @@
   "name": "@deck.gl/widgets",
   "description": "UI widgets for deck.gl",
   "license": "MIT",
-  "version": "9.0.0-beta.1",
+  "type": "module",
+  "version": "9.0.0-beta.11",
   "publishConfig": {
     "access": "public"
   },
@@ -16,26 +17,32 @@
     "type": "git",
     "url": "https://github.com/visgl/deck.gl.git"
   },
-  "main": "dist/es5/index.js",
-  "module": "dist/esm/index.js",
-  "types": "typed/index.d.ts",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
     "dist",
     "src",
-    "typed",
     "dist.min.js"
   ],
   "sideEffects": false,
   "scripts": {
+    "build": "cp ./src/stylesheet.css ./dist/stylesheet.css",
     "build-bundle": "ocular-bundle ./bundle.ts",
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@babel/runtime": "^7.0.0",
     "preact": "^10.17.0"
   },
   "peerDependencies": {
-    "@deck.gl/core": "^9.0.0-alpha"
+    "@deck.gl/core": "^9.0.0-beta"
   },
-  "gitHead": "9628417918bec5cc73c1345bfcd2f2be575741f1"
+  "gitHead": "d8a3f5bdb644f85caba9d5c1e74baff8f8a3d439"
 }

package/src/compass-widget.tsx

@@ -0,0 +1,133 @@
+/* global document */
+import {FlyToInterpolator, WebMercatorViewport, _GlobeViewport} from '@deck.gl/core';
+import type {Deck, Viewport, Widget, WidgetPlacement} from '@deck.gl/core';
+import {render} from 'preact';
+
+interface CompassWidgetProps {
+  id: string;
+  placement?: WidgetPlacement;
+  /**
+   * View to attach to and interact with. Required when using multiple views.
+   */
+  viewId?: string | null;
+  /**
+   * Tooltip message.
+   */
+  label?: string;
+  /**
+   * Bearing and pitch reset transition duration in ms.
+   */
+  transitionDuration?: number;
+  /**
+   * CSS inline style overrides.
+   */
+  style?: Partial<CSSStyleDeclaration>;
+  /**
+   * Additional CSS class.
+   */
+  className?: string;
+}
+
+export class CompassWidget implements Widget<CompassWidgetProps> {
+  id = 'compass';
+  props: CompassWidgetProps;
+  placement: WidgetPlacement = 'top-left';
+  viewId?: string | null = null;
+  viewport?: Viewport;
+  deck?: Deck<any>;
+  element?: HTMLDivElement;
+
+  constructor(props: CompassWidgetProps) {
+    this.id = props.id || 'compass';
+    this.viewId = props.viewId || null;
+    this.placement = props.placement || 'top-left';
+    props.transitionDuration = props.transitionDuration || 200;
+    props.label = props.label || 'Compass';
+    props.style = props.style || {};
+    this.props = props;
+  }
+
+  setProps(props: Partial<CompassWidgetProps>) {
+    Object.assign(this.props, props);
+  }
+
+  onViewportChange(viewport) {
+    this.viewport = viewport;
+    this.update();
+  }
+
+  onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {
+    const {style, className} = this.props;
+    const element = document.createElement('div');
+    element.classList.add('deck-widget', 'deck-widget-compass');
+    if (className) element.classList.add(className);
+    if (style) {
+      Object.entries(style).map(([key, value]) => element.style.setProperty(key, value as string));
+    }
+    this.deck = deck;
+    this.element = element;
+    this.update();
+    return element;
+  }
+
+  getRotation() {
+    if (this.viewport instanceof WebMercatorViewport) {
+      return [-this.viewport.bearing, this.viewport.pitch];
+    } else if (this.viewport instanceof _GlobeViewport) {
+      return [0, Math.max(-80, Math.min(80, this.viewport.latitude))];
+    }
+    return [0, 0];
+  }
+
+  update() {
+    const [rz, rx] = this.getRotation();
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+    const ui = (
+      <div className="deck-widget-button" style={{perspective: 100}}>
+        <button
+          type="button"
+          onClick={() => this.handleCompassReset()}
+          label={this.props.label}
+          style={{transform: `rotateX(${rx}deg)`}}
+        >
+          <svg fill="none" width="100%" height="100%" viewBox="0 0 26 26">
+            <g transform={`rotate(${rz},13,13)`}>
+              <path
+                d="M10 13.0001L12.9999 5L15.9997 13.0001H10Z"
+                fill="var(--icon-compass-north-color, #F05C44)"
+              />
+              <path
+                d="M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z"
+                fill="var(--icon-compass-south-color, #C2C2CC)"
+              />
+            </g>
+          </svg>
+        </button>
+      </div>
+    );
+    render(ui, element);
+  }
+
+  onRemove() {
+    this.deck = undefined;
+    this.element = undefined;
+  }
+
+  handleCompassReset() {
+    const viewId = this.viewId || 'default-view';
+    if (this.viewport instanceof WebMercatorViewport) {
+      const nextViewState = {
+        ...this.viewport,
+        bearing: 0,
+        ...(this.getRotation()[0] === 0 ? {pitch: 0} : {}),
+        transitionDuration: this.props.transitionDuration,
+        transitionInterpolator: new FlyToInterpolator()
+      };
+      // @ts-ignore Using private method temporary until there's a public one
+      this.deck._onViewStateChange({viewId, viewState: nextViewState, interactionState: {}});
+    }
+  }
+}