MapViewMapView component

UX Guidelines

Usage ExamplesPressing the MapView opens the navigation apps action sheet, with navigation apps options, based on the installed apps on the device.
If no navigation app is installed, the user will be redirected to the App Store / Google Play. If only one navigation app is installed it will be opened directly, without displaying the action sheet.

Properties

Type	Component
Map + Location + Address
Map + Address
Location + Address
Address

Spec

Dev

UsageCode Example

<MapView
  ref={mapRef}
  location={address}
  mapSettings={{zoom: 15, width: 200, height: 200}}
  openExternally
/>

APIThis is the list of additional props for the component

cacheMapImages

boolean

Whether to cache the map image.

coordinates

Coordinates (lat: number, lng: number;)

Send coordinates to center the map around (will override the location sent)

location

string

The location of the map pointer

mapSettings

MapSettings ({zoom?: number, width?: number, height?: number;})

Object contains the zoom, width and height of the map. Default is {zoom: 14, width: Constants.screenWidth, height: 200}

migrate

boolean

Migrate to the new maps (native + Atlas) implementation

onError

(error?: string) => void

On error handler

onPress

() => void

Press handler

openExternally

boolean

Whether to open location externally on press

options

AtlasMapsOptions ({countryCodes?: String[], signedInstanceType?: SignedInstanceType}})

Extra options (when using migrate -> AtlasLocationService)

renderCustom

() => React.ReactNode

Render custom to replace the Map image but still get the press functionality

renderError

() => React.ReactNode

Render custom error to replace the Map's error state

useStaticMaps

boolean

Whether to use static maps (images) instead of native maps.