Components

MapView

MapView embeds a coordinate-based map surface using a web map provider while keeping SwiftUI's location-focused mental model.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { MapView } from '@swiftuijs/ui';
export default function Example() {
    return (<MapView latitude={37.3346} longitude={-122.009} title="Apple Park" zoom={14}></MapView>);
}

Status: adapted

SwiftUI Correspondence: Adapted from SwiftUI's Map. Naming note: The public React API uses MapView to avoid colliding with JavaScript's built-in Map.

Usage and limitations

  • The current implementation uses an embedded OpenStreetMap view.
  • Interactive controls come from the provider iframe rather than a custom renderer.
  • Prefer coordinateRegion when the surrounding screen already models a center/span region.
  • Use annotations, selection, and defaultSelection to model the currently selected place in a SwiftUI-like way.
  • Use openLabel and onOpen to align the fallback link with the rest of your UI copy and analytics.

More examples

City Landmark
Region
With Annotations

API reference

PropTypeRequiredDescription
latitudenumberYes—
longitudenumberYes—
zoomnumberNo—
titlestringNo—
annotationsArray<{ id: string title: string latitude: number longitude: number }>No—
selectionstringNo—
defaultSelectionstringNo—
onSelectionChange(id: string) => voidNo—
coordinateRegion{ center: { latitude: number longitude: number } span?: { latitudeDelta: number longitudeDelta: number } }No—
openLabelstringNo—
onOpen() => voidNo—

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

List

Group rows and sections in a list-style container.

MatchedGeometryEffect

MatchedGeometryEffect adapts SwiftUI's `matchedGeometryEffect` modifier into explicit shared metadata on the web.