@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.

Versioning & Releases

Versioning is driven by GitVersion 6 (GitVersion.yml, GitHubFlow/v1). Every push to main (outside *.md/docs/**) computes the next semantic version, pushes the matching v<version> git tag, publishes the package to npm, and creates a GitHub release with generated notes.

The default increment is patch — each merge to main bumps the patch version (e.g. 0.1.32 → 0.1.33). Override the bump from a commit/PR message:

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

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.