Components

MapView

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

Examples

Preview unavailable for this example in the static docs build.

Examples

Preview unavailable for this example in the static docs build.

Show code

<MapView latitude={40.7484} longitude={-73.9857} title="Empire State Building"></MapView>

Examples

Preview unavailable for this example in the static docs build.

Show code

<MapView coordinateRegion={{
      center: {
        latitude: 37.3346,
        longitude: -122.009,
      },
      span: {
        latitudeDelta: 0.2,
        longitudeDelta: 0.3,
      },
    }} latitude={37.3346} longitude={-122.009} openLabel="Open in Maps" title="Apple Park Region"></MapView>

Examples

Preview unavailable for this example in the static docs build.

Show code

<MapView annotations={[
      { id: 'park', title: 'Apple Park', latitude: 37.3346, longitude: -122.009 },
      { id: 'visitor', title: 'Visitor Center', latitude: 37.3327, longitude: -122.0053 },
    ]} defaultSelection="visitor" latitude={37.3346} longitude={-122.009} title="Apple Campus"></MapView>

API

Prop	Type	Required	Description
`latitude`	`number`	Yes	No description yet.
`longitude`	`number`	Yes	No description yet.
`zoom`	`number`	No	No description yet.
`title`	`string`	No	No description yet.
`annotations`	`Array<{ id: string title: string latitude: number longitude: number }>`	No	No description yet.
`selection`	`string`	No	No description yet.
`defaultSelection`	`string`	No	No description yet.
`onSelectionChange`	`(id: string) => void`	No	No description yet.
`coordinateRegion`	`{ center: { latitude: number longitude: number } span?: { latitudeDelta: number longitudeDelta: number } }`	No	No description yet.
`openLabel`	`string`	No	No description yet.
`onOpen`	`() => void`	No	No description yet.

Inherits additional props from IBaseComponent.

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

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.

Notes

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.

List

List is a container that presents rows of data arranged in a single column. Lists are commonly used to display collections of items, often with dividers between items.

MatchedGeometryEffect

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

MapView

Examples

API

Notes

On this page