Map

Display maps, locations and routes within the meter. Camera center, orientation, zoom and map style can be set, using path to provide route points; following the user's location requires valid positioning data.

Example

function main() {
  return (
    <Map
      center="userLocation"
      heading="northUp"
      mapStyle="standard"
      appearance="automatic"
      showUserLocation={true}
      cameraAnimation={true}
      regionOffset={{ x: 0, y: 20 }}
    />
  );
}

Usage

center positions the camera; path supplies the route separately. Setting center creates no route. null separates path segments. Use cameraAnimation for camera changes. Route strokes accept Color, not gradients. Check location availability or supply fixed coordinates.
Layout reserves space before x/y and transform are applied. Moving a child right by 20 points does not push its siblings away; use spacing or Spacer to change gaps. Rotation and scaling affect the completed View.

Properties

center?"userLocation" | "dataLocation" | MapCoordinate

Camera center source: native user location, current instrument location, or fixed coordinates. Defaults to userLocation.

Example"userLocation"

showUserLocation?boolean

Show the native user-location marker when a location is available.

Exampletrue

path?ReadonlyArray<MapCoordinate | null>

Route coordinates in order. Null breaks a segment. Coordinates use latitude/longitude; an empty array draws no route.

Example[]

pathStyle?MapPathStyle

Native route style: Color stroke, width, cap, join, dash, outline and optional endpoint markers. Gradients are unsupported.

Example{stroke: $env.accent, lineWidth: 4, outlineStroke: $env.foreground, outlineWidth: 1}

heading?"northUp" | "vehicle" | "path" | number

Camera heading: northUp, vehicle, path, or degrees normalized modulo 360. Path heading respects segment breaks.

Example"northUp"

regionOffset?ViewPoint

Crop offset in screen points. Positive x/y moves the visible region right/down; map content moves left/up.

Example{x: 0, y: 0}

pitch?number

Camera tilt in degrees; 0 looks straight down.

Example0

mapStyle?"standard" | "satellite" | "hybrid"

Map imagery: standard roads, satellite imagery or hybrid imagery with labels.

Example"standard"

appearance?"automatic" | "light" | "dark"

Map appearance: automatic follows the environment, or force light/dark.

Example"automatic"

cameraAnimation?boolean

Animate native camera changes. Enabled by default; disabled on the first frame and with Reduce Motion.

Exampletrue

Common properties

width?number | "auto" | "fill"

Width in points, auto sizing or parent fill.

Example"fill"

height?number | "auto" | "fill"

Height in points, auto sizing or parent fill.

Example"fill"

x?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

y?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

transform?ViewTransform

Transform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.

Example{rotation: 0}

opacity?number

Opacity of the whole View: 0 is transparent, 1 is opaque.

Example1

cornerRadius?number

Corner radius in points.

Example0

clipped?boolean

Clip drawing that extends beyond the View bounds.

Examplefalse

clip?"rectangle" | "ellipse"

Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.

Example"rectangle"

zIndex?number

Drawing order among siblings; larger values appear in front.

Example0

animations?MapAnimation[]

Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.

Example[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Stable identity among siblings.

Practical example

function main() {
  return (
    <Map
      width={260}
      height={180}
      center={{ latitude: 31.2304, longitude: 121.4737 }}
      heading="northUp"
      showUserLocation={false}
      cameraAnimation={false}
      path={[
        { latitude: 31.2304, longitude: 121.4737 },
        { latitude: 31.232, longitude: 121.476 },
        null,
        { latitude: 31.235, longitude: 121.48 },
        { latitude: 31.237, longitude: 121.482 },
      ]}
      pathStyle={{
        stroke: $env.accent,
        lineWidth: 4,
        outlineStroke: 'white',
        outlineWidth: 1,
        showEndpoints: true,
      }}
    />
  );
}

Animation

widthheightxyopacitycornerRadiustransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYregionOffset.xregionOffset.ypathStyle.lineWidthpathStyle.outlineWidthpathStyle.dashPhasepathStyle.strokepathStyle.outlineStroke

When omitted

The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.

Properties	When omitted
`center`	`"userLocation"`
`heading`	`"northUp"`
`cameraAnimation`	`true`
`mapStyle`	`"standard"`
`appearance`	`"automatic"`
`showUserLocation`	`true`
`pitch`	`0`

Example

Usage

Properties

Practical example

Animation

When omitted

$data · Driving data

Animation

On this page

Map

Example

Usage

Properties

Practical example

Animation

When omitted

Related APIs

$data · Driving data

Animation

On this page