Map

The simplest way to add an interactive map to your application.

Basic Usage

The Map component handles MapLibre GL setup, theming, and provides context for child components.

Controlled Mode

Use the viewport and onViewportChange props to control the map's viewport externally. This is useful when you need to sync the map state with your application or respond to viewport changes.

lng: -74.006lat: 40.713zoom: 8.0bearing: 0.0°pitch: 0.0°

Custom Styles

Use the styles prop to provide custom map styles. This example uses free vector tiles from OpenFreeMap, an open-source project, the data comes from OpenStreetMap.