MapView.md

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

MapView

MapView backed by Mapbox Native GL

props

contentInset

number | number[]

The distance from the edges of the map view’s frame to the edges of the map view’s logical viewport. @deprecated use Camera padding instead

projection

'mercator' | 'globe'

The projection used when rendering the map

Globe Projection

styleURL

string

Style URL for map - notice, if non is set it will default to Mapbox.StyleURL.Street

styleJSON

string

StyleJSON for map - according to TileJSON specs: https://github.com/mapbox/tilejson-spec

preferredFramesPerSecond

number

iOS: The preferred frame rate at which the map view is rendered. The default value for this property is MGLMapViewPreferredFramesPerSecondDefault, which will adaptively set the preferred frame rate based on the capability of the user’s device to maintain a smooth experience. This property can be set to arbitrary integer values.

Android: The maximum frame rate at which the map view is rendered, but it can't exceed the ability of device hardware. This property can be set to arbitrary integer values.

zoomEnabled

boolean

Enable/Disable zoom on the map

scrollEnabled

boolean

Enable/Disable scroll on the map

defaults to: true

pitchEnabled

boolean

Enable/Disable pitch on map

defaults to: true

rotateEnabled

boolean

Enable/Disable rotation on map

defaults to: true

attributionEnabled

boolean

The Mapbox terms of service, which governs the use of Mapbox-hosted vector tiles and styles, requires these copyright notices to accompany any map that features Mapbox-designed styles, OpenStreetMap data, or other Mapbox data such as satellite or terrain data. If that applies to this map view, do not hide this view or remove any notices from it.

You are additionally required to provide users with the option to disable anonymous usage and location sharing (telemetry). If this view is hidden, you must implement this setting elsewhere in your app. See our website for Android and iOS for implementation details.

Enable/Disable attribution on map. For iOS you need to add MGLMapboxMetricsEnabledSettingShownInApp=YES to your Info.plist

defaults to: true Ornaments

attributionPosition

OrnamentPositonProp

Adds attribution offset, e.g. {top: 8, left: 8} will put attribution button in top-left corner of the map. By default on Android, the attribution with information icon (i) will be on the bottom left, while on iOS the mapbox logo will be on bottom left with information icon (i) on bottom right. Read more about mapbox attribution here

Ornaments

tintColor

string | number[]

MapView's tintColor

Set Tint Color

logoEnabled

boolean

Enable/Disable the logo on the map.

defaults to: true Ornaments

logoPosition

OrnamentPositonProp

Adds logo offset, e.g. {top: 8, left: 8} will put the logo in top-left corner of the map

Ornaments

compassEnabled

boolean

Enable/Disable the compass from appearing on the map

defaults to: false Ornaments

compassFadeWhenNorth

boolean

[mapbox (v10) implementation only] Enable/Disable if the compass should fade out when the map is pointing north

defaults to: false Ornaments

compassPosition

OrnamentPositonProp

[mapbox (v10) implementation only] Adds compass offset, e.g. {top: 8, left: 8} will put the compass in top-left corner of the map

Ornaments

compassViewPosition

number

Change corner of map the compass starts at. 0: TopLeft, 1: TopRight, 2: BottomLeft, 3: BottomRight

compassViewMargins

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

Add margins to the compass with x and y values

compassImage

string

[iOS, mapbox (v10) implementation only] A string referencing an image key. Requires an Images component.

Ornaments

scaleBarEnabled

boolean

[mapbox (v10) implementation only] Enable/Disable the scale bar from appearing on the map

defaults to: true Ornaments

scaleBarPosition

OrnamentPositonProp

[mapbox (v10) implementation only] Adds scale bar offset, e.g. {top: 8, left: 8} will put the scale bar in top-left corner of the map

Ornaments

surfaceView

boolean

[Android only] Enable/Disable use of GLSurfaceView instead of TextureView.

defaults to: RNMBXModule.MapboxV10 ? true : false

requestDisallowInterceptTouchEvent

boolean

[Android only] Experimental, call requestDisallowInterceptTouchEvent on parent with onTochEvent, this allows touch interaction to work when embedded into a scroll view

defaults to: false

localizeLabels

| {
    /** locale code like `es` or `current` for the device's current locale */
    locale: string;
    /** layer id to localize. If not specified, all layers will be localized */
    layerIds?: string[];
  }
| true

[mapbox (v10) implementation only] Set map's label locale, e.g. { "locale": "es" } will localize labels to Spanish, { "locale": "current" } will localize labels to system locale.

Localize Labels

gestureSettings

