@deck.gl/widgets 9.0.0-beta.9 → 9.0.1

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,6 +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 ge=Object.create;var A=Object.defineProperty;var be=Object.getOwnPropertyDescriptor;var ve=Object.getOwnPropertyNames;var ye=Object.getPrototypeOf,ke=Object.prototype.hasOwnProperty;var xe=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),Ce=(t,e)=>{for(var n in e)A(t,n,{get:e[n],enumerable:!0})},I=(t,e,n,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of ve(e))!ke.call(t,s)&&s!==n&&A(t,s,{get:()=>e[s],enumerable:!(l=be(e,s))||l.enumerable});return t},w=(t,e,n)=>(I(t,e,"default"),n&&I(n,e,"default")),V=(t,e,n)=>(n=t!=null?ge(ye(t)):{},I(e||!t||!t.__esModule?A(n,"default",{value:t,enumerable:!0}):n,t)),Pe=t=>I(A({},"__esModule",{value:!0}),t);var O=xe((Oe,Y)=>{Y.exports=globalThis.deck});var M={};Ce(M,{DarkGlassTheme:()=>Ie,DarkTheme:()=>Me,FullscreenWidget:()=>G,LightGlassTheme:()=>He,LightTheme:()=>Ue});var C={},Z=V(O(),1);w(C,V(O(),1));if(!Z.Layer)throw new Error("@deck.gl/core is not found");w(M,C);var me=V(O(),1);var $,p,le,we,L,ee,se,z,Fe,N={},ie=[],Le=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,K=Array.isArray;function F(t,e){for(var n in e)t[n]=e[n];return t}function _e(t){var e=t.parentNode;e&&e.removeChild(t)}function Ee(t,e,n){var l,s,r,_={};for(r in e)r=="key"?l=e[r]:r=="ref"?s=e[r]:_[r]=e[r];if(arguments.length>2&&(_.children=arguments.length>3?$.call(arguments,2):n),typeof t=="function"&&t.defaultProps!=null)for(r in t.defaultProps)_[r]===void 0&&(_[r]=t.defaultProps[r]);return j(t,_,l,s,null)}function j(t,e,n,l,s){var r={type:t,props:e,key:n,ref:l,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:s??++le};return s==null&&p.vnode!=null&&p.vnode(r),r}function U(t){return t.children}function q(t,e){this.props=t,this.context=e}function W(t,e){if(e==null)return t.__?W(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"?W(t):null}function ce(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 ce(t)}}function te(t){(!t.__d&&(t.__d=!0)&&L.push(t)&&!B.__r++||ee!==p.debounceRendering)&&((ee=p.debounceRendering)||se)(B)}function B(){var t,e,n,l,s,r,_,a,c;for(L.sort(z);t=L.shift();)t.__d&&(e=L.length,l=void 0,s=void 0,r=void 0,a=(_=(n=t).__v).__e,(c=n.__P)&&(l=[],s=[],(r=F({},_)).__v=_.__v+1,Q(c,_,r,n.__n,c.ownerSVGElement!==void 0,_.__h!=null?[a]:null,l,a??W(_),_.__h,s),pe(l,_,s),_.__e!=a&&ce(_)),L.length>e&&L.sort(z));B.__r=0}function ae(t,e,n,l,s,r,_,a,c,v,h){var o,b,u,i,f,E,d,m,x,y=0,g=l&&l.__k||ie,D=g.length,P=D,S=e.length;for(n.__k=[],o=0;o<S;o++)(i=n.__k[o]=(i=e[o])==null||typeof i=="boolean"||typeof i=="function"?null:typeof i=="string"||typeof i=="number"||typeof i=="bigint"?j(null,i,null,null,i):K(i)?j(U,{children:i},null,null,null):i.__b>0?j(i.type,i.props,i.key,i.ref?i.ref:null,i.__v):i)!=null?(i.__=n,i.__b=n.__b+1,(m=Se(i,g,d=o+y,P))===-1?u=N:(u=g[m]||N,g[m]=void 0,P--),Q(t,i,u,s,r,_,a,c,v,h),f=i.__e,(b=i.ref)&&u.ref!=b&&(u.ref&&X(u.ref,null,i),h.push(b,i.__c||f,i)),f!=null&&(E==null&&(E=f),(x=u===N||u.__v===null)?m==-1&&y--:m!==d&&(m===d+1?y++:m>d?P>S-d?y+=m-d:y--:y=m<d&&m==d-1?m-d:0),d=o+y,typeof i.type!="function"||m===d&&u.__k!==i.__k?typeof i.type=="function"||m===d&&!x?i.__d!==void 0?(c=i.__d,i.__d=void 0):c=f.nextSibling:c=fe(t,f,c):c=ue(i,c,t),typeof n.type=="function"&&(n.__d=c))):(u=g[o])&&u.key==null&&u.__e&&(u.__e==c&&(c=W(u)),J(u,u,!1));for(n.__e=E,o=D;o--;)g[o]!=null&&(typeof n.type=="function"&&g[o].__e!=null&&g[o].__e==n.__d&&(n.__d=g[o].__e.nextSibling),J(g[o],g[o]))}function ue(t,e,n){for(var l,s=t.__k,r=0;s&&r<s.length;r++)(l=s[r])&&(l.__=t,e=typeof l.type=="function"?ue(l,e,n):fe(n,l.__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 Se(t,e,n,l){var s=t.key,r=t.type,_=n-1,a=n+1,c=e[n];if(c===null||c&&s==c.key&&r===c.type)return n;if(l>(c!=null?1:0))for(;_>=0||a<e.length;){if(_>=0){if((c=e[_])&&s==c.key&&r===c.type)return _;_--}if(a<e.length){if((c=e[a])&&s==c.key&&r===c.type)return a;a++}}return-1}function Ne(t,e,n,l,s){var r;for(r in n)r==="children"||r==="key"||r in e||R(t,r,null,n[r],l);for(r in e)s&&typeof e[r]!="function"||r==="children"||r==="key"||r==="value"||r==="checked"||n[r]===e[r]||R(t,r,e[r],n[r],l)}function ne(t,e,n){e[0]==="-"?t.setProperty(e,n??""):t[e]=n==null?"":typeof n!="number"||Le.test(e)?n:n+"px"}function R(t,e,n,l,s){var r;e:if(e==="style")if(typeof n=="string")t.style.cssText=n;else{if(typeof l=="string"&&(t.style.cssText=l=""),l)for(e in l)n&&e in n||ne(t.style,e,"");if(n)for(e in n)l&&n[e]===l[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?l||t.addEventListener(e,r?re:oe,r):t.removeEventListener(e,r?re:oe,r);else if(e!=="dangerouslySetInnerHTML"){if(s)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 oe(t){return this.l[t.type+!1](p.event?p.event(t):t)}function re(t){return this.l[t.type+!0](p.event?p.event(t):t)}function Q(t,e,n,l,s,r,_,a,c,v){var h,o,b,u,i,f,E,d,m,x,y,g,D,P,S,k=e.type;if(e.constructor!==void 0)return null;n.__h!=null&&(c=n.__h,a=e.__e=n.__e,e.__h=null,r=[a]),(h=p.__b)&&h(e);e:if(typeof k=="function")try{if(d=e.props,m=(h=k.contextType)&&l[h.__c],x=h?m?m.props.value:h.__:l,n.__c?E=(o=e.__c=n.__c).__=o.__E:("prototype"in k&&k.prototype.render?e.__c=o=new k(d,x):(e.__c=o=new q(d,x),o.constructor=k,o.render=De),m&&m.sub(o),o.props=d,o.state||(o.state={}),o.context=x,o.__n=l,b=o.__d=!0,o.__h=[],o._sb=[]),o.__s==null&&(o.__s=o.state),k.getDerivedStateFromProps!=null&&(o.__s==o.state&&(o.__s=F({},o.__s)),F(o.__s,k.getDerivedStateFromProps(d,o.__s))),u=o.props,i=o.state,o.__v=e,b)k.getDerivedStateFromProps==null&&o.componentWillMount!=null&&o.componentWillMount(),o.componentDidMount!=null&&o.__h.push(o.componentDidMount);else{if(k.getDerivedStateFromProps==null&&d!==u&&o.componentWillReceiveProps!=null&&o.componentWillReceiveProps(d,x),!o.__e&&(o.shouldComponentUpdate!=null&&o.shouldComponentUpdate(d,o.__s,x)===!1||e.__v===n.__v)){for(e.__v!==n.__v&&(o.props=d,o.state=o.__s,o.__d=!1),e.__e=n.__e,e.__k=n.__k,e.__k.forEach(function(H){H&&(H.__=e)}),y=0;y<o._sb.length;y++)o.__h.push(o._sb[y]);o._sb=[],o.__h.length&&_.push(o);break e}o.componentWillUpdate!=null&&o.componentWillUpdate(d,o.__s,x),o.componentDidUpdate!=null&&o.__h.push(function(){o.componentDidUpdate(u,i,f)})}if(o.context=x,o.props=d,o.__P=t,o.__e=!1,g=p.__r,D=0,"prototype"in k&&k.prototype.render){for(o.state=o.__s,o.__d=!1,g&&g(e),h=o.render(o.props,o.state,o.context),P=0;P<o._sb.length;P++)o.__h.push(o._sb[P]);o._sb=[]}else do o.__d=!1,g&&g(e),h=o.render(o.props,o.state,o.context),o.state=o.__s;while(o.__d&&++D<25);o.state=o.__s,o.getChildContext!=null&&(l=F(F({},l),o.getChildContext())),b||o.getSnapshotBeforeUpdate==null||(f=o.getSnapshotBeforeUpdate(u,i)),ae(t,K(S=h!=null&&h.type===U&&h.key==null?h.props.children:h)?S:[S],e,n,l,s,r,_,a,c,v),o.base=e.__e,e.__h=null,o.__h.length&&_.push(o),E&&(o.__E=o.__=null)}catch(H){e.__v=null,(c||r!=null)&&(e.__e=a,e.__h=!!c,r[r.indexOf(a)]=null),p.__e(H,e,n)}else r==null&&e.__v===n.__v?(e.__k=n.__k,e.__e=n.__e):e.__e=Te(n.__e,e,n,l,s,r,_,c,v);(h=p.diffed)&&h(e)}function pe(t,e,n){for(var l=0;l<n.length;l++)X(n[l],n[++l],n[++l]);p.__c&&p.__c(e,t),t.some(function(s){try{t=s.__h,s.__h=[],t.some(function(r){r.call(s)})}catch(r){p.__e(r,s.__v)}})}function Te(t,e,n,l,s,r,_,a,c){var v,h,o,b=n.props,u=e.props,i=e.type,f=0;if(i==="svg"&&(s=!0),r!=null){for(;f<r.length;f++)if((v=r[f])&&"setAttribute"in v==!!i&&(i?v.localName===i:v.nodeType===3)){t=v,r[f]=null;break}}if(t==null){if(i===null)return document.createTextNode(u);t=s?document.createElementNS("http://www.w3.org/2000/svg",i):document.createElement(i,u.is&&u),r=null,a=!1}if(i===null)b===u||a&&t.data===u||(t.data=u);else{if(r=r&&$.call(t.childNodes),h=(b=n.props||N).dangerouslySetInnerHTML,o=u.dangerouslySetInnerHTML,!a){if(r!=null)for(b={},f=0;f<t.attributes.length;f++)b[t.attributes[f].name]=t.attributes[f].value;(o||h)&&(o&&(h&&o.__html==h.__html||o.__html===t.innerHTML)||(t.innerHTML=o&&o.__html||""))}if(Ne(t,u,b,s,a),o)e.__k=[];else if(ae(t,K(f=e.props.children)?f:[f],e,n,l,s&&i!=="foreignObject",r,_,r?r[0]:n.__k&&W(n,0),a,c),r!=null)for(f=r.length;f--;)r[f]!=null&&_e(r[f]);a||("value"in u&&(f=u.value)!==void 0&&(f!==t.value||i==="progress"&&!f||i==="option"&&f!==b.value)&&R(t,"value",f,b.value,!1),"checked"in u&&(f=u.checked)!==void 0&&f!==t.checked&&R(t,"checked",f,b.checked,!1))}return t}function X(t,e,n){try{typeof t=="function"?t(e):t.current=e}catch(l){p.__e(l,n)}}function J(t,e,n){var l,s;if(p.unmount&&p.unmount(t),(l=t.ref)&&(l.current&&l.current!==t.__e||X(l,null,e)),(l=t.__c)!=null){if(l.componentWillUnmount)try{l.componentWillUnmount()}catch(r){p.__e(r,e)}l.base=l.__P=null,t.__c=void 0}if(l=t.__k)for(s=0;s<l.length;s++)l[s]&&J(l[s],e,n||typeof t.type!="function");n||t.__e==null||_e(t.__e),t.__=t.__e=t.__d=void 0}function De(t,e,n){return this.constructor(t,n)}function de(t,e,n){var l,s,r,_;p.__&&p.__(t,e),s=(l=typeof n=="function")?null:n&&n.__k||e.__k,r=[],_=[],Q(e,t=(!l&&n||e).__k=Ee(U,null,[t]),s||N,N,e.ownerSVGElement!==void 0,!l&&n?[n]:s?null:e.firstChild?$.call(e.childNodes):null,r,!l&&n?n:s?s.__e:e.firstChild,l,_),pe(r,t,_)}$=ie.slice,p={__e:function(t,e,n,l){for(var s,r,_;e=e.__;)if((s=e.__c)&&!s.__)try{if((r=s.constructor)&&r.getDerivedStateFromError!=null&&(s.setState(r.getDerivedStateFromError(t)),_=s.__d),s.componentDidCatch!=null&&(s.componentDidCatch(t,l||{}),_=s.__d),_)return s.__E=s}catch(a){t=a}throw t}},le=0,we=function(t){return t!=null&&t.constructor===void 0},q.prototype.setState=function(t,e){var n;n=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=F({},this.state),typeof t=="function"&&(t=t(F({},n),this.props)),t&&F(n,t),t!=null&&this.__v&&(e&&this._sb.push(e),te(this))},q.prototype.forceUpdate=function(t){this.__v&&(this.__e=!0,t&&this.__h.push(t),te(this))},q.prototype.render=U,L=[],se=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,z=function(t,e){return t.__v.__b-e.__v.__b},B.__r=0,Fe=0;var We=0;function T(t,e,n,l,s,r){var _,a,c={};for(a in e)a=="ref"?_=e[a]:c[a]=e[a];var v={type:t,props:c,key:n,ref:_,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:--We,__source:s,__self:r};if(typeof t=="function"&&(_=t.defaultProps))for(a in _)c[a]===void 0&&(c[a]=_[a]);return p.vnode&&p.vnode(v),v}var he=t=>{let{className:e,label:n,onClick:l}=t;return T("div",{className:"deck-widget-button-border",children:T("button",{className:`deck-widget-button ${e}`,type:"button",onClick:l,title:n,children:T("div",{className:"deck-widget-icon"})})})};var G=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:l}=this.props,s=document.createElement("div");return s.classList.add("deck-widget","deck-widget-fullscreen"),l&&s.classList.add(l),n&&Object.entries(n).map(([r,_])=>s.style.setProperty(r,_)),this.deck=e,this.element=s,this.update(),document.addEventListener("fullscreenchange",this.onFullscreenChange.bind(this)),s}onRemove(){this.deck=void 0,this.element=void 0,document.removeEventListener("fullscreenchange",this.onFullscreenChange.bind(this))}update(){let{enterLabel:e,exitLabel:n}=this.props,l=this.element;if(!l)return;let s=T(he,{onClick:this.handleClick.bind(this),label:this.fullscreen?n:e,className:this.fullscreen?"deck-widget-fullscreen-exit":"deck-widget-fullscreen-enter"});de(s,l)}setProps(e){let n=this.props,l=this.element;l&&(n.className!==e.className&&(n.className&&l.classList.remove(n.className),e.className&&l.classList.add(e.className)),(0,me._deepEqual)(n.style,e.style,1)||(n.style&&Object.entries(n.style).map(([s])=>l.style.removeProperty(s)),e.style&&Object.entries(e.style).map(([s,r])=>l.style.setProperty(s,r)))),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 Ue={"--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)"},Me={"--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)"},He={"--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)"},Ie={"--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 Pe(M);})();
+"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

@@ -3,7 +3,7 @@
   "description": "UI widgets for deck.gl",
   "license": "MIT",
   "type": "module",
-  "version": "9.0.0-beta.9",
+  "version": "9.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -42,7 +42,7 @@
     "preact": "^10.17.0"
   },
   "peerDependencies": {
-    "@deck.gl/core": "^9.0.0-beta"
+    "@deck.gl/core": "^9.0.0"
   },
-  "gitHead": "44cfc784310d1c6ac7766ff80e0df8c364f97354"
+  "gitHead": "e1ef9a3550b120766edbceee28b888c6246caf21"
 }

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;
+  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}): 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: {}});
+    }
+  }
+}

