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.

visible​

boolean

Whether location icon is visible, defaults to true