@ogc-maps/storybook-components

A reusable, config-driven map component library built on OGC API standards. Designed for building interactive web maps with React and tipg — the library itself has no MapLibre dependency.

Features

• Framework Agnostic: Pure React UI components with no direct MapLibre dependencies.
• Config-Driven: Define map structure and behavior via strongly-typed JSON configuration.
• OGC Standards: Native support for OGC API Features and Tiles (e.g., via tipg).
• Controlled Components: Fully controlled UI components for seamless state management.
• TypeScript: Comprehensive type definitions inferred from Zod schemas.
• Data-Driven Styling: Visual editors for categorical and gradient color expressions.
• Geometry Export: CSV export with WKT geometry support.

Installation

pnpm add @ogc-maps/storybook-components
# or
npm install @ogc-maps/storybook-components
# or
yarn add @ogc-maps/storybook-components

Peer dependencies: react, react-dom, react-icons

Quick Start

// 1. Import styles in your entry point (default styles use the mapui: prefix; you can override with your own Tailwind/CSS)
import '@ogc-maps/storybook-components/style.css';

// 2. Define and validate your config
import { safeValidateMapConfig } from '@ogc-maps/storybook-components/schemas';

const result = safeValidateMapConfig(myConfig);
if (!result.success) throw new Error('Invalid config');

// 3. Render components with your state
import { LayerPanel } from '@ogc-maps/storybook-components/components/LayerPanel';
import { Legend }     from '@ogc-maps/storybook-components/components/Legend';

function MapUI({ layers, visibleIds, onToggle }) {
  return (
    <>
      <LayerPanel layers={layers} activeLayerIds={visibleIds} onToggleVisibility={onToggle} />
      <Legend layers={layers} visibleLayerIds={visibleIds} />
    </>
  );
}

Default styles use the mapui: Tailwind prefix so they won't clash with your app's utility classes; override them with your own CSS or Tailwind as needed.

Documentation

• Getting Started — Installation, minimal config, first render
• Configuration — Full MapConfig schema reference
• Components — All component APIs with props tables and examples
• Hooks & Utilities — OGC API hooks and utility functions
• Publishing — Versioning and release guide

License

MIT