Lines

First, make sure you have the base map component installed:

npx shadcn@latest add https://terrae.vercel.app/maps/map.json

Then install the line component:

npx shadcn@latest add https://terrae.vercel.app/maps/map-line.json

Draw a simple line connecting a series of coordinates.

Combine lines with markers to show stops or waypoints along the path.

Display real-world routes calculated by OSRM (Open Source Routing Machine). This example fetches the optimized route between waypoints and displays it on the map.

Customize line colors using the color prop. Choose from any color value to match your design or data visualization needs.

Adjust the thickness of your lines using the width prop. Values are in pixels and can range from thin (1px) to thick (15px or more).

Control line transparency with the opacity prop. Values range from 0 (transparent) to 1 (fully opaque).

Control the dash length in dashed lines using the dashArray prop. The first value determines the length of each dash segment.

Adjust the spacing between dashes using the gap value in the dashArray prop. The second value controls the space between each dash.