With this feature, you can now add visualization layers from your GIS (Geographic Information System) to provide context and information to your users. The layer data must be provided in GeoJSON format.
Once in GeoJSON format, the custom visualization layer can be applied to In-app Mapping screens and a few field types when designing Data Entry Forms.
Note: This feature is currently only available for Android and iOS.
Best Practice:
Large GeoJSON data will limit performance. Lower-resolution data (containing fewer coordinates) will assist performance if you experience any 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.
Simply copy and paste the GeoJSON body into the Overlay with Geo Data (GeoJSON) property on a Mapping screen or Location, Media, or Gallery field to see it in action.
A handy tool for crafting your own GeoJSON files, where you can not only generate these files but also assess their rendering time and verify their integrity. https://geojson.io/
Additionally, if you would like to check that your GeoJSON data is correctly formatted, paste the contents into GeoJSONLint, this will assist in making sure your data is formatted correctly. Copy the content from the Linter and paste it into the Overlay Map with Geo Data property in the platform.
If your layer data does not change often, simply paste the entire GeoJSON file contents into the Overlay Map with Geo Data property.
You can also enter an HTTPS URL to download your GeoJSON data at the time of viewing, an internet connection will be needed for using the URL method.
If a Standard user attempts to open a screen or form that requires Premium Features, they will encounter a notification that reads, "Unable to access Premium functionality".
Configuring Screens
Mapping Screen
When viewing the designer of a Map a Data Source screen, under Basic Properties, the Overlay with Geo Data property supports formula and static text input.
Allowing for either a GeoJSON file's content to be added directly into the property or otherwise dynamically acquired from data sources or a URL to download.
You can also populate a Data Source with GeoJSON data and access the data through a formula.
Alternatively, you can load all of your GeoJSON data files to a web server and then add the fully qualified dire-download links as text fields in a data source. Select that field in the data source, and your overlay will render.
Once changes have been made to your screen, remember to click Save, and don't forget to force sync your app as well.
Configuring Fields
On the form's design page, there are several fields that have the Overlay Map with Geo Data option that allows for GeoJSON data to be statically added or dynamically driven from a formula.
It also allows 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 Fields
Under the field's Basic Properties, if the Include GPS Information is checked, 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
It is possible to add some styling parameters to your GeoJSON body 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:
In the example above, the styling properties section are as follows:
In the example above, the styling properties section are as follows:
Stroke: HTML color code for specifying the color of the borders for the custom map overlay.
Stroke-opacity: A decimal value between 1 and 0 where one is totally opaque and 0 is totally transparent.
Stroke-width: The line width connecting the GeoJSON coordinates in pixels.
Fill: The HTML color to fill the GeoJSON polygon with.
Fill-opacity: A decimal value between 1 and 0 where one is totally opaque and 0 is totally transparent.