package/src/components.tsx

@@ -1,9 +1,9 @@
 export const IconButton = props => {
   const {className, label, onClick} = props;
   return (
-    <div className="deck-widget-button-border">
+    <div className="deck-widget-button">
       <button
-        className={`deck-widget-button ${className}`}
+        className={`deck-widget-icon-button ${className}`}
         type="button"
         onClick={onClick}
         title={label}
@@ -13,3 +13,22 @@ export const IconButton = props => {
     </div>
   );
 };
+
+export const ButtonGroup = props => {
+  const {children, orientation} = props;
+  return <div className={`deck-widget-button-group ${orientation}`}>{children}</div>;
+};
+
+export const GroupedIconButton = props => {
+  const {className, label, onClick} = props;
+  return (
+    <button
+      className={`deck-widget-icon-button ${className}`}
+      type="button"
+      onClick={onClick}
+      title={label}
+    >
+      <div className="deck-widget-icon" />
+    </button>
+  );
+};

package/src/fullscreen-widget.tsx

@@ -21,7 +21,13 @@ interface FullscreenWidgetProps {
    * Tooltip message when fullscreen.
    */
   exitLabel?: string;
+  /**
+   * CSS inline style overrides.
+   */
   style?: Partial<CSSStyleDeclaration>;
+  /**
+   * Additional CSS class.
+   */
   className?: string;
 }
 

package/src/index.ts

@@ -1,3 +1,5 @@
 export {FullscreenWidget} from './fullscreen-widget';
+export {CompassWidget} from './compass-widget';
+export {ZoomWidget} from './zoom-widget';
 
 export * from './themes';

package/src/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/src/themes.ts

@@ -5,7 +5,9 @@ export const LightTheme = {
   '--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)'
+  '--button-icon-hover': 'rgba(24, 24, 26, 1)',
+  '--icon-compass-north-color': '#F05C44',
+  '--icon-compass-south-color': '#C2C2CC'
 };
 
 export const DarkTheme = {
@@ -15,7 +17,9 @@ export const DarkTheme = {
   '--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)'
+  '--button-icon-hover': 'rgba(215, 214, 229, 1)',
+  '--icon-compass-north-color': '#F05C44',
+  '--icon-compass-south-color': '#C2C2CC'
 };
 
 export const LightGlassTheme = {
@@ -26,7 +30,9 @@ export const LightGlassTheme = {
     '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)'
+  '--button-icon-hover': 'rgba(24, 24, 26, 1)',
+  '--icon-compass-north-color': '#F05C44',
+  '--icon-compass-south-color': '#C2C2CC'
 };
 
 export const DarkGlassTheme = {
@@ -37,5 +43,7 @@ export const DarkGlassTheme = {
     '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)'
+  '--button-icon-hover': 'rgba(215, 214, 229, 1)',
+  '--icon-compass-north-color': '#F05C44',
+  '--icon-compass-south-color': '#C2C2CC'
 };