type GestureSettings = {
  doubleTapToZoomInEnabled: boolean; /* Whether double tapping the map with one touch results in a zoom-in animation. */
  doubleTouchToZoomOutEnabled: boolean; /* Whether single tapping the map with two touches results in a zoom-out animation. */
  pinchPanEnabled: boolean; /* Whether pan/scroll is enabled for the pinch gesture. */
  pinchZoomEnabled: boolean; /* Whether zoom is enabled for the pinch gesture. */
  pinchZoomDecelerationEnabled: boolean; /* Whether a deceleration animation following a pinch-zoom gesture is enabled. True by default.
(Android only) */
  pitchEnabled: boolean; /* Whether the pitch gesture is enabled. */
  quickZoomEnabled: boolean; /* Whether the quick zoom gesture is enabled. */
  rotateEnabled: boolean; /* Whether the rotate gesture is enabled. */
  rotateDecelerationEnabled: boolean; /* Whether a deceleration animation following a rotate gesture is enabled. True by default.
(Android only) */
  panEnabled: boolean; /* Whether the single-touch pan/scroll gesture is enabled. */
  panDecelerationFactor: number; /* A constant factor that determines how quickly pan deceleration animations happen. Multiplied with the velocity vector once per millisecond during deceleration animations.

On iOS Defaults to UIScrollView.DecelerationRate.normal.rawValue
On android set to 0 to disable deceleration, and non zero to enabled it. */
  simultaneousRotateAndPinchZoomEnabled: boolean; /* Whether rotation is enabled for the pinch zoom gesture. */
  zoomAnimationAmount: number; /* The amount by which the zoom level increases or decreases during a double-tap-to-zoom-in or double-touch-to-zoom-out gesture. 1.0 by default. Must be positive.
(Android only) */
}

Gesture configuration allows to control the user touch interaction.

onPress

func

Map press listener, gets called when a user presses the map signature:(feature:GeoJSON.Feature) => void

Show Click

onLongPress

func

Map long press listener, gets called when a user long presses the map signature:(feature:GeoJSON.Feature) => void

onRegionWillChange

func

<v10 only

This event is triggered whenever the currently displayed map region is about to change.

• feature: PointFeature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds signature:(feature:GeoJSON.Feature) => void

Show Region Did Change

onRegionIsChanging

func

This event is triggered whenever the currently displayed map region is changing.

• feature: PointFeature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds signature:(feature:GeoJSON.Feature) => void

Show Region Did Change

onRegionDidChange

func

This event is triggered whenever the currently displayed map region finished changing.

• feature: PointFeature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds signature:(feature:GeoJSON.Feature) => void

Show Region Did Change

onCameraChanged

func

v10 only, replaces onRegionIsChanging signature:(state:{properties: {center: GeoJSON.Position, bounds: {ne: GeoJSON.Position, sw: GeoJSON.Position}, zoom: number, heading: number, pitch: number}, gestures: {isGestureActive: boolean}, timestamp: number}) => void

onMapIdle

func

v10 only, replaces onRegionDidChange signature:(state:{properties: {center: GeoJSON.Position, bounds: {ne: GeoJSON.Position, sw: GeoJSON.Position}, zoom: number, heading: number, pitch: number}, gestures: {isGestureActive: boolean}, timestamp: number}) => void

Map Handlers

onWillStartLoadingMap

func

This event is triggered when the map is about to start loading a new map style. signature:() => void

onDidFinishLoadingMap

func

This is triggered when the map has successfully loaded a new map style. signature:() => void

onDidFailLoadingMap

func

This event is triggered when the map has failed to load a new map style. On v10 it's deprecated and replaced by onMapLoadingError DEPRECATED use onMapLoadingError signature:() => void

onMapLoadingError

func

This event is tiggered when there is an error during map load. V10 only, replaces onDidFailLoadingMap, might be called multiple times and not exclusive with onDidFinishLoadingMap. signature:() => void

onWillStartRenderingFrame

func

This event is triggered when the map will start rendering a frame. signature:() => void

onDidFinishRenderingFrame

func

This event is triggered when the map finished rendering a frame. signature:() => void

onDidFinishRenderingFrameFully

func

This event is triggered when the map fully finished rendering a frame. signature:() => void

onWillStartRenderingMap

func

This event is triggered when the map will start rendering the map. signature:() => void

onDidFinishRenderingMap

func

This event is triggered when the map finished rendering the map. signature:() => void

onDidFinishRenderingMapFully

func

This event is triggered when the map fully finished rendering the map. signature:() => void

onUserLocationUpdate

func

