Components

Overview

Provider-flexible interactive street map rendered with MapLibre GL JS and styled to match Opus surfaces, controls, markers, and focus states. The default detailed basemaps include roads, buildings, labels, boundaries, and points of interest.

Theme support

With theme="auto", the map follows the nearest Opus data-theme value and swaps between detailed OpenFreeMap Bright and Dark styles. Supply lightStyleUrl and darkStyleUrl to use your own paired styles, or styleUrl to force one provider style.

Coordinates and address

Enable showCoordinates to expose longitude and latitude. With showAddress, Map performs a cached, debounced reverse lookup and displays the nearest address. Supply your own reverseGeocode callback for a production geocoding provider, private endpoint, or application API; pass false to disable lookup entirely.

Current location

With showGeolocate enabled (default), a locate control appears beside the navigation controls. It requests browser geolocation permission, flies to the user, and optionally tracks movement with an accuracy circle. Listen via onUserLocation for the resolved coordinates. Geolocation requires a secure context (HTTPS or localhost).

Provider strategy

The defaults use OpenFreeMap without an API key. Production apps can instead supply hosted MapTiler, another MapLibre-compatible vector style, or self-hosted style URLs. Reverse geocoding is separately provider-configurable.

Accessibility

• The map exposes a labelled region.
• Markers and hotspot rows are keyboard-focusable buttons with accessible labels.
• Coordinate metadata uses a semantic description list.
• Navigation can be disabled for static summaries.

Attribution

Keep attribution enabled unless your selected provider and data licence explicitly allow a different presentation.