@deck.gl/widgets 9.1.11 → 9.2.0-alpha.1

package/dist/lib/geocode/geocoder.d.ts

@@ -0,0 +1,15 @@
+/** A geocoder that translates an address string into a location */
+export type Geocoder = {
+    /** The name of the geocoder, e.g. google, mapbox, ... */
+    name: string;
+    /** Does the geocoder require an api key? */
+    requiresApiKey?: boolean;
+    /** A string that can be used to indicate the accepted format */
+    placeholderLocation?: string;
+    /** Calls the geocoder service, translating an address string into a location */
+    geocode(address: string, apiKey: string): Promise<{
+        longitude: number;
+        latitude: number;
+    } | null>;
+};
+//# sourceMappingURL=geocoder.d.ts.map

package/dist/lib/geocode/geocoder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geocoder.d.ts","sourceRoot":"","sources":["../../../src/lib/geocode/geocoder.ts"],"names":[],"mappings":"AAIA,mEAAmE;AACnE,MAAM,MAAM,QAAQ,GAAG;IACrB,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gEAAgE;IAChE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gFAAgF;IAChF,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC,CAAC;CACjG,CAAC"}

package/dist/lib/geocode/geocoder.js

@@ -0,0 +1,5 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+export {};
+//# sourceMappingURL=geocoder.js.map

package/dist/lib/geocode/geocoder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"geocoder.js","sourceRoot":"","sources":["../../../src/lib/geocode/geocoder.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC"}

package/dist/lib/geocode/geocoders.d.ts

@@ -0,0 +1,68 @@
+/**
+ * A geocoder that uses the google geocoding service
+ * @note Requires an API key from Google
+ * @see https://developers.google.com/maps/documentation/geocoding/get-api-key
+ */
+export declare const GoogleGeocoder: {
+    readonly name: "google";
+    readonly requiresApiKey: true;
+    readonly geocode: (address: string, apiKey: string) => Promise<{
+        longitude: number;
+        latitude: number;
+    } | null>;
+};
+/**
+ * A geocoder that uses the google geocoding service
+ * @note Requires an API key from Mapbox
+ * @see https://docs.mapbox.com/api/search/geocoding/
+ */
+export declare const MapboxGeocoder: {
+    readonly name: "google";
+    readonly requiresApiKey: true;
+    readonly geocode: (address: string, apiKey: string) => Promise<{
+        longitude: number;
+        latitude: number;
+    } | null>;
+};
+/**
+ * A geocoder that uses the google geocoding service
+ * @note Requires an API key from OpenCageData
+ * @see https://opencagedata.com/api
+ */
+export declare const OpenCageGeocoder: {
+    readonly name: "opencage";
+    readonly requiresApiKey: true;
+    readonly geocode: (address: string, key: string) => Promise<{
+        longitude: number;
+        latitude: number;
+    } | null>;
+};
+/**
+ * A geocoder adapter that wraps the browser's geolocation API. Always returns the user's current location.
+ * @note Not technically a geocoder, but a geolocation service that provides a source of locations.
+ * @note The user must allow location access for this to work.
+ */
+export declare const CurrentLocationGeocoder: {
+    readonly name: "current";
+    readonly requiresApiKey: false;
+    /** Attempt to call browsers geolocation API */
+    readonly geocode: () => Promise<{
+        longitude: number;
+        latitude: number;
+    } | null>;
+};
+/**
+ * Parse a coordinate string.
+ * Supports comma- or semicolon-separated values.
+ * Heuristically determines which value is longitude and which is latitude.
+ */
+export declare const CoordinatesGeocoder: {
+    readonly name: "coordinates";
+    readonly requiresApiKey: false;
+    readonly placeholderLocation: "-122.45, 37.8 or 37°48'N, 122°27'W";
+    readonly geocode: (address: string) => Promise<{
+        longitude: number;
+        latitude: number;
+    } | null>;
+};
+//# sourceMappingURL=geocoders.d.ts.map

package/dist/lib/geocode/geocoders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geocoders.d.ts","sourceRoot":"","sources":["../../../src/lib/geocode/geocoders.ts"],"names":[],"mappings":"AAUA;;;;GAIG;AACH,eAAO,MAAM,cAAc;;;gCAId,MAAM,UACP,MAAM,KACb,OAAO,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;CAY7B,CAAC;AAE9B;;;;GAIG;AACH,eAAO,MAAM,cAAc;;;gCAId,MAAM,UACP,MAAM,KACb,OAAO,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;CAY7B,CAAC;AAE9B;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;gCAIhB,MAAM,OACV,MAAM,KACV,OAAO,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;CAS7B,CAAC;AAE9B;;;;GAIG;AACH,eAAO,MAAM,uBAAuB;;;IAGlC,+CAA+C;4BAC9B,OAAO,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;CAgB3C,CAAC;AAqB9B;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;gCAIP,MAAM,KAAG,OAAO,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAAC;CAG1D,CAAC"}

