@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

The map component injects internal properties onto GeoJSON features at runtime (styling, selection state, heatmap visibility, etc.). When building custom tooltips via tooltipProvider, filter these out so users only see meaningful data:

import { isInternalProperty } from '@octostar/map-component';

const tooltipProvider = (feature) => {
  const displayProps = Object.entries(feature.properties ?? {})
    .filter(([key]) => !isInternalProperty(key));
  // render displayProps...
};

Export	Description
`isInternalProperty(key)`	Returns `true` if the key is injected by the map component at runtime
`INTERNAL_PROPERTY_KEYS`	`Set<string>` of exact keys (e.g. `fill`, `pointRadius`, `meta:type`)
`INTERNAL_PROPERTY_PREFIXES`	`string[]` of prefixes (e.g. `isHidden`, `isSelected`, `trace`)

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.

JSPM