MapView.md

<MapboxGL.MapView />

MapView backed by Mapbox Native GL

props

Prop	Type	Default	Required	Description
contentInset	union	none	false	The distance from the edges of the map view’s frame to the edges of the map view’s logical viewport.
projection	enum	'mercator'	false	The projection used when rendering the map
style	any	none	false	Style for wrapping React Native View
styleURL	string	none	false	Style URL for map - notice, if non is set it will default to MapboxGL.StyleURL.Street
styleJSON	string	none	false	StyleJSON for map - according to TileJSON specs: https://github.com/mapbox/tilejson-spec
preferredFramesPerSecond	number	none	false	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.
localizeLabels	bool	false	false	Automatically change the language of the map labels to the system’s preferred language, this is not something that can be toggled on/off
zoomEnabled	bool	none	false	Enable/Disable zoom on the map
scrollEnabled	bool	true	false	Enable/Disable scroll on the map
pitchEnabled	bool	true	false	Enable/Disable pitch on map
rotateEnabled	bool	true	false	Enable/Disable rotation on map
attributionEnabled	bool	true	false	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
attributionPosition	custom	none	false	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
tintColor	union	none	false	MapView's tintColor
logoEnabled	bool	true	false	Enable/Disable the logo on the map.
logoPosition	custom	none	false	Adds logo offset, e.g. {top: 8, left: 8} will put the logo in top-left corner of the map
compassEnabled	bool	false	false	Enable/Disable the compass from appearing on the map
compassFadeWhenNorth	bool	false	false	[mapbox (v10) implementation only] Enable/Disable if the compass should fade out when the map is pointing north
compassPosition	custom	none	false	[mapbox (v10) implementation only] Adds compass offset, e.g. {top: 8, left: 8} will put the compass in top-left corner of the map
compassViewPosition	number	none	false	Change corner of map the compass starts at. 0: TopLeft, 1: TopRight, 2: BottomLeft, 3: BottomRight
compassViewMargins	object	none	false	Add margins to the compass with x and y values
scaleBarEnabled	bool	true	false	[mapbox (v10) implementation only] Enable/Disable the scale bar from appearing on the map
scaleBarPosition	custom	none	false	[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
surfaceView	bool	false	false	[Android only] Enable/Disable use of GLSurfaceView instead of TextureView.
onPress	func	none	false	Map press listener, gets called when a user presses the map
onLongPress	func	none	false	Map long press listener, gets called when a user long presses the map
onRegionWillChange	func	none	false	<v10 only This event is triggered whenever the currently displayed map region is about to change.
onRegionIsChanging	func	none	false	This event is triggered whenever the currently displayed map region is changing.
onRegionDidChange	func	none	false	This event is triggered whenever the currently displayed map region finished changing.
onCameraChanged	func	none	false	iOS, v10 only, deprecated will be removed in next version - please use onRegionIsChanging.
onMapIdle	func	none	false	iOS, v10 only, deprecated will be removed in next version - please use onRegionDidChange
onWillStartLoadingMap	func	none	false	This event is triggered when the map is about to start loading a new map style.
onDidFinishLoadingMap	func	none	false	This is triggered when the map has successfully loaded a new map style.
onDidFailLoadingMap	func	none	false	This event is triggered when the map has failed to load a new map style.
onWillStartRenderingFrame	func	none	false	This event is triggered when the map will start rendering a frame.
onDidFinishRenderingFrame	func	none	false	This event is triggered when the map finished rendering a frame.
onDidFinishRenderingFrameFully	func	none	false	This event is triggered when the map fully finished rendering a frame.
onWillStartRenderingMap	func	none	false	This event is triggered when the map will start rendering the map.
onDidFinishRenderingMap	func	none	false	This event is triggered when the map finished rendering the map.
onDidFinishRenderingMapFully	func	none	false	This event is triggered when the map fully finished rendering the map.
onUserLocationUpdate	func	none	false	This event is triggered when the user location is updated.
onDidFinishLoadingStyle	func	none	false	This event is triggered when a style has finished loading.
regionWillChangeDebounceTime	number	10	false	The emitted frequency of regionwillchange events
regionDidChangeDebounceTime	number	500	false	The emitted frequency of regiondidchange events

methods

getPointInView(coordinate)

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

arguments

Name	Type	Required	Description
coordinate	Array	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	Array	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	Array	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	Array	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'])

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();

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	Array	Yes	the coordinates to query elevation at

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')

showAttribution()

Show the attribution and telemetry action sheet.
If you implement a custom attribution button, you should add this action to the button.

arguments

Name	Type	Required	Description