@composy/3d-map-core

Framework-agnostic 3D map engine for LDesign.

What It Provides

• MapEngine lifecycle and camera APIs.
• MapRenderer wrapper around MapLibre GL JS with fallback rendering.
• BuildingRenderer for Deck.gl 3D building extrusion.
• LayerManager for GeoJSON, heatmap, scatterplot, arc, and route layers.
• DataManager, OverpassClient, and CacheManager for data loading.
• InteractionManager, Picker, and InfoWindow with safe DOM rendering.
• AnimationManager, CameraAnimation, and DataTransition.
• Token-based themes: darkTheme, lightTheme, satelliteTheme, cyberpunkTheme.

Usage

import { createMapEngine } from '@composy/3d-map-core'

const engine = await createMapEngine({
  container: '#map',
  center: [116.397428, 39.90923],
  zoom: 14,
  pitch: 45,
  buildings: {
    enabled: true,
    style: {
      color: 'var(--ld-primary-500)',
      edgeColor: 'var(--ld-primary-700)',
      opacity: 0.82,
    },
  },
})

engine.setTheme('dark')
engine.flyTo({ center: [121.473701, 31.230416], zoom: 15, pitch: 60 })

Styling Rules

• Runtime-created elements use ldesign-3d-map-* class names.
• Colors use packages/color generated variables such as --ld-primary-500, --ld-bg-elevated, and --ld-text-primary.
• Sizes use packages/size generated variables with the default --ld-* prefix.
• colorToRgba() resolves CSS variable colors before passing values to Deck.gl.

Build

pnpm --dir libraries/3d-map/packages/core run type-check
pnpm --dir libraries/3d-map/packages/core run build

Outputs:

• dist/index.js and dist/index.min.js
• es/**
• esm/**
• lib/**