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
Description
Add a
MapUI component built onmaplibre-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 (followsnext-themes-styleclass/data-themeor system preference), custom controls, and ablankmode for tile-less data-viz use casesMapMarker,MarkerContent,MarkerPopup,MarkerTooltip,MarkerLabelMapPopup,MapRoute,MapRasterLayer,MapHillshade,MapTerrain,MapGeoJSON,MapArc,MapClusterLayerMapControlsandcogUrlhelper for Cloud Optimized GeoTIFFs via@geomatico/maplibre-cog-protocolmap.stories.tsx) demonstrating each variant, including a drag-to-reorder layers demo using@dnd-kitAlso required build/config changes:
maplibre-glfrom Vite's dependency pre-bundling in Storybook (.storybook/main.ts) — pre-bundling breaks the worker chunk reference@vis.gl/react-maplibre,@geomatico/maplibre-cog-protocol,@dnd-kit/{core,sortable,utilities},@types/geojson,@types/d3-scaleTasks
Mapcomponent + subcomponents insrc/components/ui/map.tsxclassanddata-themestrategies)cog://protocol