@accelint/map-toolkit 0.3.0 → 0.4.0

package/dist/deckgl/base-map/constants.d.ts

@@ -1,16 +1,18 @@
+//#region src/deckgl/base-map/constants.d.ts
 declare const BASE_MAP_STYLE = "https://tiles.basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
 declare const PARAMETERS: {
-    depthWriteEnabled: boolean;
-    depthCompare: string;
-    depthBias: number;
-    blend: boolean;
-    depthTest: boolean;
-    blendColorSrcFactor: string;
-    blendColorDstFactor: string;
-    blendAlphaSrcFactor: string;
-    blendAlphaDstFactor: string;
-    blendColorOperation: string;
-    blendAlphaOperation: string;
+  depthWriteEnabled: boolean;
+  depthCompare: string;
+  depthBias: number;
+  blend: boolean;
+  depthTest: boolean;
+  blendColorSrcFactor: string;
+  blendColorDstFactor: string;
+  blendAlphaSrcFactor: string;
+  blendAlphaDstFactor: string;
+  blendColorOperation: string;
+  blendAlphaOperation: string;
 };
-
+//#endregion
 export { BASE_MAP_STYLE, PARAMETERS };
+//# sourceMappingURL=constants.d.ts.map

package/dist/deckgl/base-map/constants.js

@@ -1,18 +1,32 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+//#region src/deckgl/base-map/constants.ts
 const BASE_MAP_STYLE = "https://tiles.basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
 const PARAMETERS = {
-  depthWriteEnabled: true,
-  depthCompare: "always",
-  depthBias: 0,
-  blend: true,
-  depthTest: false,
-  blendColorSrcFactor: "src-alpha",
-  blendColorDstFactor: "one-minus-src-alpha",
-  blendAlphaSrcFactor: "one",
-  blendAlphaDstFactor: "one-minus-src-alpha",
-  blendColorOperation: "add",
-  blendAlphaOperation: "add"
+	depthWriteEnabled: true,
+	depthCompare: "always",
+	depthBias: 0,
+	blend: true,
+	depthTest: false,
+	blendColorSrcFactor: "src-alpha",
+	blendColorDstFactor: "one-minus-src-alpha",
+	blendAlphaSrcFactor: "one",
+	blendAlphaDstFactor: "one-minus-src-alpha",
+	blendColorOperation: "add",
+	blendAlphaOperation: "add"
 };
 
+//#endregion
 export { BASE_MAP_STYLE, PARAMETERS };
-//# sourceMappingURL=constants.js.map
 //# sourceMappingURL=constants.js.map

package/dist/deckgl/base-map/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/deckgl/base-map/constants.ts"],"names":[],"mappings":"AAaO,MAAM,cAAA,GACX;AAEK,MAAM,UAAA,GAAa;AAAA,EACxB,iBAAA,EAAmB,IAAA;AAAA,EACnB,YAAA,EAAc,QAAA;AAAA,EACd,SAAA,EAAW,CAAA;AAAA,EACX,KAAA,EAAO,IAAA;AAAA,EACP,SAAA,EAAW,KAAA;AAAA,EACX,mBAAA,EAAqB,WAAA;AAAA,EACrB,mBAAA,EAAqB,qBAAA;AAAA,EACrB,mBAAA,EAAqB,KAAA;AAAA,EACrB,mBAAA,EAAqB,qBAAA;AAAA,EACrB,mBAAA,EAAqB,KAAA;AAAA,EACrB,mBAAA,EAAqB;AACvB","file":"constants.js","sourcesContent":["// __private-exports\n/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport const BASE_MAP_STYLE =\n  'https://tiles.basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';\n\nexport const PARAMETERS = {\n  depthWriteEnabled: true,\n  depthCompare: 'always',\n  depthBias: 0,\n  blend: true,\n  depthTest: false,\n  blendColorSrcFactor: 'src-alpha',\n  blendColorDstFactor: 'one-minus-src-alpha',\n  blendAlphaSrcFactor: 'one',\n  blendAlphaDstFactor: 'one-minus-src-alpha',\n  blendColorOperation: 'add',\n  blendAlphaOperation: 'add',\n};\n"]}
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/deckgl/base-map/constants.ts"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport const BASE_MAP_STYLE =\n  'https://tiles.basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';\n\nexport const PARAMETERS = {\n  depthWriteEnabled: true,\n  depthCompare: 'always',\n  depthBias: 0,\n  blend: true,\n  depthTest: false,\n  blendColorSrcFactor: 'src-alpha',\n  blendColorDstFactor: 'one-minus-src-alpha',\n  blendAlphaSrcFactor: 'one',\n  blendAlphaDstFactor: 'one-minus-src-alpha',\n  blendColorOperation: 'add',\n  blendAlphaOperation: 'add',\n};\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAa,iBACX;AAEF,MAAa,aAAa;CACxB,mBAAmB;CACnB,cAAc;CACd,WAAW;CACX,OAAO;CACP,WAAW;CACX,qBAAqB;CACrB,qBAAqB;CACrB,qBAAqB;CACrB,qBAAqB;CACrB,qBAAqB;CACrB,qBAAqB;CACtB"}