package/dist/lib/geocode/geocoders.js

@@ -0,0 +1,182 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+const GOOGLE_URL = 'https://maps.googleapis.com/maps/api/geocode/json';
+const MAPBOX_URL = 'https://api.mapbox.com/geocoding/v5/mapbox.places';
+const OPENCAGE_API_URL = 'https://api.opencagedata.com/geocode/v1/json';
+/**
+ * A geocoder that uses the google geocoding service
+ * @note Requires an API key from Google
+ * @see https://developers.google.com/maps/documentation/geocoding/get-api-key
+ */
+export const GoogleGeocoder = {
+    name: 'google',
+    requiresApiKey: true,
+    async geocode(address, apiKey) {
+        const encodedAddress = encodeURIComponent(address);
+        const json = await fetchJson(`${GOOGLE_URL}?address=${encodedAddress}&key=${apiKey}`);
+        switch (json.status) {
+            case 'OK':
+                const loc = json.results.length > 0 && json.results[0].geometry.location;
+                return loc ? { longitude: loc.lng, latitude: loc.lat } : null;
+            default:
+                throw new Error(`Google Geocoder failed: ${json.status}`);
+        }
+    }
+};
+/**
+ * A geocoder that uses the google geocoding service
+ * @note Requires an API key from Mapbox
+ * @see https://docs.mapbox.com/api/search/geocoding/
+ */
+export const MapboxGeocoder = {
+    name: 'google',
+    requiresApiKey: true,
+    async geocode(address, apiKey) {
+        const encodedAddress = encodeURIComponent(address);
+        const json = await fetchJson(`${MAPBOX_URL}/${encodedAddress}.json?access_token=${apiKey}`);
+        if (Array.isArray(json.features) && json.features.length > 0) {
+            const center = json.features[0].center;
+            if (Array.isArray(center) && center.length >= 2) {
+                return { longitude: center[0], latitude: center[1] };
+            }
+        }
+        return null;
+    }
+};
+/**
+ * A geocoder that uses the google geocoding service
+ * @note Requires an API key from OpenCageData
+ * @see https://opencagedata.com/api
+ */
+export const OpenCageGeocoder = {
+    name: 'opencage',
+    requiresApiKey: true,
+    async geocode(address, key) {
+        const encodedAddress = encodeURIComponent(address);
+        const data = await fetchJson(`${OPENCAGE_API_URL}?q=${encodedAddress}&key=${key}`);
+        if (Array.isArray(data.results) && data.results.length > 0) {
+            const geometry = data.results[0].geometry;
+            return { longitude: geometry.lng, latitude: geometry.lat };
+        }
+        return null;
+    }
+};
+/**
+ * A geocoder adapter that wraps the browser's geolocation API. Always returns the user's current location.
+ * @note Not technically a geocoder, but a geolocation service that provides a source of locations.
+ * @note The user must allow location access for this to work.
+ */
+export const CurrentLocationGeocoder = {
+    name: 'current',
+    requiresApiKey: false,
+    /** Attempt to call browsers geolocation API */
+    async geocode() {
+        if (!navigator.geolocation) {
+            throw new Error('Geolocation not supported');
+        }
+        return new Promise((resolve, reject) => {
+            navigator.geolocation.getCurrentPosition(
+            /** @see https://developer.mozilla.org/docs/Web/API/GeolocationPosition */
+            (position) => {
+                const { longitude, latitude } = position.coords;
+                resolve({ longitude, latitude });
+            }, 
+            /** @see https://developer.mozilla.org/docs/Web/API/GeolocationPositionError */
+            (error) => reject(new Error(error.message)));
+        });
+    }
+};
+/** Fetch JSON, catching HTTP errors */
+async function fetchJson(url) {
+    let response;
+    try {
+        response = await fetch(url);
+    }
+    catch (error) {
+        // Annoyingly, fetch reports some errors (e.g. CORS) using excpetions, not response.ok
+        throw new Error(`CORS error? ${error}. ${url}: `);
+    }
+    if (!response.ok) {
+        throw new Error(`${response.statusText}. ${url}: `);
+    }
+    const data = await response.json();
+    if (!data) {
+        throw new Error(`No data returned. ${url}`);
+    }
+    return data;
+}
+/**
+ * Parse a coordinate string.
+ * Supports comma- or semicolon-separated values.
+ * Heuristically determines which value is longitude and which is latitude.
+ */
+export const CoordinatesGeocoder = {
+    name: 'coordinates',
+    requiresApiKey: false,
+    placeholderLocation: `-122.45, 37.8 or 37°48'N, 122°27'W`,
+    async geocode(address) {
+        return parseCoordinates(address) || null;
+    }
+};
+/**
+ * Parse an input string for coordinates.
+ * Supports comma- or semicolon-separated values.
+ * Heuristically determines which value is longitude and which is latitude.
+ */
+function parseCoordinates(input) {
+    input = input.trim();
+    const parts = input.split(/[,;]/).map(p => p.trim());
+    if (parts.length < 2)
+        return null;
+    const first = parseCoordinatePart(parts[0]);
+    const second = parseCoordinatePart(parts[1]);
+    if (first === null || second === null)
+        return null;
+    // Use a heuristic:
+    // If one number exceeds 90 in absolute value, it's likely a longitude.
+    if (Math.abs(first) > 90 && Math.abs(second) <= 90) {
+        return { longitude: first, latitude: second };
+    }
+    else if (Math.abs(second) > 90 && Math.abs(first) <= 90) {
+        return { longitude: second, latitude: first };
+    }
+    // If both are <= 90, assume order: latitude, longitude.
+    return { latitude: first, longitude: second };
+}
+/**
+ * Parse a single coordinate part (which may be in decimal or DMS format).
+ */
+function parseCoordinatePart(s) {
+    s = s.trim();
+    // If the string contains a degree symbol or similar markers, use DMS parsing.
+    if (s.includes('°') || s.includes("'") || s.includes('"')) {
+        const value = dmsToDecimal(s);
+        return isNaN(value) ? null : value;
+    }
+    // Otherwise, check for a cardinal letter and remove it.
+    let sign = 1;
+    if (/[SW]/i.test(s))
+        sign = -1;
+    s = s.replace(/[NSEW]/gi, '');
+    const value = parseFloat(s);
+    return isNaN(value) ? null : sign * value;
+}
+/** Convert a DMS string (e.g. "37°48'00\"N") to decimal degrees. */
+function dmsToDecimal(s) {
+    // A simple regex to extract degrees, minutes, seconds and direction.
+    const regex = /(\d+)[°d]\s*(\d+)?['′m]?\s*(\d+(?:\.\d+)?)?[\"″s]?\s*([NSEW])?/i;
+    const match = s.match(regex);
+    if (!match)
+        return NaN;
+    const degrees = parseFloat(match[1]) || 0;
+    const minutes = parseFloat(match[2]) || 0;
+    const seconds = parseFloat(match[3]) || 0;
+    const direction = match[4] || '';
+    let dec = degrees + minutes / 60 + seconds / 3600;
+    if (/[SW]/i.test(direction)) {
+        dec = -dec;
+    }
+    return dec;
+}
+//# sourceMappingURL=geocoders.js.map

package/dist/lib/geocode/geocoders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"geocoders.js","sourceRoot":"","sources":["../../../src/lib/geocode/geocoders.ts"],"names":[],"mappings":"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"}

