MiniMap
Add a minimap overview to help users understand their location context.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://terrae.vercel.app/maps/map.jsonThen install the minimap component:
npx shadcn@latest add https://terrae.vercel.app/maps/mini-map.jsonCustom Position
Position the minimap in any corner of the map using the position prop.
RoundedNew
Use the rounded prop to customize the border radius. Set to "full" for a circular minimap.
DraggableNew
Enable the draggable prop to let users move the minimap anywhere within the map.
Custom Styling
Customize the minimap size, zoom offset, and viewport box appearance to match your design.
Properties
| Prop | Type | Description |
|---|---|---|
position | "top-left" | "top-right" | "bottom-left" | "bottom-right" | Corner position of the minimap. |
width | number | Width in pixels. |
height | number | Height in pixels. |
zoomOffset | number | Zoom offset from main map (negative = zoomed out). |
style | string | Custom Mapbox style URL. Overrides theme-based styles. |
stylesNew | MapThemeStyles | Theme-aware styles object with light/dark variants. Automatically switches based on theme. |
boxColor | string | Color of the viewport box. |
boxBorderWidth | number | Border width of the viewport box. |
roundedNew | number | "full" | "none" | Border radius in pixels, "full" for circular, or "none". |
draggableNew | boolean | Allow users to drag the minimap anywhere within the map. |