MapView

¶

MapView backed by Vietmap GL Native¶

Props¶

Prop	Type	Default	Required	Description
contentInset	`number[] \| number`	`none`	`false`	The distance from the edges of the map view’s frame to the edges of the map view’s logical viewport.
style	`ViewProps['style']`	`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 `VietmapGL.StyleURL.Default`
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 excess the ability of device hardware. This property can be set to arbitrary integer values.
localizeLabels	`boolean`	`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	`boolean`	`none`	`false`	Enable/Disable zoom on the map
scrollEnabled	`boolean`	`true`	`false`	Enable/Disable scroll on the map
pitchEnabled	`boolean`	`true`	`false`	Enable/Disable pitch on map
rotateEnabled	`boolean`	`true`	`false`	Enable/Disable rotation on map
attributionPosition	`object`	`{ top?: number; left?: number; } \| { top?: number; right?: number; } \| { bottom?: number; left?: number; } \| { bottom?: number; right?: umber; }`	`none`	`false`
tintColor	`string \| unknown[]`	`none`	`false`	MapView's tintColor
logoEnabled	`boolean`	`true`	`false`	Enable/Disable the logo on the map.
logoPosition	`\| { top?: number; left?: number; }\| { top?: number; right?: number; }\| { bottom?: number; left?: number; }\| { bottom?: number; right?: number; }`	`none`	`false`	Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map
compassEnabled	`boolean`	`none`	`false`	Enable/Disable the compass from appearing on 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
surfaceView	`boolean`	`false`	`false`	[Android only] Enable/Disable use of GLSurfaceView insted of TextureView.
onUserLocationUpdate	`func`	`none`	`false`	This event is triggered when the user location is updated. signature:`(location:Location) => void`
regionWillChangeDebounceTime	`number`	`10`	`false`	The emitted frequency of regionwillchange events
regionDidChangeDebounceTime	`number`	`500`	`false`	The emitted frequency of regiondidchange events
children	`ReactNode`	`none`	`true`

Methods¶

GetPointInView(coordinate)¶

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

Arguments

Name	Type	Required	Description
`coordinate`	`GeoJSON.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`	`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 users’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`	`GeoJSON.Position`	`Yes`	A point expressed in the map view’s coordinate system.
`filter`	`FilterExpression`	`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.

Arguments

Name	Type	Required	Description
`bbox`	`GeoJSON.BBox`	`Yes`	A rectangle expressed in the map view’s coordinate system.
`filter`	`FilterExpression`	`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();

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