package/dist/loading-widget.d.ts

@@ -0,0 +1,26 @@
+import type { WidgetPlacement, Layer } from '@deck.gl/core';
+import { Widget, WidgetProps } from '@deck.gl/core';
+/** Properties for the LoadingWidget */
+export type LoadingWidgetProps = WidgetProps & {
+    /** Widget positioning within the view. Default 'top-left'. */
+    placement?: WidgetPlacement;
+    /** Tooltip message when loading */
+    label?: string;
+};
+/**
+ * A non-interactive widget that shows a loading spinner if any layers are loading data
+ */
+export declare class LoadingWidget extends Widget<LoadingWidgetProps> {
+    static defaultProps: Required<LoadingWidgetProps>;
+    className: string;
+    placement: WidgetPlacement;
+    loading: boolean;
+    constructor(props?: LoadingWidgetProps);
+    setProps(props: Partial<LoadingWidgetProps>): void;
+    onRenderHTML(rootElement: HTMLElement): void;
+    onRedraw({ layers }: {
+        layers: Layer[];
+    }): void;
+    handleClick(): void;
+}
+//# sourceMappingURL=loading-widget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loading-widget.d.ts","sourceRoot":"","sources":["../src/loading-widget.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,eAAe,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAGlD,uCAAuC;AACvC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,8DAA8D;IAC9D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,qBAAa,aAAc,SAAQ,MAAM,CAAC,kBAAkB,CAAC;IAC3D,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAK/C;IAEF,SAAS,SAAyB;IAClC,SAAS,EAAE,eAAe,CAAc;IACxC,OAAO,UAAQ;gBAEH,KAAK,GAAE,kBAAuB;IAK1C,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,kBAAkB,CAAC;IAK3C,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAc5C,QAAQ,CAAC,EAAC,MAAM,EAAC,EAAE;QAAC,MAAM,EAAE,KAAK,EAAE,CAAA;KAAC,GAAG,IAAI;IAS3C,WAAW;CACZ"}