This event is triggered when the user location is updated. signature:(feature:Location) => void

onDidFinishLoadingStyle

func

This event is triggered when a style has finished loading. signature:() => void

regionWillChangeDebounceTime

number

The emitted frequency of regionwillchange events

defaults to: 10

regionDidChangeDebounceTime

number

The emitted frequency of regiondidchange events

defaults to: 500

deselectAnnotationOnTap

boolean

Set to true to deselect any selected annotation when the map is tapped. If set to true you will not receive the onPress event for the taps that deselect the annotation. Default is false.

Show Point Annotations

methods

getPointInView(coordinate)

Converts a geographic coordinate to a point in the given view’s coordinate system.

arguments

Name	Type	Required	Description
coordinate	Position	Yes	A point expressed in the map view's coordinate system.

const pointInView = await this._map.getPointInView([-37.817070, 144.949901]);

getCoordinateFromView(point)

Converts a point in the given view’s coordinate system to a geographic coordinate.

arguments

Name	Type	Required	Description
point	Position	Yes	A point expressed in the given view’s coordinate system.

const coordinate = await this._map.getCoordinateFromView([100, 100]);

getVisibleBounds()

The coordinate bounds (ne, sw) visible in the user’s viewport.

arguments

Name	Type	Required	Description

const visibleBounds = await this._map.getVisibleBounds();

queryRenderedFeaturesAtPoint(coordinate[, filter][, layerIDs])

Returns an array of rendered map features that intersect with a given point.

arguments

Name	Type	Required	Description
coordinate	Position	Yes	A point expressed in the map view’s coordinate system.
filter	Array	No	A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
layerIDs	Array	No	A array of layer id's to filter the features by

this._map.queryRenderedFeaturesAtPoint([30, 40], ['==', 'type', 'Point'], ['id1', 'id2'])

queryRenderedFeaturesInRect(bbox[, filter][, layerIDs])

Returns an array of rendered map features that intersect with the given rectangle,
restricted to the given style layers and filtered by the given predicate. In v10,
passing an empty array will query the entire visible bounds of the map.

arguments

Name	Type	Required	Description
bbox	BBox | []	Yes	A rectangle expressed in the map view’s coordinate system. For v10, this can be an empty array to query the visible map area.
filter	Array	No	A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
layerIDs	Array	No	A array of layer id's to filter the features by

this._map.queryRenderedFeaturesInRect([30, 40, 20, 10], ['==', 'type', 'Point'], ['id1', 'id2'])

querySourceFeatures(sourceId[, filter][, sourceLayerIDs])

Returns an array of GeoJSON Feature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.

arguments

Name	Type	Required	Description
sourceId	string	Yes	Style source identifier used to query for source features.
filter	Array	No	A filter to limit query results.
sourceLayerIDs	Array	No	The name of the source layers to query. For vector tile sources, this parameter is required. For GeoJSON sources, it is ignored.

this._map.querySourceFeatures('your-source-id', [], ['your-source-layer'])

setCamera()

Map camera will perform updates based on provided config. Deprecated use Camera#setCamera.

arguments

Name	Type	Required	Description

takeSnap([writeToDisk])

Takes snapshot of map with current tiles and returns a URI to the image

arguments

Name	Type	Required	Description
writeToDisk	Boolean	No	If true will create a temp file, otherwise it is in base64

getZoom()

Returns the current zoom of the map view.

arguments

Name	Type	Required	Description

const zoom = await this._map.getZoom();

getCenter()

Returns the map's geographical centerpoint

arguments

Name	Type	Required	Description

const center = await this._map.getCenter();

clearData()

Clears temporary map data from the data path defined in the given resource
options. Useful to reduce the disk usage or in case the disk cache contains
invalid data.

v10 only

arguments

Name	Type	Required	Description

queryTerrainElevation(coordinate)

Queries the currently loaded data for elevation at a geographical location.
The elevation is returned in meters relative to mean sea-level.
Returns null if terrain is disabled or if terrain data for the location hasn't been loaded yet.

arguments

Name	Type	Required	Description
coordinate	Position	Yes	the coordinates to query elevation at

Query Terrain Elevation### setSourceVisibility(visible, sourceId[, sourceLayerId])

Sets the visibility of all the layers referencing the specified sourceLayerId and/or sourceId

arguments

Name	Type	Required	Description
visible	boolean	Yes	Visibility of the layers
sourceId	string	Yes	Identifier of the target source (e.g. 'composite')
sourceLayerId	String	No	Identifier of the target source-layer (e.g. 'building')

await this._map.setSourceVisibility(false, 'composite', 'building')