```tsx import { MapView } from '@rnmapbox/maps'; MapView ``` MapView backed by Mapbox Native GL ## props ### contentInset ```tsx 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 ```tsx 'mercator' | 'globe' ``` The projection used when rendering the map [Globe Projection](../examples/V10/GlobeProjection) ### styleURL ```tsx string ``` Style URL for map - notice, if non is set it _will_ default to `Mapbox.StyleURL.Street` ### styleJSON ```tsx string ``` StyleJSON for map - according to TileJSON specs: https://github.com/mapbox/tilejson-spec ### preferredFramesPerSecond ```tsx 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 ```tsx boolean ``` Enable/Disable zoom on the map ### scrollEnabled ```tsx boolean ``` Enable/Disable scroll on the map _defaults to:_ `true` ### pitchEnabled ```tsx boolean ``` Enable/Disable pitch on map _defaults to:_ `true` ### maxPitch ```tsx number ``` Maximum allowed pitch in degrees. Mirrors the Mapbox map option `maxPitch`. ### rotateEnabled ```tsx boolean ``` Enable/Disable rotation on map _defaults to:_ `true` ### attributionEnabled ```tsx boolean ``` The Mapbox terms of service, which governs the use of Mapbox-hosted vector tiles and styles, [requires](https://www.mapbox.com/help/how-attribution-works/) 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](https://www.mapbox.com/help/how-mobile-apps-work/#telemetry) 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](https://www.mapbox.com/android-docs/map-sdk/overview/#telemetry-opt-out) and [iOS](https://www.mapbox.com/ios-sdk/#telemetry_opt_out) for implementation details. Enable/Disable attribution on map. For iOS you need to add MGLMapboxMetricsEnabledSettingShownInApp=YES to your Info.plist _defaults to:_ `true` [Ornaments](../examples/Map/Ornaments) ### attributionPosition ```tsx 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](https://docs.mapbox.com/help/getting-started/attribution/) [Ornaments](../examples/Map/Ornaments) ### tintColor ```tsx string | number[] ``` MapView's tintColor [Set Tint Color](../examples/UserLocation/SetTintColor) ### logoEnabled ```tsx boolean ``` Enable/Disable the logo on the map. _defaults to:_ `true` [Ornaments](../examples/Map/Ornaments) ### logoPosition ```tsx OrnamentPositonProp ``` Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map [Ornaments](../examples/Map/Ornaments) ### compassEnabled ```tsx boolean ``` Enable/Disable the compass from appearing on the map _defaults to:_ `false` [Ornaments](../examples/Map/Ornaments) ### compassFadeWhenNorth ```tsx boolean ``` [`mapbox` (v10) implementation only] Enable/Disable if the compass should fade out when the map is pointing north _defaults to:_ `false` [Ornaments](../examples/Map/Ornaments) ### compassPosition ```tsx 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](../examples/Map/Ornaments) ### compassViewPosition ```tsx number ``` Change corner of map the compass starts at. 0: TopLeft, 1: TopRight, 2: BottomLeft, 3: BottomRight ### compassViewMargins ```tsx 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 ```tsx string ``` [iOS, `mapbox` (v10) implementation only] A string referencing an image key. Requires an `Images` component. [Ornaments](../examples/Map/Ornaments) ### scaleBarEnabled ```tsx boolean ``` [`mapbox` (v10) implementation only] Enable/Disable the scale bar from appearing on the map _defaults to:_ `true` [Ornaments](../examples/Map/Ornaments) ### scaleBarPosition ```tsx 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](../examples/Map/Ornaments) ### scaleBarUnits ```tsx 'metric' | 'imperial' | 'nautical' ``` Set the scale bar distance units. Defaults to metric. ### surfaceView ```tsx boolean ``` [Android only] Enable/Disable use of GLSurfaceView instead of TextureView. _defaults to:_ `true` ### requestDisallowInterceptTouchEvent ```tsx 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 ```tsx | { /** 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](../examples/Map/LocalizeLabels) ### gestureSettings ```tsx 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 ```tsx func ``` Map press listener, called when a user presses the map. *signature:*`(feature:GeoJSON.Feature) => void` [Screen Coordinates](../examples/Map/ScreenCoordinates), [Show Click](../examples/Map/ShowClick) ### onLongPress ```tsx func ``` Map long press listener, called when a user long presses the map. *signature:*`(feature:GeoJSON.Feature) => void` [Screen Coordinates](../examples/Map/ScreenCoordinates) ### onRegionWillChange ```tsx 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](../examples/Map/ShowRegionDidChange) ### onRegionIsChanging ```tsx 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](../examples/Map/ShowRegionDidChange) ### onRegionDidChange ```tsx 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](../examples/Map/ShowRegionDidChange) ### onCameraChanged ```tsx 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 ```tsx 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](../examples/V10/MapHandlers) ### onWillStartLoadingMap ```tsx func ``` This event is triggered when the map is about to start loading a new map style. *signature:*`() => void` ### onDidFinishLoadingMap ```tsx func ``` This is triggered when the map has successfully loaded a new map style. *signature:*`() => void` ### onDidFailLoadingMap ```tsx 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 ```tsx 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 ```tsx func ``` This event is triggered when the map will start rendering a frame. *signature:*`() => void` ### onDidFinishRenderingFrame ```tsx func ``` This event is triggered when the map finished rendering a frame. *signature:*`() => void` ### onDidFinishRenderingFrameFully ```tsx func ``` This event is triggered when the map fully finished rendering a frame. *signature:*`() => void` ### onWillStartRenderingMap ```tsx func ``` This event is triggered when the map will start rendering the map. *signature:*`() => void` ### onDidFinishRenderingMap ```tsx func ``` This event is triggered when the map finished rendering the map. *signature:*`() => void` ### onDidFinishRenderingMapFully ```tsx func ``` This event is triggered when the map fully finished rendering the map. *signature:*`() => void` ### onUserLocationUpdate ```tsx func ``` This event is triggered when the user location is updated. *signature:*`(feature:Location) => void` ### onDidFinishLoadingStyle ```tsx func ``` This event is triggered when a style has finished loading. *signature:*`() => void` ### regionWillChangeDebounceTime ```tsx number ``` The emitted frequency of regionwillchange events _defaults to:_ `10` ### regionDidChangeDebounceTime ```tsx number ``` The emitted frequency of regiondidchange events _defaults to:_ `500` ### deselectAnnotationOnTap ```tsx 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](../examples/Annotations/ShowPointAnnotation) ## methods ### getPointInView(coordinate) Converts a geographic coordinate to a screen coordinate relative to the map view. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | | `coordinate` | `Position` | `Yes` | A point expressed in the map view's coordinate system `[longitude, latitude]`. | ```javascript const longitude = 144.949901; const latitude = -37.817070; const [x, y] = await this._map.getPointInView([longitude, latitude]); ``` [Screen Coordinates](../examples/Map/ScreenCoordinates)### getCoordinateFromView(point) Converts a screen coordinate relative to the map view to a geographic coordinate. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | | `point` | `Position` | `Yes` | A point expressed in screen coordinates relative to the map view `[x, y]`. | ```javascript const x = 100; const y = 100; const [longitude, latitude] = await this._map.getCoordinateFromView([x, y]); ``` [Screen Coordinates](../examples/Map/ScreenCoordinates)### getVisibleBounds() The coordinate bounds of the map viewport. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | ```javascript const [[rightLon, topLat], [leftLon, bottomLat]] = 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 `[x, y]`; | | `filter` | `FilterExpression \| tuple` | `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 IDs by which to filter the features. | ```javascript const x = 30; const y = 40; this._map.queryRenderedFeaturesAtPoint([x, y], ['==', 'type', 'Point'], ['id1', 'id2']) ``` [Screen Coordinates](../examples/Map/ScreenCoordinates)### 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 density-independent screen coordinates relative to the map view `[top, left, bottom, right]` or `[minY, minX, maxY, maxX]` (not geographic coordinates). An empty array queries the visible map area. | | `filter` | `FilterExpression` | `No` | An array 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 IDs by which to filter the features. | ```javascript const left = 40; const top = 30; const right = 10; const bottom = 20; this._map.queryRenderedFeaturesInRect([top, left, bottom, right], ['==', 'type', 'Point'], ['id1', 'id2']) ``` [Screen Coordinates](../examples/Map/ScreenCoordinates)### 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` | `FilterExpression \| tuple` | `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. | ```javascript 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 Base64-encoded PNG image,
or an file-system URI to a temporary PNG file if `writeToDisk` is `true`. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | | `writeToDisk` | `boolean` | `No` | If `true`, creates a temporary PNG file and returns a file-system URI, otherwise returns a Base64-encoded PNG image. (Defaults to `false`) | ### getZoom() Returns the current zoom of the map view. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | ```javascript const zoom = await this._map.getZoom(); ``` ### getCenter() Returns the map's center point expressed as geographic coordinates `[longitude, latitude]`. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | ```javascript 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 geographic coordinates `[longitude, latitude]` at which to query elevation. | [Query Terrain Elevation](../examples/V10/QueryTerrainElevation)### 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` | Target source identifier (e.g. 'composite') | | `sourceLayerId` | `string` | `No` | Target source-layer identifier (e.g. 'building'). If `null`, the change affects all layers in the target source. | ```javascript await this._map.setSourceVisibility(false, 'composite', 'building') ``` ### setFeatureState(featureId, state, sourceId[, sourceLayerId]) Updates the state map of a feature within a style source.