package/dist/loading-widget.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { render } from 'preact';
+import { Widget } from '@deck.gl/core';
+import { IconButton } from "./lib/components/icon-button.js";
+/**
+ * A non-interactive widget that shows a loading spinner if any layers are loading data
+ */
+export class LoadingWidget extends Widget {
+    constructor(props = {}) {
+        super(props, LoadingWidget.defaultProps);
+        this.className = 'deck-widget-loading';
+        this.placement = 'top-left';
+        this.loading = true;
+        this.placement = props.placement ?? this.placement;
+    }
+    setProps(props) {
+        this.placement = props.placement ?? this.placement;
+        super.setProps(props);
+    }
+    onRenderHTML(rootElement) {
+        render(
+        // TODO(ibgreen) - this should not be a button, but styling is so nested that it is easier to reuse this component.
+        this.loading && (_jsx(IconButton, { className: "deck-widget-spinner-icon", label: this.props.label, onClick: this.handleClick.bind(this) })), rootElement);
+    }
+    onRedraw({ layers }) {
+        const loading = !layers.some(layer => !layer.isLoaded);
+        if (loading !== this.loading) {
+            this.loading = loading;
+            this.updateHTML();
+        }
+    }
+    // TODO(ibgreen) - this should not be a button, see above.
+    handleClick() { }
+}
+LoadingWidget.defaultProps = {
+    ...Widget.defaultProps,
+    id: 'loading',
+    placement: 'top-left',
+    label: 'Loading layer data'
+};
+//# sourceMappingURL=loading-widget.js.map

package/dist/loading-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-widget.js","sourceRoot":"","sources":["../src/loading-widget.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,MAAM,EAAC,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAC,MAAM,EAAc,MAAM,eAAe,CAAC;AAClD,OAAO,EAAC,UAAU,EAAC,wCAAqC;AAUxD;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,MAA0B;IAY3D,YAAY,QAA4B,EAAE;QACxC,KAAK,CAAC,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAL3C,cAAS,GAAG,qBAAqB,CAAC;QAClC,cAAS,GAAoB,UAAU,CAAC;QACxC,YAAO,GAAG,IAAI,CAAC;QAIb,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;IACrD,CAAC;IAED,QAAQ,CAAC,KAAkC;QACzC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;QACnD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAED,YAAY,CAAC,WAAwB;QACnC,MAAM;QACJ,mHAAmH;QACnH,IAAI,CAAC,OAAO,IAAI,CACd,KAAC,UAAU,IACT,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,CACH,EACD,WAAW,CACZ,CAAC;IACJ,CAAC;IAED,QAAQ,CAAC,EAAC,MAAM,EAAoB;QAClC,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvD,IAAI,OAAO,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YAC7B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;YACvB,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAED,0DAA0D;IAC1D,WAAW,KAAI,CAAC;;AA5CT,0BAAY,GAAiC;IAClD,GAAG,MAAM,CAAC,YAAY;IACtB,EAAE,EAAE,SAAS;IACb,SAAS,EAAE,UAAU;IACrB,KAAK,EAAE,oBAAoB;CAC5B,AALkB,CAKjB"}

package/dist/reset-view-widget.d.ts

@@ -1,9 +1,9 @@
 import type { WidgetPlacement } from '@deck.gl/core';
-import { WidgetImpl, WidgetImplProps } from "./widget-impl.js";
+import { Widget, WidgetProps } from '@deck.gl/core';
 /** @todo - is the the best we can do? */
 type ViewState = Record<string, unknown>;
 /** Properties for the ResetViewWidget */
