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

package/dist/fullscreen-widget.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-widget.d.ts","sourceRoot":"","sources":["../src/fullscreen-widget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAE,MAAM,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAIjE,UAAU,qBAAqB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;OAGG;IAEH,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qBAAa,gBAAiB,YAAW,MAAM,CAAC,qBAAqB,CAAC;IACpE,EAAE,SAAgB;IAClB,KAAK,EAAE,qBAAqB,CAAC;IAC7B,SAAS,EAAE,eAAe,CAAc;IAExC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,UAAU,EAAE,OAAO,CAAS;gBAEhB,KAAK,EAAE,qBAAqB;IASxC,KAAK,CAAC,EAAC,IAAI,EAAC,EAAE;QAAC,IAAI,EAAE,IAAI,CAAA;KAAC,GAAG,cAAc;IAe3C,QAAQ;IAMR,OAAO,CAAC,MAAM;IAiBd,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,qBAAqB,CAAC;IAwB9C,YAAY;IAIZ,kBAAkB;IASZ,WAAW;IASX,iBAAiB;IASjB,cAAc;IAQpB,sBAAsB;CAGvB"}
+{"version":3,"file":"fullscreen-widget.d.ts","sourceRoot":"","sources":["../src/fullscreen-widget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAE,MAAM,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAIjE,UAAU,qBAAqB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;OAGG;IAEH,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qBAAa,gBAAiB,YAAW,MAAM,CAAC,qBAAqB,CAAC;IACpE,EAAE,SAAgB;IAClB,KAAK,EAAE,qBAAqB,CAAC;IAC7B,SAAS,EAAE,eAAe,CAAc;IAExC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,UAAU,EAAE,OAAO,CAAS;gBAEhB,KAAK,EAAE,qBAAqB;IASxC,KAAK,CAAC,EAAC,IAAI,EAAC,EAAE;QAAC,IAAI,EAAE,IAAI,CAAA;KAAC,GAAG,cAAc;IAe3C,QAAQ;IAMR,OAAO,CAAC,MAAM;IAiBd,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,qBAAqB,CAAC;IAwB9C,YAAY;IAIZ,kBAAkB;IASZ,WAAW;IASX,iBAAiB;IASjB,cAAc;IAQpB,sBAAsB;CAGvB"}

package/dist/index.cjs

@@ -20,11 +20,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // dist/index.js
 var dist_exports = {};
 __export(dist_exports, {
+  CompassWidget: () => CompassWidget,
   DarkGlassTheme: () => DarkGlassTheme,
   DarkTheme: () => DarkTheme,
   FullscreenWidget: () => FullscreenWidget,
   LightGlassTheme: () => LightGlassTheme,
-  LightTheme: () => LightTheme
+  LightTheme: () => LightTheme,
+  ZoomWidget: () => ZoomWidget
 });
 module.exports = __toCommonJS(dist_exports);
 
@@ -37,7 +39,15 @@ var import_preact = require("preact");
 var import_jsx_runtime = require("preact/jsx-runtime");
 var IconButton = (props) => {
   const { className, label, onClick } = props;
-  return (0, import_jsx_runtime.jsx)("div", { className: "deck-widget-button-border", children: (0, import_jsx_runtime.jsx)("button", { className: `deck-widget-button ${className}`, type: "button", onClick, title: label, children: (0, import_jsx_runtime.jsx)("div", { className: "deck-widget-icon" }) }) });
+  return (0, import_jsx_runtime.jsx)("div", { className: "deck-widget-button", children: (0, import_jsx_runtime.jsx)("button", { className: `deck-widget-icon-button ${className}`, type: "button", onClick, title: label, children: (0, import_jsx_runtime.jsx)("div", { className: "deck-widget-icon" }) }) });
+};
+var ButtonGroup = (props) => {
+  const { children, orientation } = props;
+  return (0, import_jsx_runtime.jsx)("div", { className: `deck-widget-button-group ${orientation}`, children });
+};
+var GroupedIconButton = (props) => {
+  const { className, label, onClick } = props;
+  return (0, import_jsx_runtime.jsx)("button", { className: `deck-widget-icon-button ${className}`, type: "button", onClick, title: label, children: (0, import_jsx_runtime.jsx)("div", { className: "deck-widget-icon" }) });
 };
 
 // dist/fullscreen-widget.js
@@ -144,6 +154,147 @@ var FullscreenWidget = class {
   }
 };
 