package/dist/deckgl/base-map/events.d.ts

@@ -1,8 +1,10 @@
+//#region src/deckgl/base-map/events.d.ts
 declare const MapEventsNamespace = "map";
 declare const MapEvents: {
-    readonly click: "map:click";
-    readonly hover: "map:hover";
-    readonly viewport: "map:viewport";
+  readonly click: "map:click";
+  readonly hover: "map:hover";
+  readonly viewport: "map:viewport";
 };
-
+//#endregion
 export { MapEvents, MapEventsNamespace };
+//# sourceMappingURL=events.d.ts.map

package/dist/deckgl/base-map/events.js

@@ -1,10 +1,24 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+//#region src/deckgl/base-map/events.ts
 const MapEventsNamespace = "map";
 const MapEvents = {
-  click: `${MapEventsNamespace}:click`,
-  hover: `${MapEventsNamespace}:hover`,
-  viewport: `${MapEventsNamespace}:viewport`
+	click: `${MapEventsNamespace}:click`,
+	hover: `${MapEventsNamespace}:hover`,
+	viewport: `${MapEventsNamespace}:viewport`
 };
 
+//#endregion
 export { MapEvents, MapEventsNamespace };
-//# sourceMappingURL=events.js.map
 //# sourceMappingURL=events.js.map

