Map View

Map View is the parent map component and it's used to display the map. All other map-related components are nested within the Map View. There are a variety of configuration properties and related components which you can use to customize the map.

How to use

Imagine you have an REST API Endpoint that returns an array of restaurant objects which include a latitude and longitude key and you want to display a marker on the map for each restaurant. You can pass this array to the Map View’s Marker Data property just like you would for a List component. This lets you display Map Markers for each item in the list. You can further customize the map marker by nesting a Map Marker inside the Map View.

You can further customize the Map View with any of the available Configuration Properties and Data Properties, in addition to running Actions using the available Triggers.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Component Specific Styles

Property	Description
Loading Indicator Color	The color of the loading indicator if Loading Enabled is enabled
Loading BG Color	The color of the loading background if Loading Enabled is enabled
Map Type	To select the type of Map from these options (standard, satellite, hybrid, terrain, none, muted, standard)

Configuration Properties

Property	Description
Component Name	The display name for this component
Provider	By default, the device platform's native map is rendered - Apple Maps on iOS and Google Maps on Android. If you select Google, then Google Maps will be displayed regardless of the device.
Zoom Enabled	If enabled, will allow the user to zoom in/out on the map
Shows Compass	If enabled, will display the map's compass
Shows User Location	If enabled, will display the user's location when the map is rendered
Follows User Location (iOS Only)	If enabled, will update the user's location on the map. iOS only.
Shows Points of Interest	If enabled, will display other public locations on the map.
Initial Zoom	Sets the initial zoom level when the map is first rendered. Accepts a number between 0-20 with 0 being the highest, and 20 the lowest, elevation.
Rotate Enabled	If enabled, will allow the user to rotate the map
Pan Enabled	If enabled, will allow the user to pan the map
Loading Enabled	If enabled, will show a loading indicator while the map is being rendered on the screen
Auto Cluster Markers	If enabled, markers will be automatically grouped into clusters based on distance.
Auto Cluster Distance	If enabled, sets a maximum meter range for marker auto-clustering.

Data Properties

Property	Description
Markers Data	You can pass an Object Array just like a List component in order to render a list of locations on the map using markers
Initial Latitude	The initial latitude coordinate when the map is first rendered
Initial Longitude	The initial longitude coordinate when the map is first rendered
Map Style	You can use a custom JSON to define the Google Map's style (only compatible with 'google' map provider). Style JSON can be created here.

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.

Triggers

Name	Description
On Press	Provides `latitude` and `longitude` arguments
On Region Change	Invoked each time the user moves, zooms, or modifies the region. It works when you stop moving the map and the area changes.