+// dist/compass-widget.js
+var import_jsx_runtime3 = require("preact/jsx-runtime");
+var import_core2 = require("@deck.gl/core");
+var import_preact2 = require("preact");
+var CompassWidget = class {
+  constructor(props) {
+    this.id = "compass";
+    this.placement = "top-left";
+    this.viewId = null;
+    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) {
+    Object.assign(this.props, props);
+  }
+  onViewportChange(viewport) {
+    this.viewport = viewport;
+    this.update();
+  }
+  onAdd({ deck }) {
+    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));
+    }
+    this.deck = deck;
+    this.element = element;
+    this.update();
+    return element;
+  }
+  getRotation() {
+    if (this.viewport instanceof import_core2.WebMercatorViewport) {
+      return [-this.viewport.bearing, this.viewport.pitch];
+    } else if (this.viewport instanceof import_core2._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 = (0, import_jsx_runtime3.jsx)("div", { className: "deck-widget-button", style: { perspective: 100 }, children: (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: () => this.handleCompassReset(), label: this.props.label, style: { transform: `rotateX(${rx}deg)` }, children: (0, import_jsx_runtime3.jsx)("svg", { fill: "none", width: "100%", height: "100%", viewBox: "0 0 26 26", children: (0, import_jsx_runtime3.jsxs)("g", { transform: `rotate(${rz},13,13)`, children: [(0, import_jsx_runtime3.jsx)("path", { d: "M10 13.0001L12.9999 5L15.9997 13.0001H10Z", fill: "var(--icon-compass-north-color, #F05C44)" }), (0, import_jsx_runtime3.jsx)("path", { d: "M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z", fill: "var(--icon-compass-south-color, #C2C2CC)" })] }) }) }) });
+    (0, import_preact2.render)(ui, element);
+  }
+  onRemove() {
+    this.deck = void 0;
+    this.element = void 0;
+  }
+  handleCompassReset() {
+    const viewId = this.viewId || "default-view";
+    if (this.viewport instanceof import_core2.WebMercatorViewport) {
+      const nextViewState = {
+        ...this.viewport,
+        bearing: 0,
+        ...this.getRotation()[0] === 0 ? { pitch: 0 } : {},
+        transitionDuration: this.props.transitionDuration,
+        transitionInterpolator: new import_core2.FlyToInterpolator()
+      };
+      this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+    }
+  }
+};
+
+// dist/zoom-widget.js
+var import_jsx_runtime4 = require("preact/jsx-runtime");
+var import_core3 = require("@deck.gl/core");
+var import_preact3 = require("preact");
+var ZoomWidget = class {
+  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 = (0, import_jsx_runtime4.jsxs)(ButtonGroup, { orientation: this.orientation, children: [(0, import_jsx_runtime4.jsx)(GroupedIconButton, { onClick: () => this.handleZoomIn(), label: this.props.zoomInLabel, className: "deck-widget-zoom-in" }), (0, import_jsx_runtime4.jsx)(GroupedIconButton, { onClick: () => this.handleZoomOut(), label: this.props.zoomOutLabel, className: "deck-widget-zoom-out" })] });
+    (0, import_preact3.render)(ui, element);
+    this.deck = deck;
+    this.element = element;
+    return element;
+  }
+  onRemove() {
+    this.deck = void 0;
+    this.element = void 0;
+  }
+  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 import_core3.FlyToInterpolator()
+    };
+    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);
+    }
+  }
+};
+
 // dist/themes.js
 var LightTheme = {
   "--button-background": "#fff",
@@ -152,7 +303,9 @@ var 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"
 };
 var DarkTheme = {
   "--button-background": "rgba(18, 18, 20, 1)",
@@ -161,7 +314,9 @@ var 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"
 };
 var LightGlassTheme = {
   "--button-background": "rgba(255, 255, 255, 0.6)",
@@ -170,7 +325,9 @@ var LightGlassTheme = {
   "--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)"
+  "--button-icon-hover": "rgba(24, 24, 26, 1)",
+  "--icon-compass-north-color": "#F05C44",
+  "--icon-compass-south-color": "#C2C2CC"
 };
 var DarkGlassTheme = {
   "--button-background": "rgba(18, 18, 20, 0.75)",
@@ -179,6 +336,8 @@ var DarkGlassTheme = {
   "--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)"
+  "--button-icon-hover": "rgba(215, 214, 229, 1)",
+  "--icon-compass-north-color": "#F05C44",
+  "--icon-compass-south-color": "#C2C2CC"
 };
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["index.js", "fullscreen-widget.js", "components.js", "themes.js"],
-  "sourcesContent": ["export { FullscreenWidget } from \"./fullscreen-widget.js\";\nexport * from \"./themes.js\";\n", "import { jsx as _jsx } from \"preact/jsx-runtime\";\n/* global document */\nimport { _deepEqual as deepEqual } from '@deck.gl/core';\nimport { render } from 'preact';\nimport { IconButton } from \"./components.js\";\nexport class FullscreenWidget {\n    constructor(props) {\n        this.id = 'fullscreen';\n        this.placement = 'top-left';\n        this.fullscreen = false;\n        this.id = props.id || 'fullscreen';\n        this.placement = props.placement || 'top-left';\n        props.enterLabel = props.enterLabel || 'Enter Fullscreen';\n        props.exitLabel = props.exitLabel || 'Exit Fullscreen';\n        props.style = props.style || {};\n        this.props = props;\n    }\n    onAdd({ deck }) {\n        const { style, className } = this.props;\n        const el = document.createElement('div');\n        el.classList.add('deck-widget', 'deck-widget-fullscreen');\n        if (className)\n            el.classList.add(className);\n        if (style) {\n            Object.entries(style).map(([key, value]) => el.style.setProperty(key, value));\n        }\n        this.deck = deck;\n        this.element = el;\n        this.update();\n        document.addEventListener('fullscreenchange', this.onFullscreenChange.bind(this));\n        return el;\n    }\n    onRemove() {\n        this.deck = undefined;\n        this.element = undefined;\n        document.removeEventListener('fullscreenchange', this.onFullscreenChange.bind(this));\n    }\n    update() {\n        const { enterLabel, exitLabel } = this.props;\n        const el = this.element;\n        if (!el) {\n            return;\n        }\n        const ui = (_jsx(IconButton, { onClick: this.handleClick.bind(this), label: this.fullscreen ? exitLabel : enterLabel, className: this.fullscreen ? 'deck-widget-fullscreen-exit' : 'deck-widget-fullscreen-enter' }));\n        render(ui, el);\n    }\n    setProps(props) {\n        const oldProps = this.props;\n        const el = this.element;\n        if (el) {\n            if (oldProps.className !== props.className) {\n                if (oldProps.className)\n                    el.classList.remove(oldProps.className);\n                if (props.className)\n                    el.classList.add(props.className);\n            }\n            if (!deepEqual(oldProps.style, props.style, 1)) {\n                if (oldProps.style) {\n                    Object.entries(oldProps.style).map(([key]) => el.style.removeProperty(key));\n                }\n                if (props.style) {\n                    Object.entries(props.style).map(([key, value]) => el.style.setProperty(key, value));\n                }\n            }\n        }\n        Object.assign(this.props, props);\n    }\n    getContainer() {\n        return this.props.container || this.deck?.getCanvas()?.parentElement;\n    }\n    onFullscreenChange() {\n        const prevFullscreen = this.fullscreen;\n        const fullscreen = document.fullscreenElement === this.getContainer();\n        if (prevFullscreen !== fullscreen) {\n            this.fullscreen = !this.fullscreen;\n        }\n        this.update();\n    }\n    async handleClick() {\n        if (this.fullscreen) {\n            await this.exitFullscreen();\n        }\n        else {\n            await this.requestFullscreen();\n        }\n        this.update();\n    }\n    async requestFullscreen() {\n        const container = this.getContainer();\n        if (container?.requestFullscreen) {\n            await container.requestFullscreen({ navigationUI: 'hide' });\n        }\n        else {\n            this.togglePseudoFullscreen();\n        }\n    }\n    async exitFullscreen() {\n        if (document.exitFullscreen) {\n            await document.exitFullscreen();\n        }\n        else {\n            this.togglePseudoFullscreen();\n        }\n    }\n    togglePseudoFullscreen() {\n        this.getContainer()?.classList.toggle('deck-pseudo-fullscreen');\n    }\n}\n", "import { jsx as _jsx } from \"preact/jsx-runtime\";\nexport const IconButton = props => {\n    const { className, label, onClick } = props;\n    return (_jsx(\"div\", { className: \"deck-widget-button-border\", children: _jsx(\"button\", { className: `deck-widget-button ${className}`, type: \"button\", onClick: onClick, title: label, children: _jsx(\"div\", { className: \"deck-widget-icon\" }) }) }));\n};\n", "export const LightTheme = {\n    '--button-background': '#fff',\n    '--button-stroke': 'rgba(255, 255, 255, 0.3)',\n    '--button-inner-stroke': 'unset',\n    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',\n    '--button-backdrop-filter': 'unset',\n    '--button-icon-idle': 'rgba(97, 97, 102, 1)',\n    '--button-icon-hover': 'rgba(24, 24, 26, 1)'\n};\nexport const DarkTheme = {\n    '--button-background': 'rgba(18, 18, 20, 1)',\n    '--button-stroke': 'rgba(18, 18, 20, 0.30)',\n    '--button-inner-stroke': 'unset',\n    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',\n    '--button-backdrop-filter': 'unset',\n    '--button-icon-idle': 'rgba(158, 157, 168, 1)',\n    '--button-icon-hover': 'rgba(215, 214, 229, 1)'\n};\nexport const LightGlassTheme = {\n    '--button-background': 'rgba(255, 255, 255, 0.6)',\n    '--button-stroke': 'rgba(255, 255, 255, 0.3)',\n    '--button-inner-stroke': '1px solid rgba(255, 255, 255, 0.6)',\n    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',\n    '--button-backdrop-filter': 'blur(4px)',\n    '--button-icon-idle': 'rgba(97, 97, 102, 1)',\n    '--button-icon-hover': 'rgba(24, 24, 26, 1)'\n};\nexport const DarkGlassTheme = {\n    '--button-background': 'rgba(18, 18, 20, 0.75)',\n    '--button-stroke': 'rgba(18, 18, 20, 0.30)',\n    '--button-inner-stroke': '1px solid rgba(18, 18, 20, 0.75)',\n    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',\n    '--button-backdrop-filter': 'blur(4px)',\n    '--button-icon-idle': 'rgba(158, 157, 168, 1)',\n    '--button-icon-hover': 'rgba(215, 214, 229, 1)'\n};\n"],
-  "mappings": "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",
-  "names": ["import_jsx_runtime", "_jsx", "_jsx", "deepEqual"]
+  "sources": ["index.js", "fullscreen-widget.js", "components.js", "compass-widget.js", "zoom-widget.js", "themes.js"],
+  "sourcesContent": ["export { FullscreenWidget } from \"./fullscreen-widget.js\";\nexport { CompassWidget } from \"./compass-widget.js\";\nexport { ZoomWidget } from \"./zoom-widget.js\";\nexport * from \"./themes.js\";\n", "import { jsx as _jsx } from \"preact/jsx-runtime\";\n/* global document */\nimport { _deepEqual as deepEqual } from '@deck.gl/core';\nimport { render } from 'preact';\nimport { IconButton } from \"./components.js\";\nexport class FullscreenWidget {\n    constructor(props) {\n        this.id = 'fullscreen';\n        this.placement = 'top-left';\n        this.fullscreen = false;\n        this.id = props.id || 'fullscreen';\n        this.placement = props.placement || 'top-left';\n        props.enterLabel = props.enterLabel || 'Enter Fullscreen';\n        props.exitLabel = props.exitLabel || 'Exit Fullscreen';\n        props.style = props.style || {};\n        this.props = props;\n    }\n    onAdd({ deck }) {\n        const { style, className } = this.props;\n        const el = document.createElement('div');\n        el.classList.add('deck-widget', 'deck-widget-fullscreen');\n        if (className)\n            el.classList.add(className);\n        if (style) {\n            Object.entries(style).map(([key, value]) => el.style.setProperty(key, value));\n        }\n        this.deck = deck;\n        this.element = el;\n        this.update();\n        document.addEventListener('fullscreenchange', this.onFullscreenChange.bind(this));\n        return el;\n    }\n    onRemove() {\n        this.deck = undefined;\n        this.element = undefined;\n        document.removeEventListener('fullscreenchange', this.onFullscreenChange.bind(this));\n    }\n    update() {\n        const { enterLabel, exitLabel } = this.props;\n        const el = this.element;\n        if (!el) {\n            return;\n        }\n        const ui = (_jsx(IconButton, { onClick: this.handleClick.bind(this), label: this.fullscreen ? exitLabel : enterLabel, className: this.fullscreen ? 'deck-widget-fullscreen-exit' : 'deck-widget-fullscreen-enter' }));\n        render(ui, el);\n    }\n    setProps(props) {\n        const oldProps = this.props;\n        const el = this.element;\n        if (el) {\n            if (oldProps.className !== props.className) {\n                if (oldProps.className)\n                    el.classList.remove(oldProps.className);\n                if (props.className)\n                    el.classList.add(props.className);\n            }\n            if (!deepEqual(oldProps.style, props.style, 1)) {\n                if (oldProps.style) {\n                    Object.entries(oldProps.style).map(([key]) => el.style.removeProperty(key));\n                }\n                if (props.style) {\n                    Object.entries(props.style).map(([key, value]) => el.style.setProperty(key, value));\n                }\n            }\n        }\n        Object.assign(this.props, props);\n    }\n    getContainer() {\n        return this.props.container || this.deck?.getCanvas()?.parentElement;\n    }\n    onFullscreenChange() {\n        const prevFullscreen = this.fullscreen;\n        const fullscreen = document.fullscreenElement === this.getContainer();\n        if (prevFullscreen !== fullscreen) {\n            this.fullscreen = !this.fullscreen;\n        }\n        this.update();\n    }\n    async handleClick() {\n        if (this.fullscreen) {\n            await this.exitFullscreen();\n        }\n        else {\n            await this.requestFullscreen();\n        }\n        this.update();\n    }\n    async requestFullscreen() {\n        const container = this.getContainer();\n        if (container?.requestFullscreen) {\n            await container.requestFullscreen({ navigationUI: 'hide' });\n        }\n        else {\n            this.togglePseudoFullscreen();\n        }\n    }\n    async exitFullscreen() {\n        if (document.exitFullscreen) {\n            await document.exitFullscreen();\n        }\n        else {\n            this.togglePseudoFullscreen();\n        }\n    }\n    togglePseudoFullscreen() {\n        this.getContainer()?.classList.toggle('deck-pseudo-fullscreen');\n    }\n}\n", "import { jsx as _jsx } from \"preact/jsx-runtime\";\nexport const IconButton = props => {\n    const { className, label, onClick } = props;\n    return (_jsx(\"div\", { className: \"deck-widget-button\", children: _jsx(\"button\", { className: `deck-widget-icon-button ${className}`, type: \"button\", onClick: onClick, title: label, children: _jsx(\"div\", { className: \"deck-widget-icon\" }) }) }));\n};\nexport const ButtonGroup = props => {\n    const { children, orientation } = props;\n    return _jsx(\"div\", { className: `deck-widget-button-group ${orientation}`, children: children });\n};\nexport const GroupedIconButton = props => {\n    const { className, label, onClick } = props;\n    return (_jsx(\"button\", { className: `deck-widget-icon-button ${className}`, type: \"button\", onClick: onClick, title: label, children: _jsx(\"div\", { className: \"deck-widget-icon\" }) }));\n};\n", "import { jsx as _jsx, jsxs as _jsxs } from \"preact/jsx-runtime\";\n/* global document */\nimport { FlyToInterpolator, WebMercatorViewport, _GlobeViewport } from '@deck.gl/core';\nimport { render } from 'preact';\nexport class CompassWidget {\n    constructor(props) {\n        this.id = 'compass';\n        this.placement = 'top-left';\n        this.viewId = null;\n        this.id = props.id || 'compass';\n        this.viewId = props.viewId || null;\n        this.placement = props.placement || 'top-left';\n        props.transitionDuration = props.transitionDuration || 200;\n        props.label = props.label || 'Compass';\n        props.style = props.style || {};\n        this.props = props;\n    }\n    setProps(props) {\n        Object.assign(this.props, props);\n    }\n    onViewportChange(viewport) {\n        this.viewport = viewport;\n        this.update();\n    }\n    onAdd({ deck }) {\n        const { style, className } = this.props;\n        const element = document.createElement('div');\n        element.classList.add('deck-widget', 'deck-widget-compass');\n        if (className)\n            element.classList.add(className);\n        if (style) {\n            Object.entries(style).map(([key, value]) => element.style.setProperty(key, value));\n        }\n        this.deck = deck;\n        this.element = element;\n        this.update();\n        return element;\n    }\n    getRotation() {\n        if (this.viewport instanceof WebMercatorViewport) {\n            return [-this.viewport.bearing, this.viewport.pitch];\n        }\n        else if (this.viewport instanceof _GlobeViewport) {\n            return [0, Math.max(-80, Math.min(80, this.viewport.latitude))];\n        }\n        return [0, 0];\n    }\n    update() {\n        const [rz, rx] = this.getRotation();\n        const element = this.element;\n        if (!element) {\n            return;\n        }\n        const ui = (_jsx(\"div\", { className: \"deck-widget-button\", style: { perspective: 100 }, children: _jsx(\"button\", { type: \"button\", onClick: () => this.handleCompassReset(), label: this.props.label, style: { transform: `rotateX(${rx}deg)` }, children: _jsx(\"svg\", { fill: \"none\", width: \"100%\", height: \"100%\", viewBox: \"0 0 26 26\", children: _jsxs(\"g\", { transform: `rotate(${rz},13,13)`, children: [_jsx(\"path\", { d: \"M10 13.0001L12.9999 5L15.9997 13.0001H10Z\", fill: \"var(--icon-compass-north-color, #F05C44)\" }), _jsx(\"path\", { d: \"M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z\", fill: \"var(--icon-compass-south-color, #C2C2CC)\" })] }) }) }) }));\n        render(ui, element);\n    }\n    onRemove() {\n        this.deck = undefined;\n        this.element = undefined;\n    }\n    handleCompassReset() {\n        const viewId = this.viewId || 'default-view';\n        if (this.viewport instanceof WebMercatorViewport) {\n            const nextViewState = {\n                ...this.viewport,\n                bearing: 0,\n                ...(this.getRotation()[0] === 0 ? { pitch: 0 } : {}),\n                transitionDuration: this.props.transitionDuration,\n                transitionInterpolator: new FlyToInterpolator()\n            };\n            // @ts-ignore Using private method temporary until there's a public one\n            this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });\n        }\n    }\n}\n", "import { jsx as _jsx, jsxs as _jsxs } from \"preact/jsx-runtime\";\n/* global document */\nimport { FlyToInterpolator } from '@deck.gl/core';\nimport { render } from 'preact';\nimport { ButtonGroup, GroupedIconButton } from \"./components.js\";\nexport class ZoomWidget {\n    constructor(props) {\n        this.id = 'zoom';\n        this.placement = 'top-left';\n        this.orientation = 'vertical';\n        this.viewId = null;\n        this.id = props.id || 'zoom';\n        this.viewId = props.viewId || null;\n        this.placement = props.placement || 'top-left';\n        this.orientation = props.orientation || 'vertical';\n        props.transitionDuration = props.transitionDuration || 200;\n        props.zoomInLabel = props.zoomInLabel || 'Zoom In';\n        props.zoomOutLabel = props.zoomOutLabel || 'Zoom Out';\n        props.style = props.style || {};\n        this.props = props;\n    }\n    onAdd({ deck }) {\n        const { style, className } = this.props;\n        const element = document.createElement('div');\n        element.classList.add('deck-widget', 'deck-widget-zoom');\n        if (className)\n            element.classList.add(className);\n        if (style) {\n            Object.entries(style).map(([key, value]) => element.style.setProperty(key, value));\n        }\n        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\" })] }));\n        render(ui, element);\n        this.deck = deck;\n        this.element = element;\n        return element;\n    }\n    onRemove() {\n        this.deck = undefined;\n        this.element = undefined;\n    }\n    setProps(props) {\n        Object.assign(this.props, props);\n    }\n    onViewportChange(viewport) {\n        this.viewport = viewport;\n    }\n    handleZoom(nextZoom) {\n        const viewId = this.viewId || 'default-view';\n        const nextViewState = {\n            ...this.viewport,\n            zoom: nextZoom,\n            transitionDuration: this.props.transitionDuration,\n            transitionInterpolator: new FlyToInterpolator()\n        };\n        // @ts-ignore Using private method temporary until there's a public one\n        this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });\n    }\n    handleZoomIn() {\n        if (this.viewport) {\n            this.handleZoom(this.viewport.zoom + 1);\n        }\n    }\n    handleZoomOut() {\n        if (this.viewport) {\n            this.handleZoom(this.viewport.zoom - 1);\n        }\n    }\n}\n", "export const LightTheme = {\n    '--button-background': '#fff',\n    '--button-stroke': 'rgba(255, 255, 255, 0.3)',\n    '--button-inner-stroke': 'unset',\n    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',\n    '--button-backdrop-filter': 'unset',\n    '--button-icon-idle': 'rgba(97, 97, 102, 1)',\n    '--button-icon-hover': 'rgba(24, 24, 26, 1)',\n    '--icon-compass-north-color': '#F05C44',\n    '--icon-compass-south-color': '#C2C2CC'\n};\nexport const DarkTheme = {\n    '--button-background': 'rgba(18, 18, 20, 1)',\n    '--button-stroke': 'rgba(18, 18, 20, 0.30)',\n    '--button-inner-stroke': 'unset',\n    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',\n    '--button-backdrop-filter': 'unset',\n    '--button-icon-idle': 'rgba(158, 157, 168, 1)',\n    '--button-icon-hover': 'rgba(215, 214, 229, 1)',\n    '--icon-compass-north-color': '#F05C44',\n    '--icon-compass-south-color': '#C2C2CC'\n};\nexport const LightGlassTheme = {\n    '--button-background': 'rgba(255, 255, 255, 0.6)',\n    '--button-stroke': 'rgba(255, 255, 255, 0.3)',\n    '--button-inner-stroke': '1px solid rgba(255, 255, 255, 0.6)',\n    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',\n    '--button-backdrop-filter': 'blur(4px)',\n    '--button-icon-idle': 'rgba(97, 97, 102, 1)',\n    '--button-icon-hover': 'rgba(24, 24, 26, 1)',\n    '--icon-compass-north-color': '#F05C44',\n    '--icon-compass-south-color': '#C2C2CC'\n};\nexport const DarkGlassTheme = {\n    '--button-background': 'rgba(18, 18, 20, 0.75)',\n    '--button-stroke': 'rgba(18, 18, 20, 0.30)',\n    '--button-inner-stroke': '1px solid rgba(18, 18, 20, 0.75)',\n    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',\n    '--button-backdrop-filter': 'blur(4px)',\n    '--button-icon-idle': 'rgba(158, 157, 168, 1)',\n    '--button-icon-hover': 'rgba(215, 214, 229, 1)',\n    '--icon-compass-north-color': '#F05C44',\n    '--icon-compass-south-color': '#C2C2CC'\n};\n"],
+  "mappings": "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",
+  "names": ["import_jsx_runtime", "_jsx", "_jsx", "deepEqual", "import_jsx_runtime", "import_core", "import_preact", "_jsx", "_jsxs", "import_jsx_runtime", "import_core", "import_preact", "_jsxs", "_jsx"]
 }

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export { FullscreenWidget } from "./fullscreen-widget.js";
+export { CompassWidget } from "./compass-widget.js";
+export { ZoomWidget } from "./zoom-widget.js";
 export * from "./themes.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,+BAA4B;AAErD,4BAAyB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,+BAA4B;AACrD,OAAO,EAAC,aAAa,EAAC,4BAAyB;AAC/C,OAAO,EAAC,UAAU,EAAC,yBAAsB;AAEzC,4BAAyB"}

