Skip to main content

LocationPuck

import { LocationPuck } from '@rnmapbox/maps';

LocationPuck

Renders a puck on the map that shows the device's current location.

props​

androidRenderMode​

'normal' | 'compass' | 'gps'

Android render mode.

  • normal: just a circle
  • compass: triangle with heading
  • gps: large arrow

@deprecated use puckBearing for source and bearingImage for image @platform android

puckBearing​

'heading' | 'course'

The bearing of the puck.

  • heading: Orients the puck to match the direction in which the device is facing.

  • course: Orients the puck to match the direction in which the device is moving.

puckBearingEnabled​

boolean

Whether the puck rotates to track the bearing source.

iosShowsUserHeadingIndicator​

boolean

iOS only. A Boolean value indicating whether the user location annotation may display a permanent heading indicator.

@platform ios @deprecated use puckBearingEnabled={true} puckBearing="heading" instead

topImage​

string

The name of image to use as the top layer for the location indicator. Images component should define this image.

Custom Native UserLocation

bearingImage​

string

The name of image to use as the middle layer for the location indicator. Images component should define this image.

shadowImage​

string

The name of image to use as the background for the location indicator. Images component should define this image.

scale​

T | Expression

The size of the images, as a scale factor applied to the size of the specified image. Supports expressions based on zoom.

@example ["interpolate",["linear"], ["zoom"], 10.0, 1.0, 20.0, 4.0]] @example 2.0

Custom Native UserLocation

pulsing​

| {
    /**
     * Flag determining whether the pulsing circle animation.
     */
    isEnabled?: boolean;

    /**
     * The color of the pulsing circle.
     */
    color?: number | ColorValue;

    /**
     * Circle radius configuration for the pulsing circle animation.
     *  - accuracy:  Pulsing circle animates with the `horizontalAccuracy` form the latest puck location.
     *  - number: Pulsing circle should animate with the constant radius.
     */
    radius?: 'accuracy' | number;
  }
| 'default'

The configration parameters for sonar-like pulsing circle animation shown around the 2D puck.

model​

type Model = {
  uri: string \| number; /* URL of a glTF/glb model, or an asset reference from `require`. */
  scale: T \| Expression; /* Scale of the model in x, y, z. Supports expressions based on zoom. */
  rotation: T \| Expression; /* Rotation of the model in degrees around x, y, z. */
  opacity: T \| Expression; /* Opacity of the model, between 0 and 1. */
}

Renders the puck as a 3D model instead of the 2D images. When set, topImage, bearingImage, shadowImage, scale, pulsing and androidRenderMode are ignored.

Example: { uri: require('./car.glb'), scale: [1, 1, 1], rotation: [0, 0, 90] }

Location Puck 3D

visible​

boolean

Whether location icon is visible, defaults to true