Skip to main content

MarkerView

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

MarkerView

MarkerView represents an interactive React Native marker on the map.

If you have static views, consider using PointAnnotation or SymbolLayer to display an image, as they'll offer much better performance. Mapbox suggests using this component for a maximum of around 100 views displayed at one time.

This is implemented with view annotations on Android and iOS.

This component has no dedicated onPress method. Instead, handle gestures with the React views passed in as children — Pressable, TouchableOpacity, etc. all work including their visual feedback (opacity, scale, etc.).

props​

coordinate​

Position

required The center point (specified as a map coordinate) of the marker.

anchor​

type Anchor = {
  x: number; /* FIX ME NO DESCRIPTION */
  y: number; /* FIX ME NO DESCRIPTION */
}

Any coordinate between (0, 0) and (1, 1), where (0, 0) is the top-left corner of the view, and (1, 1) is the bottom-right corner. Defaults to the center at (0.5, 0.5).

defaults to: { x: 0.5, y: 0.5 }

allowOverlap​

boolean

Whether or not nearby markers on the map should all be displayed. If false, adjacent markers will 'collapse' and only one will be shown. Defaults to false.

defaults to: false

allowOverlapWithPuck​

boolean

Whether or not nearby markers on the map should be hidden if close to a UserLocation puck. Defaults to false.

defaults to: false

isSelected​

boolean

FIX ME NO DESCRIPTION

defaults to: false

allowZElevate​

boolean

Places the marker on the roof of the 3D building (fill extrusion or model) under it instead of at ground level. Defaults to false.

Marker View Placement

priority​

number

Placement order among markers: higher priority markers are placed first, so they win when markers collide and allowOverlap is false. Negative values are allowed. Defaults to 0. Use either this or isSelected, not both.

Marker View Placement

minZoom​

number

Minimum zoom level, in the range [0, 22], at which the marker is shown. Defaults to 0.

Marker View Placement

maxZoom​

number

Maximum zoom level, in the range [0, 22], at which the marker is shown. Defaults to 22.

stopGesturePropagation​

boolean

Keep pan/pinch/drag gestures that start on this marker inside the marker instead of letting them reach the map. Enable this for markers whose children handle their own drags in JavaScript (e.g. a PanResponder-based slider), which otherwise race the map's pan/zoom recogniser and can be taken over by the map. By default the marker is smart: taps and native scrollables are kept, but a pan/pinch that merely starts on the marker moves the map. Defaults to false.

@platform android — on iOS the map's gesture recognisers already coexist with marker content, so this has no effect.

defaults to: false

children​

ReactReactElement

required One or more valid React Native views. You can use Pressable, TouchableOpacity, etc. directly as children — onPress and touch feedback work correctly.