BaseMap()

BaseMap(props): Element

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.

Parameters

props

BaseMapProps

Component props including id (required), className, onClick, onHover, and all Deck.gl props

Returns

Element

A map component with Deck.gl and MapLibre GL integration

Examples

Basic usage with id (recommended: module-level constant):

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>
  );
}

With map mode and event handlers (module-level constant for sharing):

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>
  );
}