Compare
Compare two map views side-by-side or stacked with customizable orientation.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://terrae.vercel.app/maps/map.jsonThen install the compare component:
npx shadcn@latest add https://terrae.vercel.app/maps/map-compare.jsonCustom Map Styles
Use the beforeStyle and afterStyle props to compare any two Mapbox styles. This is useful for comparing different visualization approaches, showing before/after changes, or demonstrating map updates.
Vertical OrientationNew
Use the orientation prop to switch between horizontal (side-by-side) and vertical (stacked) layouts. Vertical orientation is useful for comparing maps on narrow screens or when you want to emphasize vertical changes in the map data.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
accessToken | string | required | Mapbox access token |
orientationNew | "horizontal" | "vertical" | "horizontal" | Layout orientation for the comparison |
showLabelsNew | boolean | false | Show labels on each map panel |
beforeStyle | string | light theme | Style URL for the before/top map |
afterStyle | string | dark theme | Style URL for the after/bottom map |
center | [number, number] | [0, 0] | Initial map center as [longitude, latitude] |
zoom | number | 2 | Initial zoom level |
pitch | number | 0 | Map tilt angle (0-85 degrees) |
bearing | number | 0 | Map rotation (-360 to 360 degrees) |
projection | string | "mercator" | Map projection type |
defaultSize | number | 50 | Initial split position (0-100 percentage) |
Notes
- Renders two independent map instances, which doubles map load billing
- Each map can be interacted with independently - zoom and pan are not synchronized
- Set
defaultSizeto control the initial split position (0-100) - Labels are hidden by default - use
showLabelsto display them - Vertical orientation uses "Top" and "Bottom" labels instead of "Before" and "After"