Skip to content

Add Map component #4

Description

@vickystickz

Description

Add a Map UI component built on maplibre-gl / @vis.gl/react-maplibre, giving the design system a themeable, composable map primitive (markers, popups, routes, raster/COG layers, hillshade, terrain, GeoJSON, arcs, and clustering) instead of consumers wiring up MapLibre by hand.

Key pieces:

  • Map — root component with light/dark style switching (follows next-themes-style class/data-theme or system preference), custom controls, and a blank mode for tile-less data-viz use cases
  • Marker family — MapMarker, MarkerContent, MarkerPopup, MarkerTooltip, MarkerLabel
  • Overlays/layers — MapPopup, MapRoute, MapRasterLayer, MapHillshade, MapTerrain, MapGeoJSON, MapArc, MapClusterLayer
  • MapControls and cogUrl helper for Cloud Optimized GeoTIFFs via @geomatico/maplibre-cog-protocol
  • Storybook stories (map.stories.tsx) demonstrating each variant, including a drag-to-reorder layers demo using @dnd-kit

Also required build/config changes:

  • Exclude maplibre-gl from Vite's dependency pre-bundling in Storybook (.storybook/main.ts) — pre-bundling breaks the worker chunk reference
  • New deps: @vis.gl/react-maplibre, @geomatico/maplibre-cog-protocol, @dnd-kit/{core,sortable,utilities}, @types/geojson, @types/d3-scale

Tasks

  • Setup Map component + subcomponents in src/components/ui/map.tsx
  • Add Storybook stories covering markers, popups, routes, raster/hillshade/terrain, GeoJSON, arcs, and clustering
  • Verify light/dark theme switching works in Storybook (both class and data-theme strategies)
  • Confirm COG raster layers load via the cog:// protocol
  • Document usage/props in Storybook autodocs

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions