Map

The Map component is an interactive component supporting multiple layer types. It defaults to Open Street Map as the bottom layer if nothing else is defined.

A full example setup on Map is available in our Showroom. You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register on Showroom Signup.

Properties

Initial Latitude, Longitude and Zoom

You may bind the settings Initial Latitude and Initial Longitude to properties in your data holding the GPS coordinates for the position you want to map to open as default centered.

This setting is optional. Without this setting, the map will try to center the map based on the markers (as defined by the Layers, see further down).

You may also override the Initial Zoom if you want a more focused initial zoom for your map.

Current Latitude, Longitude and Zoom

The current latitude, longitude and zoom level can be bound to properties in your data model. These properties are two-way data bound.

Upon panning and zooming, the center coordinates of the map and current zoom level will be written to these properties. If any of these properties are updated outside of the map, for example using a separate UI component, the map will update accordingly.

Write Click Coordinates

If this setting is selected, you may bind the Clicked Latitude and Clicked Longitude to properties in your data. Each click will write the coordinates back to those properties.

Use Default Map

Default checked, meaning Open Streep Map will be the map provider. If unchecked, you may add another map source (such as Mapbox) as a map provider. This is done by adding a new Layer of type Map.

Zoom Control

Default checked. Buttons for zooming in and out will be visible in the map when this option is enabled.

Prevent Touch Default

When panning a map on a mobile device: If the map is placed inside a UI component that is reacting to the same touch movements, you may get some undesired behaviour. For example, when a map is placed inside a bottom drawer, the drawer may close while panning the map vertically. You may prevent these defaults by enabling Prevent Touch Default, and the map will own these events when panning inside the map.

Layers

You may add different layers to your map by adding Layers. You may have multiple layers.

Layer Type: Markers

Add Markers to your map.

Data Source

You will need a data source holding longitude and latitude for the objects you want to add to the map. Select this data source in the Data Source setting, and more settings will appear.

Latitude and Longitude

Select the properties of your Data Source holding the latitude and longitude for the marker to be displayed.

Selection and Limit

Filter or limit the number of objects to display from your data source.

Popup text

When the marker is clicked, display a popup. You may also enable markdown for this text.

Tooltip

Displayed when hovering a marker.

Item Icon and Color

Select an icon to be displayed as a marker (instead of the default pin), as well as the color for this.

Cluster Color

Assign a theme color to clusters. Defaults to Primary.

Disable Clustering

By default, if many markers are to be displayed, nearby markers will be clustered together. You may disable this feature.

Property Conditions

You may display different icons or icon colors, based on different conditions.

On Click

Select an action to be executed when a marker is Clicked

Layer Type: Data GeoJSON

You may add polygons for defining sections, or lines for defining borders or lines/paths.

Select a Data Source holding the polygon(s) or line to be displayed, and select the property holding the polygon in the Data setting.

A polygon data property may be of the following format (example with 1 polygon). The polygon GPS coordinates should be replaced with the long/lat variables:

{
"type": "FeatureCollection",
"features": [
{
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [long1,lat1],[long2,lat2],[long3,lat3]
          ]
        ]
      },
      "properties": {
        "prop0": "value0",
        "prop1": { "this": "that" }
      }
    }
]
}

The data property for defining a Line may be of the following format. The line GPS coordinates should be replaced with the long/lat variables:

{
"type": "FeatureCollection",
"features": [
{
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [long1,lat1],[long2,lat2],[long3,lat3]
        ]
      },
      "properties": {
        "prop0": "value0",
        "prop1": { "this": "that" }
      }
    }
]
}

Layer Type: Static GeoJSON

Add a URL to an external resource holding the GeoJSON to be displayed.

Layer Type: Map

Add a URL to an external map provider.

Example for Mapbox (you will need to set up your own Mapbox account): https://api.mapbox.com/styles/v1/<YOUR_USER_NAME>/ckkybknqd1cvu17odf1s3ji59/tiles/256/{z}/{x}/{y}@2x?access_token=<YOUR_ACCESS_TOKEN>