-export type ResetViewWidgetProps = WidgetImplProps & {
+export type ResetViewWidgetProps = WidgetProps & {
     /** Widget positioning within the view. Default 'top-left'. */
     placement?: WidgetPlacement;
     /** Tooltip message */
@@ -16,13 +16,13 @@ export type ResetViewWidgetProps = WidgetImplProps & {
 /**
  * A button widget that resets the view state of deck to an initial state.
  */
-export declare class ResetViewWidget extends WidgetImpl<ResetViewWidgetProps> {
+export declare class ResetViewWidget extends Widget<ResetViewWidgetProps> {
     static defaultProps: Required<ResetViewWidgetProps>;
     className: string;
     placement: WidgetPlacement;
     constructor(props?: ResetViewWidgetProps);
     setProps(props: Partial<ResetViewWidgetProps>): void;
-    onRenderHTML(): void;
+    onRenderHTML(rootElement: HTMLElement): void;
     handleClick(): void;
     setViewState(viewState: ViewState): void;
 }

package/dist/reset-view-widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reset-view-widget.d.ts","sourceRoot":"","sources":["../src/reset-view-widget.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,yBAAsB;AAG1D,yCAAyC;AACzC,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEzC,yCAAyC;AACzC,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAAG;IACnD,8DAA8D;IAC9D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2FAA2F;IAC3F,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,qBAAa,eAAgB,SAAQ,UAAU,CAAC,oBAAoB,CAAC;IACnE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAOjD;IAEF,SAAS,SAA4B;IACrC,SAAS,EAAE,eAAe,CAAc;gBAE5B,KAAK,GAAE,oBAAyB;IAK5C,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAK7C,YAAY;IAaZ,WAAW;IAKX,YAAY,CAAC,SAAS,EAAE,SAAS;CAWlC"}
+{"version":3,"file":"reset-view-widget.d.ts","sourceRoot":"","sources":["../src/reset-view-widget.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAGlD,yCAAyC;AACzC,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEzC,yCAAyC;AACzC,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAC/C,8DAA8D;IAC9D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2FAA2F;IAC3F,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,qBAAa,eAAgB,SAAQ,MAAM,CAAC,oBAAoB,CAAC;IAC/D,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAOjD;IAEF,SAAS,SAA4B;IACrC,SAAS,EAAE,eAAe,CAAc;gBAE5B,KAAK,GAAE,oBAAyB;IAK5C,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAK7C,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAW5C,WAAW;IAKX,YAAY,CAAC,SAAS,EAAE,SAAS;CAWlC"}

package/dist/reset-view-widget.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { render } from 'preact';
-import { WidgetImpl } from "./widget-impl.js";
-import { IconButton } from "./components.js";
+import { Widget } from '@deck.gl/core';
+import { IconButton } from "./lib/components/icon-button.js";
 /**
  * A button widget that resets the view state of deck to an initial state.
  */
-export class ResetViewWidget extends WidgetImpl {
+export class ResetViewWidget extends Widget {
     constructor(props = {}) {
-        super({ ...ResetViewWidget.defaultProps, ...props });
+        super(props, ResetViewWidget.defaultProps);
         this.className = 'deck-widget-reset-view';
         this.placement = 'top-left';
         this.placement = props.placement ?? this.placement;
@@ -16,11 +16,8 @@ export class ResetViewWidget extends WidgetImpl {
         this.placement = props.placement ?? this.placement;
         super.setProps(props);
     }
-    onRenderHTML() {
-        const element = this.element;
-        if (!element)
-            return;
-        render(_jsx(IconButton, { className: "deck-widget-reset-focus", label: this.props.label, onClick: this.handleClick.bind(this) }), element);
+    onRenderHTML(rootElement) {
+        render(_jsx(IconButton, { className: "deck-widget-reset-focus", label: this.props.label, onClick: this.handleClick.bind(this) }), rootElement);
     }
     handleClick() {
         const initialViewState = this.props.initialViewState || this.deck?.props.initialViewState;
@@ -39,7 +36,7 @@ export class ResetViewWidget extends WidgetImpl {
     }
 }
 ResetViewWidget.defaultProps = {
-    ...WidgetImpl.defaultProps,
+    ...Widget.defaultProps,
     id: 'reset-view',
     placement: 'top-left',
     label: 'Reset View',

package/dist/reset-view-widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"reset-view-widget.js","sourceRoot":"","sources":["../src/reset-view-widget.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,MAAM,EAAC,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAC,UAAU,EAAkB,yBAAsB;AAC1D,OAAO,EAAC,UAAU,EAAC,wBAAqB;AAiBxC;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,UAAgC;IAanE,YAAY,QAA8B,EAAE;QAC1C,KAAK,CAAC,EAAC,GAAG,eAAe,CAAC,YAAY,EAAE,GAAG,KAAK,EAAC,CAAC,CAAC;QAJrD,cAAS,GAAG,wBAAwB,CAAC;QACrC,cAAS,GAAoB,UAAU,CAAC;QAItC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;IACrD,CAAC;IAED,QAAQ,CAAC,KAAoC;QAC3C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;QACnD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAED,YAAY;QACV,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,MAAM,CACJ,KAAC,UAAU,IACT,SAAS,EAAC,yBAAyB,EACnC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,EACF,OAAO,CACR,CAAC;IACJ,CAAC;IAED,WAAW;QACT,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,gBAAgB,CAAC;QAC1F,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACtC,CAAC;IAED,YAAY,CAAC,SAAoB;QAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,SAAS,EAAE,EAAE,IAAI,cAAc,CAAC;QACpE,MAAM,aAAa,GAAG;YACpB,GAAG,SAAS;YACZ,6BAA6B;YAC7B,qDAAqD;YACrD,kDAAkD;SACnD,CAAC;QACF,uEAAuE;QACvE,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,EAAC,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,EAAE,EAAC,CAAC,CAAC;IACzF,CAAC;;AAlDM,4BAAY,GAAmC;IACpD,GAAG,UAAU,CAAC,YAAY;IAC1B,EAAE,EAAE,YAAY;IAChB,SAAS,EAAE,UAAU;IACrB,KAAK,EAAE,YAAY;IACnB,gBAAgB,EAAE,SAAU;IAC5B,MAAM,EAAE,SAAU;CACnB,AAPkB,CAOjB"}
+{"version":3,"file":"reset-view-widget.js","sourceRoot":"","sources":["../src/reset-view-widget.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,MAAM,EAAC,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAC,MAAM,EAAc,MAAM,eAAe,CAAC;AAClD,OAAO,EAAC,UAAU,EAAC,wCAAqC;AAiBxD;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,MAA4B;IAa/D,YAAY,QAA8B,EAAE;QAC1C,KAAK,CAAC,KAAK,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;QAJ7C,cAAS,GAAG,wBAAwB,CAAC;QACrC,cAAS,GAAoB,UAAU,CAAC;QAItC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;IACrD,CAAC;IAED,QAAQ,CAAC,KAAoC;QAC3C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;QACnD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAED,YAAY,CAAC,WAAwB;QACnC,MAAM,CACJ,KAAC,UAAU,IACT,SAAS,EAAC,yBAAyB,EACnC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,EACF,WAAW,CACZ,CAAC;IACJ,CAAC;IAED,WAAW;QACT,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,gBAAgB,CAAC;QAC1F,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACtC,CAAC;IAED,YAAY,CAAC,SAAoB;QAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,SAAS,EAAE,EAAE,IAAI,cAAc,CAAC;QACpE,MAAM,aAAa,GAAG;YACpB,GAAG,SAAS;YACZ,6BAA6B;YAC7B,qDAAqD;YACrD,kDAAkD;SACnD,CAAC;QACF,uEAAuE;QACvE,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,EAAC,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,EAAE,EAAC,CAAC,CAAC;IACzF,CAAC;;AAhDM,4BAAY,GAAmC;IACpD,GAAG,MAAM,CAAC,YAAY;IACtB,EAAE,EAAE,YAAY;IAChB,SAAS,EAAE,UAAU;IACrB,KAAK,EAAE,YAAY;IACnB,gBAAgB,EAAE,SAAU;IAC5B,MAAM,EAAE,SAAU;CACnB,AAPkB,CAOjB"}

package/dist/scale-widget.d.ts

@@ -0,0 +1,28 @@
+import type { WidgetPlacement, Viewport } from '@deck.gl/core';
+import { Widget, WidgetProps } from '@deck.gl/core';
+export type ScaleWidgetProps = WidgetProps & {
+    placement?: WidgetPlacement;
+    label?: string;
+    onCapture?: (widget: ScaleWidget) => void;
+};
+/**
+ * A scale widget that displays a Google Maps–like scale indicator.
+ * Instead of text inside a div, this widget renders an SVG that contains a horizontal line
+ * with two vertical tick marks (extending upward from the line only) and a pretty distance label
+ * positioned to the left of the line. The horizontal line’s length is computed from a “nice”
+ * candidate distance (e.g. 200, 500, 1000 m, etc.) so that its pixel width is between 100 and 200.
+ */
+export declare class ScaleWidget extends Widget<ScaleWidgetProps> {
+    static defaultProps: Required<ScaleWidgetProps>;
+    className: string;
+    placement: WidgetPlacement;
+    scaleWidth: number;
+    scaleValue: number;
+    scaleText: string;
+    constructor(props?: ScaleWidgetProps);
+    setProps(props: Partial<ScaleWidgetProps>): void;
+    onRenderHTML(rootElement: HTMLElement): void;
+    onViewportChange(viewport: Viewport): void;
+    handleClick(): void;
+}
+//# sourceMappingURL=scale-widget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scale-widget.d.ts","sourceRoot":"","sources":["../src/scale-widget.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAElD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF;;;;;;GAMG;AACH,qBAAa,WAAY,SAAQ,MAAM,CAAC,gBAAgB,CAAC;IACvD,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAM7C;IAEF,SAAS,SAAuB;IAChC,SAAS,EAAE,eAAe,CAAiB;IAG3C,UAAU,EAAE,MAAM,CAAM;IAExB,UAAU,EAAE,MAAM,CAAK;IAEvB,SAAS,EAAE,MAAM,CAAM;gBAEX,KAAK,GAAE,gBAAqB;IAKxC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI;IAKhD,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAwD5C,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;IAmB1C,WAAW,IAAI,IAAI;CACpB"}

package/dist/scale-widget.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { render } from 'preact';
+import { Widget } from '@deck.gl/core';
+/**
+ * A scale widget that displays a Google Maps–like scale indicator.
+ * Instead of text inside a div, this widget renders an SVG that contains a horizontal line
+ * with two vertical tick marks (extending upward from the line only) and a pretty distance label
+ * positioned to the left of the line. The horizontal line’s length is computed from a “nice”
+ * candidate distance (e.g. 200, 500, 1000 m, etc.) so that its pixel width is between 100 and 200.
+ */
+export class ScaleWidget extends Widget {
+    constructor(props = {}) {
+        super(props, ScaleWidget.defaultProps);
+        this.className = 'deck-widget-scale';
+        this.placement = 'bottom-left';
+        // The pixel width of the scale line (computed from a candidate distance)
+        this.scaleWidth = 10;
+        // The candidate distance (in meters) corresponding to the scale line length.
+        this.scaleValue = 0;
+        // The formatted distance label (e.g. "200 m" or "1.0 km")
+        this.scaleText = '';
+        this.placement = props.placement ?? this.placement;
+    }
+    setProps(props) {
+        this.placement = props.placement ?? this.placement;
+        super.setProps(props);
+    }
+    onRenderHTML(rootElement) {
+        // Reserve space for the text label (to the left of the horizontal line)
+        const lineOffsetX = 50;
+        // Overall SVG width includes the left offset plus the computed scale line width.
+        const svgWidth = lineOffsetX + this.scaleWidth;
+        const tickHeight = 10; // vertical tick extends upward by 10 pixels from the horizontal line
+        render(_jsxs("svg", { className: "deck-widget-scale", width: svgWidth, height: 30, style: { overflow: 'visible', background: 'transparent' }, onClick: this.handleClick.bind(this), children: [_jsx("text", { x: lineOffsetX + 5, y: "10", textAnchor: "end", alignmentBaseline: "middle", style: { fontSize: '16px', fill: 'black', fontWeight: 'bold', fontFamily: 'sans-serif' }, children: this.scaleText }), _jsx("line", { x1: lineOffsetX, y1: "15", x2: lineOffsetX + this.scaleWidth, y2: "15", stroke: "black", strokeWidth: "6" }), _jsx("line", { x1: lineOffsetX, y1: "15", x2: lineOffsetX, y2: 15 - tickHeight, stroke: "black", strokeWidth: "6" }), _jsx("line", { x1: lineOffsetX + this.scaleWidth, y1: "15", x2: lineOffsetX + this.scaleWidth, y2: 15 - tickHeight, stroke: "black", strokeWidth: "6" })] }), rootElement);
+    }
+    onViewportChange(viewport) {
+        // Only handle geospatial viewports (which contain latitude)
+        if (!('latitude' in viewport))
+            return;
+        const { latitude, zoom } = viewport;
+        const metersPerPixel = getMetersPerPixel(latitude, zoom);
+        const { candidate, candidatePixels } = computeScaleCandidate(metersPerPixel);
+        this.scaleValue = candidate;
+        this.scaleWidth = candidatePixels;
+        // Format the candidate distance for display (using km if >= 1000 m)
+        if (candidate >= 1000) {
+            this.scaleText = `${(candidate / 1000).toFixed(1)} km`;
+        }
+        else {
+            this.scaleText = `${candidate} m`;
+        }
+        this.updateHTML();
+    }
+    handleClick() { }
+}
+ScaleWidget.defaultProps = {
+    ...Widget.defaultProps,
+    id: 'scale',
+    placement: 'bottom-left',
+    label: 'Scale',
+    onCapture: undefined
+};
+/**
+ * Compute the meters per pixel at a given latitude and zoom level.
+ *
+ * @param latitude - The current latitude.
+ * @param zoom - The current zoom level.
+ * @returns The number of meters per pixel.
+ */
+function getMetersPerPixel(latitude, zoom) {
+    const earthCircumference = 40075016.686;
+    return (earthCircumference * Math.cos((latitude * Math.PI) / 180)) / Math.pow(2, zoom + 8);
+}
+/**
+ * Compute a "nice" scale candidate such that the scale bar width in pixels is between 100 and 200.
+ * The candidate distance (in meters) will be one of a set of round numbers (100, 200, 500, 1000, 2000, 5000, etc.).
+ *
+ * @param metersPerPixel - The number of meters per pixel at the current zoom/latitude.
+ * @returns An object containing the candidate distance and its width in pixels.
+ */
+function computeScaleCandidate(metersPerPixel) {
+    const minPixels = 100;
+    const maxPixels = 200;
+    const targetPixels = (minPixels + maxPixels) / 2;
+    const targetDistance = targetPixels * metersPerPixel;
+    const exponent = Math.floor(Math.log10(targetDistance));
+    const base = Math.pow(10, exponent);
+    const multipliers = [1, 2, 5];
+    let candidate = multipliers[0] * base;
+    let candidatePixels = candidate / metersPerPixel;
+    for (let i = 0; i < multipliers.length; i++) {
+        const currentCandidate = multipliers[i] * base;
+        const currentPixels = currentCandidate / metersPerPixel;
+        if (currentPixels >= minPixels && currentPixels <= maxPixels) {
+            candidate = currentCandidate;
+            candidatePixels = currentPixels;
+            break;
+        }
+        if (currentPixels > maxPixels) {
+            candidate = i > 0 ? multipliers[i - 1] * base : currentCandidate;
+            candidatePixels = candidate / metersPerPixel;
+            break;
+        }
+        if (i === multipliers.length - 1 && currentPixels < minPixels) {
+            candidate = multipliers[0] * base * 10;
+            candidatePixels = candidate / metersPerPixel;
+        }
+    }
+    return { candidate, candidatePixels };
+}
+//# sourceMappingURL=scale-widget.js.map

package/dist/scale-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scale-widget.js","sourceRoot":"","sources":["../src/scale-widget.tsx"],"names":[],"mappings":"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"}

package/dist/screenshot-widget.d.ts

@@ -1,7 +1,7 @@
-import { WidgetImpl, WidgetImplProps } from "./widget-impl.js";
 import type { WidgetPlacement } from '@deck.gl/core';
+import { Widget, WidgetProps } from '@deck.gl/core';
 /** Properties for the ScreenshotWidget */
-export type ScreenshotWidgetProps = WidgetImplProps & {
+export type ScreenshotWidgetProps = WidgetProps & {
     /** Widget positioning within the view. Default 'top-left'. */
     placement?: WidgetPlacement;
     /** Tooltip message */
@@ -17,13 +17,13 @@ export type ScreenshotWidgetProps = WidgetImplProps & {
  * A button widget that captures a screenshot of the current canvas and downloads it as a (png) file.
  * @note only captures canvas contents, not HTML DOM or CSS styles
  */
-export declare class ScreenshotWidget extends WidgetImpl<ScreenshotWidgetProps> {
+export declare class ScreenshotWidget extends Widget<ScreenshotWidgetProps> {
     static defaultProps: Required<ScreenshotWidgetProps>;
     className: string;
     placement: WidgetPlacement;
     constructor(props?: ScreenshotWidgetProps);
     setProps(props: Partial<ScreenshotWidgetProps>): void;
-    onRenderHTML(): void;
+    onRenderHTML(rootElement: HTMLElement): void;
     handleClick(): void;
     /** @note only captures canvas contents, not HTML DOM or CSS styles */
     captureScreenToDataURL(imageFormat: string): string | undefined;