Toolkits@accelint/map-toolkit
Overview
A collection of components and utilities to simplify visualizing and working with geospatial data.
Installation
pnpm add @accelint/map-toolkitOverview
The Map Toolkit provides React components and utilities for building interactive geospatial applications. Built on top of Deck.gl and MapLibre GL, it offers a comprehensive set of tools for:
- Base Maps - Deck.gl-powered maps with MapLibre GL integration
- State Management - Coordinated camera, cursor, and mode management
- Visualization Layers - Symbol layers, grid layers (GARS, MGRS), and shape drawing
- Interactive Tools - Drawing, editing, and selecting shapes
- Widgets - HTML overlay system for custom UI elements
Main Entry Points
| Export Path | Description |
|---|---|
| camera | Camera state management and coordinate system operations |
| cursor-coordinates | Track and format cursor coordinates in multiple systems |
| deckgl | Deck.gl base map, layers, extensions, and widgets |
| map-cursor | Cursor state management and custom cursor icons |
| map-mode | Map interaction mode management (pan, draw, select, etc.) |
| maplibre | MapLibre GL integration and custom handlers |
| viewport | Viewport state management and responsive sizing |
Quick Start
import { BaseMap } from '@accelint/map-toolkit/deckgl';
import { useCamera } from '@accelint/map-toolkit/camera';
import { uuid } from '@accelint/core';
const MAP_ID = uuid();
export function MapView() {
// Access camera state
const camera = useCamera(MAP_ID);
return (
<div className="relative w-full h-screen">
<BaseMap id={MAP_ID} className="w-full h-full" />
{/* Display current coordinates */}
<div className="absolute top-4 left-4 bg-white p-2 rounded shadow">
Lat: {camera.latitude.toFixed(4)},
Lon: {camera.longitude.toFixed(4)},
Zoom: {camera.zoom.toFixed(2)}
</div>
</div>
);
}Architecture
The toolkit uses a centralized event bus pattern for coordinating state across components:
- Event Bus - All map interactions flow through
@accelint/bus - Stores - Each subsystem (camera, cursor, mode) maintains its own store
- Hooks - React hooks subscribe to store updates and emit events
- Components - Map components emit and respond to events
This architecture enables:
- Multiple map instances with isolated state
- Coordinated interactions across components
- Custom UI that responds to map state changes
- Easy integration with existing event-driven systems
Related
- @accelint/bus - Event bus for component coordination
- @accelint/hotkey-manager - Keyboard shortcut management
- @accelint/geo - Geographic coordinate utilities
- Deck.gl Documentation - Official Deck.gl docs
- MapLibre GL Documentation - Official MapLibre GL docs