package/dist/index.js

@@ -1,2 +1,4 @@
 export { FullscreenWidget } from "./fullscreen-widget.js";
+export { CompassWidget } from "./compass-widget.js";
+export { ZoomWidget } from "./zoom-widget.js";
 export * from "./themes.js";

package/dist/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/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

@@ -1 +1 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;CAQtB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;CAQrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;CAS3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;CAS1B,CAAC"}
+{"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

@@ -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 = {
     '--button-background': 'rgba(18, 18, 20, 1)',
@@ -14,7 +16,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 = {
     '--button-background': 'rgba(255, 255, 255, 0.6)',
@@ -23,7 +27,9 @@ export const LightGlassTheme = {
     '--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)'
+    '--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)',
@@ -32,5 +38,7 @@ export const DarkGlassTheme = {
     '--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)'
+    '--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;
+    element?: HTMLDivElement;
+    constructor(props: ZoomWidgetProps);
+    onAdd({ deck }: {
+        deck: Deck;
+    }): 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;IACZ,OAAO,CAAC,EAAE,cAAc,CAAC;gBAEb,KAAK,EAAE,eAAe;IAYlC,KAAK,CAAC,EAAC,IAAI,EAAC,EAAE;QAAC,IAAI,EAAE,IAAI,CAAA;KAAC,GAAG,cAAc;IA8B3C,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"}