Grid
Coordinate grid overlay with latitude/longitude lines and labels.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the grid component:
npx shadcn@latest add https://www.terrae.dev/grid.jsonCustom Styling
Customize the grid appearance with lineColor, lineOpacity, lineWidth, and label styling props. The green styling below creates a radar-like appearance.
Dense Grid
For higher zoom levels, reduce the latitudeInterval and longitudeInterval to show more detailed coordinate lines. This example uses 1-degree intervals.
Minimal Grid
Set showLabels to false for a clean grid overlay without coordinate labels. Useful as a subtle reference grid.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | "map-grid" | Unique identifier for the grid layers |
latitudeInterval | number | 10 | Degrees between latitude lines |
longitudeInterval | number | 10 | Degrees between longitude lines |
lineColor | string | #ffffff | Color of the grid lines |
lineOpacity | number | 0.3 | Opacity of the grid lines (0-1) |
lineWidth | number | 1 | Width of the grid lines in pixels |
showLabels | boolean | true | Whether to show coordinate labels |
labelColor | string | #ffffff | Color of the coordinate labels |
labelSize | number | 10 | Font size of the labels in pixels |
labelBackground | string | rgba(0, 0, 0, 0.5) | Background color of the labels |
Use Cases
Navigation
Reference grid for maritime and aviation navigation
Scientific Mapping
Coordinate reference for geographic data analysis