Map View
There's 3 related map components: Map View, Map Marker, and Map Callout. We'll go over each of them and their purpose below.
Map View
Map View is the parent map component and it's used to display the map. There are a variety of configuration properties which you can use to customize the map.
Configuration
| 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 |
| 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 |
| 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 |
| Map Type | To select the type of Map from these options (standard, satellite, hybrid, terrain, none, mutedstandard) |
| 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
| 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. |
Triggers
| Property | 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. |
Updated 4 months ago