A Premium feature that’s available on Android and iOS devices.

Add custom may overlays from your geographic information system (GIS) to provide additional location information to your users.

The layer data must be provided in GeoJSON format and can be used in Mapping Screens and in Location, Media, and Gallery fields.

Best Practice: Large GeoJSON data will limit performance. Lower resolution data (containing fewer coordinates) will be more performant if you experience layer rendering issues.

Example

When a screen is launched, and an Overlay with Geo Data is detected, the app will acquire the data and display the layer.

Below is a sample GeoJSON body containing coordinates for the perimeter of Central Park, New York, USA. 

To test, copy the sample GeoJSON body into the Overlay with Geo Data (GeoJSON) property on a Mapping screen or Location, Media, or Gallery field.

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "stroke": "#000000",
                "stroke-opacity": 1,
                "stroke-width": 2,
                "fill": "#000000",
                "fill-opacity": 0.5
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        -2.3828485470936887,
                        51.61715145290631
                    ],
                    [
                        -2.2053353653881436,
                        51.53799273185586
                    ],
                    [
                        -1.5744491997912522,
                        51.00425177354551
                    ],
                    [
                        -2.3876782367356064,
                        51.29774787582828
                    ]
                ]
            }
        }
    ]
}

A useful site to create a GeoJSON file and get an estimate on the rendering time and validity of your GeoJSON can be found here: 

https://geojson.io

Additionally, to check that your GeoJSON data is correctly formatted, paste the contents into GeoJSONLint to get it correctly formatted. Copy the content from the Linter and paste it into the overlay property in the platform.

If your layer data does not change often, paste all the GeoJSON file contents into the overlay property.

You can also enter an HTTPS URL to download your GeoJSON data when viewing it (internet connectivity required).

Configuring Screens

Mapping Screen

When viewing the designer of a Mapping Screen, under Basic Properties, the Overlay with Geo Data property supports formula and static text input.

This allows for either adding a GeoJSON file’s content directly to the property or dynamically acquiring it from data sources or downloading a URL.

You can also populate a data source with GeoJSON data and access the data using a formula.

Alternatively, you could load all of your GeoJSON data files to a web server and then add the fully qualified direct-download links as text fields in a data source. Select that field in the data source, and your overlay will render.

Once design changes have been made, remember to hit Save, then jump into the app, force sync, and test.

Configuring Fields

When viewing a Data Entry Form’s design, the following fields display an Overlay Map with Geo Data option that allows for GeoJSON data to be statically added or dynamically driven from a formula. 

Allowing for either a GeoJSON file’s content to be added directly into the property or otherwise dynamically acquired from data sources, Form fields, or a URL to download.

Location Field

In addition to the Mapping Screen, you can specify geo-data to render a map overlay when your users access a Location field.

Under the field’s Layout & Styling properties, the Overlay Map with Geo Data can be populated with GeoJSON data for the field to use.

Media and Gallery Field

Under the field’s Basic Properties, if the Include GPS information is ticked, the Overlay Map with Geo Data can be populated with GeoJSON data for the field to use.

The option to include GPS information is available for all media types, ie. Image, Audio, and Video.

Media Field

Gallery Field

Styling Options

Adding some styling parameters to your GeoJSON body is possible to ensure that the custom map overlay renders with a particular border color or fill color.

These are some of the styling options available to you when you use custom map overlays:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "stroke": "#000000",
                "stroke-opacity": 1,
                "stroke-width": 2,
                "fill": "#000000",
                "fill-opacity": 0.5
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        -2.3828485470936887,
                        51.61715145290631
                    ],
                    [
                        -2.2053353653881436,
                        51.53799273185586
                    ],
                    [
                        -1.5744491997912522,
                        51.00425177354551
                    ],
                    [
                        -2.3876782367356064,
                        51.29774787582828
                    ]
                ]
            }
        }
    ]
}

In the example above, the styling properties section is explained below: