Knowledgebase

Showing Data Source Rows on a Map (Mapping Screens)


The Mapping screen type provides the ability to display Data Source rows as map pins on a full-screen map in your apps. 

 

We’ve added customisation options such as control over pin colours, callout display and user interactions to enable dynamic scenarios when the user selects a map pin.

 

Smart clustering of data points means that the Mapping screen can handle the display of thousands of pins while remaining responsive and engaging to your users.


You can specify a default formula filter to apply to the Data Source rows displayed in a Mapping screen.  This is helpful in displaying just a subset of the Data Source rows - e.g. all rows within a certain state or city.

Options are also provided to allow the user to specify their own custom filters on top of this.

By default, the auto-complete search in these Screens will filter rows based on the user’s search text matching anywhere within the displayed row values. Our "Search Pattern" option allows you to you specify a custom regular expression to replace the default matching behaviour.

 

Displaying your data in a map adds another level of flexibility and productivity to your clients’ apps, as users can visualise their data in a geographic way.

 

 

Getting Started

 

To create a new Mapping screen in the secure website:

  1. Go to the Screens page and click the Add New button

  2. Choose "Map a Data Source" from the Screen Type list, and then select a name for your Screen.

  3. Select the target Data Source to display as pins on your map.
    This Data Source must contain a column with location co-ordinates in space-separated decimal degrees (latitude longitude).
    e.g. New York City is: 40.7142700 -74.0059700

  4. Click the Create button to create your new Mapping screen.
    This will take you to the Mapping Screen designer.

  5. In the designer, click on the pin in the preview area - this will display the pin properties available to configure.
    Make sure that the "Pin Co-ordinates" property is correctly set to your location column.

  6. 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 all is working as expected use Publish to make your new Mapping screen available to your users :)

 

 

Common Questions About Mapping Screens

 

 

How can I control the colour of the location pins in a Mapping screen? 

 

If you wish to apply conditional colouring to map pins, you must set up Conditional Display Rules on your Data Source.

1. Go to the Data Source -> Rows page.

2. There is a little "cog" icon in each column header on the Rows page - click this icon on the desired column to show the Column Settings dialog.

3. You can then add Conditional Display Rules to control the styling of row data.

Click the question mark icons to see detailed hints and information on how to create a rule formula.

 

 

What co-ordinate format must I use for row values in the Pin data source column?

 

The column must contain the location co-ordinates in space-separated decimal degrees (latitude longitude).

e.g. New York City is: 40.7142700 -74.0059700

 

 

If I have two entries with the exact same geo coordinates, how can I access the popup details of each pin?

 

In the app, a pin will show with a number on it if there are multiple rows at the exact same location.

Simply tap the pin to "cycle" through each row at that co-ordinate.  Tapping will also display the popup details for that specific row.



What is the "Cluster Icon Style" property for?


If your Data Source contains a lot of rows within a specific area of the map, then the app will automatically cluster pins at various zoom levels for performance purposes.  This enables a smooth map experience for the user.

As the user zooms down into a specific area, the clusters will progressively break up into individual pins.

The Cluster Icon Style option in the Mapping designer allows you to specify the colour of these cluster icons.

 

 

 

 

 

  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

Advanced Column Settings for Data Sources

Aside from simply specifying the data type and position of a Data Source column, we provide...

Chain Screen Types to Produce Deeper User Experiences

Make your apps more distinctive by taking advantage of our various screen types: Forms -...

Replacing / Emulating Default App Screens

The apps you build will have a set of standard/default Screens included by default. These being:...

User Defined Filters on Enquiry Screens

If you have large Data Sources or require more advanced options for data enquiry, then you...

Custom Icons

We provide icon customisation areas that allow you to choose from a few built-in icon sets as...