@octostar/map-component

A powerful MapLibre-based map editor component for React applications. Provides drawing tools, layer management, timeline filtering, and more.

⚠️ Proprietary Software: This package is proprietary to Octostar Limited. Unauthorized use is prohibited.

Prerequisites

• Node.js 20+ (see .nvmrc)
• pnpm 9+
• GitHub account with access to the octostar organization

Using nvm

If you use nvm to manage Node.js versions:

# Install the correct Node.js version
nvm install

# Use the correct Node.js version
nvm use

Development Setup

Clone the repo and install dependencies:

pnpm install

Start the development server with the demo app:

pnpm dev

Building

pnpm build:lib

This outputs:

• dist/index.mjs - ES module
• dist/index.cjs - CommonJS module
• dist/types/ - TypeScript declarations
• dist/styles.css - Component styles

Usage (as a package)

import { MapEditorCanvas } from '@octostar/map-component';
import '@octostar/map-component/styles.css';

function App() {
  return (
    <MapEditorCanvas
      enableDrawing
      enableLayers
      initialCenter={[-0.1276, 51.5074]} // London
      initialZoom={10}
      onFeatureCreate={(feature) => console.log('Created:', feature)}
      onFeatureSelect={(features) => console.log('Selected:', features)}
    />
  );
}

Main Components

| Component | Description | |-----------|-------------| | MapEditorCanvas | Main map component with drawing, selection, and layer support | | LayersPanel | UI panel for managing map layers | | DrawingToolbar | Toolbar with drawing and selection tools | | PropertiesPanel | Panel for editing feature properties | | Timebar | Timeline component for temporal filtering |

Configuration Options

<MapEditorCanvas
  // Feature flags
  enableDrawing={true}
  enableLayers={true}
  enableTimeline={true}
  enableMeasurement={true}
  enableSelection={true}
  
  // Initial state
  initialCenter={[lng, lat]}
  initialZoom={10}
  baseMapStyle="streets" // 'streets' | 'satellite' | 'terrain' | 'dark'
  
  // Callbacks
  onFeatureCreate={(feature) => {}}
  onFeatureUpdate={(feature) => {}}
  onFeatureDelete={(featureIds) => {}}
  onFeatureSelect={(features) => {}}
  onLayerChange={(layers) => {}}
  onViewportChange={(viewport) => {}}
  onMapReady={() => {}}
/>

License

Proprietary - Octostar Limited. See LICENSE for details.