Map
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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.
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.
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.
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.
Default checked. Buttons for zooming in and out will be visible in the map when this option is enabled.
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.
You may add different layers to your map by adding Layers. You may have multiple layers.
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.
Permanent
Only available when Tooltip is selected. Sets the tooltip as always visible.
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
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:
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:
Add a URL to an external resource holding the GeoJSON to be displayed.
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>