⚠️ Early Stage Project: This library is not production-ready yet. Developers should use it with caution and expect breaking changes.

Controls

Add interactive controls to your map for zoom, compass, location, and fullscreen.

Installation

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

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

Then install the controls component:

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

Zoom

The MapZoom component provides zoom in and zoom out buttons.

Orientation

The MapOrientation component shows a compass that displays the current map bearing and resets the map orientation when clicked. Try rotating the map (hold Ctrl/Cmd + drag) to see the compass rotate.

Fullscreen

The MapFullscreen component toggles fullscreen mode for the map container.