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. |
style | any |
none |
false |
Style for wrapping React Native View |
styleURL | string |
MapboxGL.StyleURL.Street |
false |
Style URL for map |
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 | 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 | union |
none |
false |
Adds attribution offset, e.g. {top: 8, left: 8} will put attribution button in top-left corner of the map |
logoEnabled | bool |
true |
false |
Enable/Disable the logo on the map. |
compassEnabled | bool |
none |
false |
Enable/Disable the compass from appearing on the map |
compassViewPosition | string |
none |
false |
Position the compass on a corner of the map |
compassViewMargins | object |
none |
false |
Add margins to the compass with x and y values |
surfaceView | bool |
false |
false |
[Android only] Enable/Disable use of GLSurfaceView insted 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 |
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 |
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 |
Converts a geographic coordinate to a point in the given view’s coordinate system.
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]);
Converts a point in the given view’s coordinate system to a geographic coordinate.
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]);
The coordinate bounds(ne, sw) visible in the users’s viewport.
Name | Type | Required | Description |
---|
const visibleBounds = await this._map.getVisibleBounds();
Returns an array of rendered map features that intersect with a given point.
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'])
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.
Name | Type | Required | Description |
---|---|---|---|
bbox |
Array |
Yes |
A rectangle 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.queryRenderedFeaturesInRect([30, 40, 20, 10], ['==', 'type', 'Point'], ['id1', 'id2'])
Map camera will perform updates based on provided config. Deprecated use Camera#setCamera.
Name | Type | Required | Description |
---|
Takes snapshot of map with current tiles and returns a URI to the image
Name | Type | Required | Description |
---|---|---|---|
writeToDisk |
Boolean |
Yes |
If true will create a temp file, otherwise it is in base64 |
Returns the current zoom of the map view.
Name | Type | Required | Description |
---|
const zoom = await this._map.getZoom();
Returns the map's geographical centerpoint
Name | Type | Required | Description |
---|
const center = await this._map.getCenter();
Show the attribution and telemetry action sheet.
If you implement a custom attribution button, you should add this action to the button.
Name | Type | Required | Description |
---|