Map

The Map component displays address data as an interactive map on your app.

General settings

You can customize your map using the settings available in the General, Options, and Actions tabs that appear when you select the map from the Screens panel in the Layout Editor.

Data

In the Source field, select the table that contains the addresses you want to display in the map component. You can also provide a name in the Title field that will be shown.

Items data

1. In the General tab, locate the Items Data section.
2. Use the menu in the Title, Description, Address, and Image fields to select the value from your data to display. You can also type directly into these fields to enter a Custom Value.

A pin is placed on the map at the address specified. The Title, Description, Image, and Address fields all appear in the tooltip that displays when you click on a pin.

Design

1. In the General tab, locate Design.
2. Choose the Aspect Ratio - Square, 4:3, or 16:9 - to resize the map.
3. Choose the Style - Minimal, Standard, or Satellite - to change the appearance of the map.
4. Choose the Tooltip - Bottom or Floating - to show the details of each location when a pin is clicked.
5. Select Show Navigation Controls to display buttons that allow users to change the zoom level of the map.
6. Select Allow zoom with scroll-wheel to give desktop users the ability to change the zoom level with their mouse.

Limiting the number of pins on a map

If you only want to show a certain number of pins on your map, you can select the option to limit the number of items. Once this is set, the map will only display the number of pins you enter here, starting at the first available row in your data source.

Actions

You can trigger actions in two areas of the map component - the Title Bar action and the Item Click action.

Title bar action

1. In the Actions tab, locate the Title Bar Action section.
2. Click the Add primary action button.
3. Select and configure the desired action.

You can add as many actions as you'd like. Additional actions will be displayed as a secondary button or in the dropdown section of the title bar.

Item click action

1. In the Actions tab, locate the Item Click Action section.
2. The Show Detail Screen action is added by default, but you can change this to any other action you choose.