Updates entries in the state map of a given feature within a style source.
Only entries listed in the `state` will be updated.
An entry in the feature state map that is not listed in `state` will retain its previous value. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | | `featureId` | `string` | `Yes` | Identifier of the feature whose state should be updated. | | `state` | `{[k:string]:NativeArg}` | `Yes` | undefined | | `sourceId` | `string` | `Yes` | undefined | | `sourceLayerId` | `n/a` | `No` | undefined | [Feature State](../examples/V10/FeatureState)### getFeatureState(featureId, sourceId[, sourceLayerId]) Returns the state map of a feature within a style source. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | | `featureId` | `string` | `Yes` | Identifier of the feature whose state should be queried. | | `sourceId` | `string` | `Yes` | Style source identifier. | | `sourceLayerId` | `string` | `No` | Style source layer identifier (for multi-layer sources such as vector sources). | [Feature State](../examples/V10/FeatureState)### removeFeatureState(featureId, stateKey, sourceId[, sourceLayerId]) Removes entries from a feature state object.

Removes a specified property or all properties from a feature’s state object,
depending on the value of `stateKey`. #### arguments | Name | Type | Required | Description | | ---- | :--: | :------: | :----------: | | `featureId` | `string` | `Yes` | Identifier of the feature whose state should be removed. | | `stateKey` | `string \| null` | `Yes` | The name of the property to remove. If `null`, all feature’s state object properties are removed. | | `sourceId` | `string` | `Yes` | Style source identifier. | | `sourceLayerId` | `string` | `No` | Style source layer identifier (for multi-layer sources such as vector sources). | [Feature State](../examples/V10/FeatureState)