package/dist/deckgl/base-map/events.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/deckgl/base-map/events.ts"],"names":[],"mappings":"AAYO,MAAM,kBAAA,GAAqB;AAE3B,MAAM,SAAA,GAAY;AAAA,EACvB,KAAA,EAAO,GAAG,kBAAkB,CAAA,MAAA,CAAA;AAAA,EAC5B,KAAA,EAAO,GAAG,kBAAkB,CAAA,MAAA,CAAA;AAAA,EAC5B,QAAA,EAAU,GAAG,kBAAkB,CAAA,SAAA;AACjC","file":"events.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport const MapEventsNamespace = 'map';\n\nexport const MapEvents = {\n  click: `${MapEventsNamespace}:click`,\n  hover: `${MapEventsNamespace}:hover`,\n  viewport: `${MapEventsNamespace}:viewport`,\n} as const;\n"]}
+{"version":3,"file":"events.js","names":[],"sources":["../../../src/deckgl/base-map/events.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport const MapEventsNamespace = 'map';\n\nexport const MapEvents = {\n  click: `${MapEventsNamespace}:click`,\n  hover: `${MapEventsNamespace}:hover`,\n  viewport: `${MapEventsNamespace}:viewport`,\n} as const;\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAa,qBAAqB;AAElC,MAAa,YAAY;CACvB,OAAO,GAAG,mBAAmB;CAC7B,OAAO,GAAG,mBAAmB;CAC7B,UAAU,GAAG,mBAAmB;CACjC"}

package/dist/deckgl/base-map/index.d.ts

@@ -1,24 +1,37 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { UniqueId } from '@accelint/core';
-import { DeckglProps } from '@deckgl-fiber-renderer/types';
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
 
+import { UniqueId } from "@accelint/core";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { DeckglProps } from "@deckgl-fiber-renderer/types";
+
+//#region src/deckgl/base-map/index.d.ts
 /**
  * Props for the BaseMap component.
  * Extends all Deck.gl props and adds additional map-specific properties.
  */
 type BaseMapProps = DeckglProps & {
-    /** Optional CSS class name to apply to the map container element */
-    className?: string;
-    /**
-     * Unique identifier for this map instance (required).
-     *
-     * Used to isolate map mode state between multiple map instances (e.g., main map vs minimap).
-     * This should be a UUID generated using `uuid()` from `@accelint/core`.
-     *
-     * The same id should be passed to `useMapMode()` when accessing map mode state
-     * from components rendered outside of the BaseMap's children (i.e., as siblings).
-     */
-    id: UniqueId;
+  /** Optional CSS class name to apply to the map container element */
+  className?: string;
+  /**
+   * Unique identifier for this map instance (required).
+   *
+   * Used to isolate map mode state between multiple map instances (e.g., main map vs minimap).
+   * This should be a UUID generated using `uuid()` from `@accelint/core`.
+   *
+   * The same id should be passed to `useMapMode()` when accessing map mode state
+   * from components rendered outside of the BaseMap's children (i.e., as siblings).
+   */
+  id: UniqueId;
 };
 /**
  * A React component that provides a Deck.gl-powered base map with MapLibre GL integration.
@@ -93,6 +106,20 @@ type BaseMapProps = DeckglProps & {
  * }
  * ```
  */
-declare function BaseMap({ id, className, children, controller, interleaved, parameters, useDevicePixels, widgets: widgetsProp, onClick, onHover, onViewStateChange, ...rest }: BaseMapProps): react_jsx_runtime.JSX.Element;
-
-export { BaseMap, type BaseMapProps };
+declare function BaseMap({
+  id,
+  className,
+  children,
+  controller,
+  interleaved,
+  parameters,
+  useDevicePixels,
+  widgets: widgetsProp,
+  onClick,
+  onHover,
+  onViewStateChange,
+  ...rest
+}: BaseMapProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { BaseMap, BaseMapProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/deckgl/base-map/index.js

@@ -1,153 +1,221 @@
-import { jsx } from 'react/jsx-runtime';
-import 'client-only';
-import { useEmit, useEffectEvent } from '@accelint/bus/react';
-import { useDeckgl, Deckgl } from '@deckgl-fiber-renderer/dom';
-import { useId, useMemo, useCallback } from 'react';
-import { INITIAL_VIEW_STATE } from '../../maplibre/constants.js';
-import { useMapLibre } from '../../maplibre/hooks/use-maplibre.js';
-import { BASE_MAP_STYLE, PARAMETERS } from './constants.js';
-import { MapEvents } from './events.js';
-import { MapProvider } from './provider.js';
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
 
-function BaseMap({
-  id,
-  className,
-  children,
-  controller = true,
-  interleaved = true,
-  parameters = {},
-  useDevicePixels = false,
-  widgets: widgetsProp = [],
-  onClick,
-  onHover,
-  onViewStateChange,
-  ...rest
-}) {
-  const deckglInstance = useDeckgl();
-  const container = useId();
-  const mapOptions = useMemo(
-    () => ({
-      container,
-      center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
-      zoom: INITIAL_VIEW_STATE.zoom,
-      doubleClickZoom: false,
-      dragRotate: false,
-      pitchWithRotate: false,
-      rollEnabled: false,
-      attributionControl: { compact: true }
-    }),
-    [container]
-  );
-  useMapLibre(deckglInstance, BASE_MAP_STYLE, mapOptions);
-  const emitClick = useEmit(MapEvents.click);
-  const emitHover = useEmit(MapEvents.hover);
-  const emitViewport = useEmit(MapEvents.viewport);
-  const handleClick = useCallback(
-    (info, event) => {
-      onClick?.(info, event);
-      const { viewport, layer, sourceLayer, ...infoRest } = info;
-      const infoObject = {
-        layerId: layer?.id,
-        sourceLayerId: sourceLayer?.id,
-        ...infoRest
-      };
-      const {
-        stopImmediatePropagation,
-        stopPropagation,
-        preventDefault,
-        srcEvent,
-        rootElement,
-        target,
-        changedPointers,
-        pointers,
-        ...eventRest
-      } = event;
-      emitClick({
-        info: infoObject,
-        event: eventRest,
-        id
-      });
-    },
-    [emitClick, id, onClick]
-  );
-  const handleHover = useCallback(
-    (info, event) => {
-      onHover?.(info, event);
-      const { viewport, layer, sourceLayer, ...infoRest } = info;
-      const infoObject = {
-        layerId: layer?.id,
-        sourceLayerId: sourceLayer?.id,
-        ...infoRest
-      };
-      const {
-        stopImmediatePropagation,
-        stopPropagation,
-        preventDefault,
-        srcEvent,
-        rootElement,
-        target,
-        ...eventRest
-      } = event;
-      emitHover({
-        info: infoObject,
-        event: eventRest,
-        id
-      });
-    },
-    [emitHover, id, onHover]
-  );
-  const handleViewStateChange = useEffectEvent(
-    (params) => {
-      onViewStateChange?.(params);
-      const {
-        viewId,
-        viewState: { latitude, longitude, zoom }
-      } = params;
-      const viewport = deckglInstance._deck.getViewports()?.find((vp) => vp.id === viewId);
-      emitViewport({
-        id,
-        bounds: viewport?.getBounds(),
-        latitude,
-        longitude,
-        zoom,
-        width: viewport?.width ?? 0,
-        height: viewport?.height ?? 0
-      });
-    }
-  );
-  const handleLoad = useEffectEvent(() => {
-    deckglInstance._deck.getViewports().forEach((vp) => {
-      handleViewStateChange({
-        viewId: vp.id,
-        viewState: {
-          latitude: vp.latitude,
-          longitude: vp.longitude,
-          zoom: vp.zoom,
-          id: vp.id,
-          bounds: vp.getBounds(),
-          width: vp.width,
-          height: vp.height
-        }
-      });
-    });
-  });
-  return /* @__PURE__ */ jsx("div", { id: container, className, children: /* @__PURE__ */ jsx(MapProvider, { id, children: /* @__PURE__ */ jsx(
-    Deckgl,
-    {
-      ...rest,
-      controller,
-      interleaved,
-      useDevicePixels,
-      onClick: handleClick,
-      onHover: handleHover,
-      onLoad: handleLoad,
-      onViewStateChange: handleViewStateChange,
-      parameters: { ...PARAMETERS, ...parameters },
-      children
-    }
-  ) }) });
+
+'use client';
+
+import { MapEvents } from "./events.js";
+import { getCursor } from "../../map-cursor/store.js";
+import { MapProvider } from "./provider.js";
+import { INITIAL_VIEW_STATE } from "../../maplibre/constants.js";
+import { useMapLibre } from "../../maplibre/hooks/use-maplibre.js";
+import { BASE_MAP_STYLE, PARAMETERS } from "./constants.js";
+import { useCallback, useId, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useEffectEvent, useEmit } from "@accelint/bus/react";
+import { Deckgl, useDeckgl } from "@deckgl-fiber-renderer/dom";
+
+//#region src/deckgl/base-map/index.tsx
+/**
+* Serializes PickingInfo for event bus transmission.
+* Omits viewport, layer, and sourceLayer (contain functions) but preserves layer IDs.
+*/
+function serializePickingInfo(info) {
+	const { viewport, layer, sourceLayer, ...infoRest } = info;
+	return {
+		layerId: layer?.id,
+		sourceLayerId: sourceLayer?.id,
+		...infoRest
+	};
+}
+function serializeMjolnirEvent(event) {
+	const { stopImmediatePropagation, stopPropagation, preventDefault, srcEvent, rootElement, target, ...rest } = event;
+	if ("changedPointers" in rest) {
+		const { changedPointers, pointers, ...gestureRest } = rest;
+		return gestureRest;
+	}
+	return rest;
+}
+/**
+* A React component that provides a Deck.gl-powered base map with MapLibre GL integration.
+*
+* This component serves as the foundation for building interactive map applications with
+* support for click and hover events through a centralized event bus. It integrates
+* Deck.gl for 3D visualizations with MapLibre GL for the base map tiles.
+*
+* **Map Mode Integration**: BaseMap automatically creates a `MapProvider` internally,
+* which sets up the map mode state management for this instance.
+* - **Children**: Only Deck.gl layer components can be rendered as children. Custom Deck.gl
+*   layers can use `useMapMode()` without parameters to access context.
+* - **Siblings**: UI components (buttons, toolbars, etc.) must be rendered as siblings
+*   and pass `id` to `useMapMode(id)`.
+*
+* **Event Bus**: Click and hover events are emitted through the event bus with the `id`
+* included in the payload, allowing multiple map instances to coexist without interference.
+*
+* @param props - Component props including id (required), className, onClick, onHover, and all Deck.gl props
+* @returns A map component with Deck.gl and MapLibre GL integration
+*
+* @example
+* Basic usage with id (recommended: module-level constant):
+* ```tsx
+* import { BaseMap } from '@accelint/map-toolkit/deckgl';
+* import { View } from '@deckgl-fiber-renderer/dom';
+* import { uuid } from '@accelint/core';
+*
+* // Create id at module level for stability and easy sharing
+* const MAIN_MAP_ID = uuid();
+*
+* export function MapView() {
+*   return (
+*     <BaseMap className="w-full h-full" id={MAIN_MAP_ID}>
+*       <View id="main" controller />
+*     </BaseMap>
+*   );
+* }
+* ```
+*
+* @example
+* With map mode and event handlers (module-level constant for sharing):
+* ```tsx
+* import { BaseMap } from '@accelint/map-toolkit/deckgl';
+* import { useMapMode } from '@accelint/map-toolkit/map-mode';
+* import { uuid } from '@accelint/core';
+* import type { PickingInfo } from '@deck.gl/core';
+* import type { MjolnirGestureEvent } from 'mjolnir.js';
+*
+* // Module-level constant - stable and shareable across all components
+* const MAIN_MAP_ID = uuid();
+*
+* function Toolbar() {
+*   // Access map mode using the shared id
+*   const { mode, requestModeChange } = useMapMode(MAIN_MAP_ID);
+*   return <div>Current mode: {mode}</div>;
+* }
+*
+* export function InteractiveMap() {
+*   const handleClick = (info: PickingInfo, event: MjolnirGestureEvent) => {
+*     console.log('Clicked:', info.object);
+*   };
+*
+*   return (
+*     <div className="relative w-full h-full">
+*       <BaseMap className="absolute inset-0" id={MAIN_MAP_ID} onClick={handleClick}>
+*         <View id="main" controller />
+*       </BaseMap>
+*       <Toolbar />
+*     </div>
+*   );
+* }
+* ```
+*/
+function BaseMap({ id, className, children, controller = true, interleaved = true, parameters = {}, useDevicePixels = false, widgets: widgetsProp = [], onClick, onHover, onViewStateChange, ...rest }) {
+	const deckglInstance = useDeckgl();
+	const container = useId();
+	useMapLibre(deckglInstance, BASE_MAP_STYLE, useMemo(() => ({
+		container,
+		center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
+		zoom: INITIAL_VIEW_STATE.zoom,
+		doubleClickZoom: false,
+		dragRotate: false,
+		pitchWithRotate: false,
+		rollEnabled: false,
+		attributionControl: { compact: true }
+	}), [container]));
+	const emitClick = useEmit(MapEvents.click);
+	const emitHover = useEmit(MapEvents.hover);
+	const emitViewport = useEmit(MapEvents.viewport);
+	const handleClick = useCallback((info, event) => {
+		onClick?.(info, event);
+		emitClick({
+			info: serializePickingInfo(info),
+			event: serializeMjolnirEvent(event),
+			id
+		});
+	}, [
+		emitClick,
+		id,
+		onClick
+	]);
+	const handleHover = useCallback((info, event) => {
+		onHover?.(info, event);
+		emitHover({
+			info: serializePickingInfo(info),
+			event: serializeMjolnirEvent(event),
+			id
+		});
+	}, [
+		emitHover,
+		id,
+		onHover
+	]);
+	const handleGetCursor = useCallback(() => {
+		return getCursor(id);
+	}, [id]);
+	const handleViewStateChange = useEffectEvent((params) => {
+		onViewStateChange?.(params);
+		const { viewId, viewState: { latitude, longitude, zoom } } = params;
+		const viewport = deckglInstance._deck.getViewports()?.find((vp) => vp.id === viewId);
+		emitViewport({
+			id,
+			bounds: viewport?.getBounds(),
+			latitude,
+			longitude,
+			zoom,
+			width: viewport?.width ?? 0,
+			height: viewport?.height ?? 0
+		});
+	});
+	const handleLoad = useEffectEvent(() => {
+		deckglInstance._deck.getViewports().forEach((vp) => {
+			handleViewStateChange({
+				viewId: vp.id,
+				viewState: {
+					latitude: vp.latitude,
+					longitude: vp.longitude,
+					zoom: vp.zoom,
+					id: vp.id,
+					bounds: vp.getBounds(),
+					width: vp.width,
+					height: vp.height
+				}
+			});
+		});
+	});
+	return /* @__PURE__ */ jsx("div", {
+		id: container,
+		className,
+		children: /* @__PURE__ */ jsx(MapProvider, {
+			id,
+			children: /* @__PURE__ */ jsx(Deckgl, {
+				...rest,
+				controller,
+				interleaved,
+				useDevicePixels,
+				onClick: handleClick,
+				onHover: handleHover,
+				onLoad: handleLoad,
+				onViewStateChange: handleViewStateChange,
+				getCursor: handleGetCursor,
+				parameters: {
+					...PARAMETERS,
+					...parameters
+				},
+				children
+			})
+		})
+	});
 }
 
+//#endregion
 export { BaseMap };
-//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map