The Map of a Data Source Screen Type is one of our data perusal screens. This data-driven screen type allows you to visualize a dataset with GPS coordinates on a map. This article outlines how to set up and configure a mapping screen properly.
Mapping Screen
To do this, follow the instructions below:
- Go to the Screens page and click the Add New + button.
- Choose “Map of Data Points” from the Screen Type list.
- Select a name for your Screen.
- Select the target Data Source to display as pins on your map.
This Data Source must contain a column with location coordinates in space-separated decimal degrees (latitude, longitude) format.
e.g., New York City is: 40.7142700 -74.0059700 - Click Create + to create your Mapping screen. This will take you to the Designer screen as shown in the screenshot below:
In the designer, click on the “Pin Co-ordinates” property and ensure you select the column in your data source that contains the GPS coordinates in (latitude, longitude) format, as shown in the screenshot above.
You can also configure other options, like the pin’s popup text, as desired, then click the Save button to save your changes. Use the Test button to test your changes on the native app, and when everything is working as expected, use Publish to make your new Mapping screen available to your users.
Configuring the Title Bar
| Property | Description |
|---|---|
| Data source | a selection of connected data sources within your app to relate your configuration |
| Screen Title | This will be populated with the name of your screen |
| Map Type | Standard, satellite, and hybrid are the options, with hybrid being a combination of the previous two. |
| Show User’s Location on Map (Check Box) | If users’ GPS coordinates are available, create a pin on the map for them when the check box is selected. |
| Action Buttons | Define buttons that appear on the title bar. Select which button to configure: LEFT, RIGHT1, or RIGHT2. Configurable options are icon, text, color, user interaction, and visibility. |
| Button Visibility | Control the visibility using a formula. |
Properties
Basic Properties
| Property | Description |
|---|---|
| Show Search Box (Check Box) | If the check box is selected, it displays the search box on the screen to be interacted with. |
| Allow User to Filter by Column (Check Box) | If the check box is selected, the screen user can create and apply filter rules for search results. |
| Users Filters Override Default (Check Box) | If the checkbox is ticked, user filters will override any default filters set. I.e., filter all data and not just the subset of data after default filtering. |
| Left Text | Static text and dynamic values related to the data source can be entered here. Color, font, and text size can also be adjusted. |
| Left Icon | The icon image displayed for this detailed line. Can’t be set to no icon. |
| Right Text/Button | If the checkbox is ticked, user filters override any default filter set. I.e., filter all data and not just the subset of data after default filtering. |
Validation & Behaviour
| Property | Description |
|---|---|
| Search Pattern | By default, searching will filter rows based on the user’s search text matching anywhere within the displayable row values. This option allows you to specify a replacement regular expression for row matching. Use {{this}} to refer to the user search text in your regular expression. e.g., ‘{{this}}’ will show rows that start with the search text. |
| Default Filter | This allows you to specify the default filter formula for this screen. Any incoming filters will override any default filter specified. e.g. {{this[0]}} = ORGMETA(‘projectId’) |