Map

This component displays a geographical map, a road map, a terrain map, or a satellite map. It allows to create multiple layers that show and dynamically update geo-fences, devices, or custom objects. A map can use multiple tiled sources of geoinformation data and imagery (e.g. Google Maps, Bing Maps, OpenStreetMap, or Yandex Maps).

Public Variables (Properties)

[?]

The Map component has the following basic properties and property groups that are common to all components:

Name, Advanced Properties, Container Properties, Styles, Preloader, Events, Bindings.

Layers

This property allows map layers to be defined, manage their visibility, and assign custom .

Variable Name:	layers
Records:	0..unlimited

Record Format:

Field Name	Field Type	Field Description
id	String	ID. Unique ID of the layer.
name	String	Name. Layer name.
description	String	Description. Layer description.
show	Boolean	Show. Defines whether the layer will be visible.
mapLink	String	Map Link. Custom Map Link which applies only for the layer. When defined, takes priority over the global Map Link property.
linkParameters	Data Table	Link Parameters. Custom parameters to append to the Map Link of the layer if one is defined. Same format and behavior as the global Link Parameters property.

Markers

This property allows to define markers displaying on selected map layer and manage their visual representation.

Variable Name:	markers
Records:	0..unlimited

Record Format:

Field Name	Field Type	Field Description
id	String	ID. Unique ID of the marker.
layer	String	Layer. Map layer ID to display marker to.
latitude	Double	Latitude. Latitude of the marker.
longitude	Double	Longitude. Longitude of the marker.
riseOnHover	Boolean	Rise On Hover.
riseOffset	Integer	Z-index Rise Offset.
draggable	Boolean	Draggable.
popupOptions	Data Table	Popup Options.
tooltipOptions	Data Table	Tooltip Options.
style	String	Style. The CSS style to be applied to the marker.

Tracks

This property allows to define tracks displaying on selected map layer and manage their visual representation.

Variable Name:	tracks
Records:	0..unlimited

Record Format:

		popupContent	String	String of HTML content to be displayed in the popup body.
Field Name	Field Type	Field Description
id	String	ID. Unique ID of the track.
polyline	Data Table	Polyline. Defines set of points forming polyline. This nested data table has few fields: Latitude - latitude of the point Longitude - longitude of the point Popup Options - Data table describing popup content and behavior with the follow options:
		className	String	A custom CSS class name to assign to the popup.
		activationEvent	String	Select event which will cause popup activation: "click" or "hover".
		closeButton	Boolean	True - Display "close" button in popup body.
		autoClose	Boolean	True - Popup will close when another popup is opened. False - Popup will stay open when other popups are opened.
		closeOnEscapeKey	Boolean	True - Popup will close when escape key is pressed.
		closeOnClick	Boolean	True - popup will close when user clicks outside the popup window.
showNullValues	Boolean	Connect Null Segments. When `True`, if one of the points in the Polyline data table is invalid because of a `NULL` value in the Latitude or Longitude field, the track line will be drawn to connect the preceding and succeeding points. When `False`, no line will be drawn between the points preceding and succeeding an invalid point.
description	String	Description. The track description.
layerId	String	Layer. Map layer ID in which the track will be displayed.
polylineStyleId	String	Polyline Style. The ID of the Track Style to apply to the line drawn between track points.
circleMarkerStyleId	String	Point Style. The ID of the Track Point Style to apply to the points that define the track.

Areas

This property allows to define areas displaying on selected map layer and manage their visual representation.

Variable Name:	areas
Records:	0..unlimited

Record Format:

Field Name	Field Type	Field Description
id	String	ID. Unique ID of the area.
polyline	Data Table	Polyline. Defines set of points forming area. This nested data table has few fields: Latitude - latitude of the point Longitude - longitude of the point Description - the point description
description	String	Description. The area description.
layerId	String	Layer. Map layer ID to display area to.
areaStyleId	String	Style. The CSS style to be applied to the area.

Round Areas

This property allows to define round areas displaying on selected map layer and manage their visual representation.

Variable Name:	circleAreas
Records:	0..unlimited

Record Format:

Field Name	Field Type	Field Description
id	String	ID. Unique ID of the round area.
description	String	Description. Round area description.
latitude	Double	Latitude. Latitude of round area.
longitude	Double	Longitude. Longitude of round area.
radius	Integer	Radius. Radius of round area, in pixels.
layerId	String	Layer. Map layer ID to display round area to.
circleAreaStyleId	String	Style. The CSS style to be applied to the round area.

Enable Search

If enabled, displays search field.

Variable Name:	enableSearch
Records:	1

Record Format:

Field Name	Field Type	Field Description
enableSearch	Boolean	Enable Search

Access Token for Tiles

Custom access token which will be added to the URL of every tile request. Each request will appear with an appended query parameter access_token, with the value of Access Token for Tiles as the value. For example: https://tile.exampleMapURL.org/4/8/4.png?access_token=<Access Token for Tiles>

Variable Name:	accessToken
Records:	1

Record Format:

Field Name	Field Type	Field Description
accessToken	String	Access Token for Tiles

Latitude

Specifies the initial latitude of the map center. If Generate Coordinate Changed Events is enabled, the Latitude property value will be updated for every zoom, scroll and mouse-clicked event to display the current map center.

Variable Name:	latitude
Records:	1

Record Format:

Field Name	Field Type	Field Description
latitude	Double	Latitude

Longitude

Specifies the initial latitude of the map center. If Generate Coordinate Changed Events is enabled, the Longitude property value will be updated for every zoom, scroll and mouse-clicked event to display the current map center.

Variable Name:	longitude
Records:	1

Record Format:

Field Name	Field Type	Field Description
longitude	Double	Longitude

Selected Marker

Specifies a marker selected by default. Value of this field must match with ID field of Markers property.

Variable Name:	selectedMarker
Records:	1

Record Format:

Field Name	Field Type	Field Description
selectedMarker	String	Selected Marker

Map Link

A URL serving a TileJSON file and tile image folders for every level of desired zoom. The map link must be a URL offered by a web server. When map images are located on the host machine, the directory containing the TileJSON file and image folders can be served to localhost. Directory links to the operating system will result in a browser error. The Layers table is extended by the tiles found by Map Link and overlayed onto the main map.

The TileJson standard specifies that a URL with root www.example.com, at zoom level {z}, serving a tile with X coordinate {x} and Y coordinate {y} is formulated as www.example.com/{z}/{x}/{y}.png. In order to retrieve tiles from a URL which is structured in a different way, the Map Link property accepts the variables {z}, {x}, and {y}, allowing different URL structures to be defined, for example www.{z}.{x}.{y}.example.com.

Variable Name:	mapLink
Records:	1

Record Format:

Field Name	Field Type	Field Description
mapLink	String	URL providing the tile image folders and TileJSON file.

Map Search Provider

Defines search provider for map search field. This property has two selection values:

Nominatim
Latitude Longitude

Variable Name:	mapProvider
Records:	1

Record Format:

Field Name	Field Type	Field Description
mapProvider	String	Map Search Provider

Center on Marker Button

If enabled, displays a button centering map on the marker specified in the Selected Marker property.

Variable Name:	centerMap
Records:	1

Record Format:

Field Name	Field Type	Field Description
centerMap	Boolean	Center on Marker Button

Show Custom Button

If enabled, displays a custom button with customizable behavior.

Variable Name:	customButton
Records:	1

Record Format:

Field Name	Field Type	Field Description
customButton	Boolean	Show Custom Button

Activate Cluster for Markers

When enabled, closely-located markers will be clustered and indicated with a single icon at appropriate zoom levels. Zooming into a cluster will display the markers separately.

Variable Name:	markerClusterActivator
Records:	1

Record Format:

Field Name	Field Type	Field Description
markerClusterActivator	Boolean	Activate cluster for markers.

Styles for Marker Cluster

CSS styles to apply to the icon representing the cluster. Applicable only when Activate Cluster for Markers is active.

Variable Name:	markerClusterStyles
	1

Record Format:

Field Name	Field Type	Field Description
markerClusterStyles	String	Styles for marker cluster.

Proxy

If enabled, all answers for tile requests will use the Iotellect server as a proxy.

Variable Name:	proxy
Records:	1

Record Format:

Field Name	Field Type	Field Description
proxy	Boolean	Proxy

Link Parameters

Specify any number of additional parameters to be appended to the Map Link. For example, if the following data table is specified:

Key

Value

key1

value1

key2

value2

Then the parameters will be appended to the Map Link in the form ?key1=value1&key2=value2, resulting in map links similar to https://tile.exampleMapURL.org/4/8/4.png?key1=value1&key2=value2.

Variable Name:	linkParameters
Records:	0…Unlimited

Record Format:

Field Name	Field Type	Field Description
key	String	Key
value	String	Value

Marker Styles

Defines styles and visualization options of markers.

Variable Name:	markersStyles
Records:	0..unlimited

Record Format:

Field Name	Field Type	Field Description
id	String	ID. Unique ID of the marker. Value of this field must match with ID field of Markers property.
name	String	Name. Style preset name.
description	String	Description. Style preset description.
selectedMarkerImage	Data Block	Selected Marker Image. Image for the marker in selected state.
defaultMarkerImage	Data Block	Default Marker Image. Image for the marker in default state.

Track Styles

Defines styles and visualization options of tracks.

Variable Name:	polylinesStyles
Records:	0..unlimited

Record Format:

Field Name	Field Type	Field Description
id	String	ID. Unique ID of the track. Value of this field must match with ID field of Tracks property.
name	String	Name. Style preset name.
description	String	Description. Style preset description.
color	Color	Color. Color of the polyline.
width	Integer	Width. Width of the polyline.
opacity	Double	Opacity. Opacity of the polyline.
stroke	String	Stroke. Stroke of the polyline.
dashArray	String	Dash Length Array. Defines the pattern of dashes and gaps used to paint the outline of the track.
dashOffest	String	Dash Offset. Offset of dash array.
additionalStyles	String	Additional Styles. Additional CSS styles to be applied to the polyline.

Track Point Styles

Defines styles and visualization options for the points on a track.

Variable Name:	trackPointStyles
Records:	0..unlimited

Record Format:

Field Name	Field Type	Field Description
id	String	ID. Unique ID of the track point style.
name	String	Name. Style preset name.
description	String	Description. Style preset description.
color	String	Color. Color of the point.
width	Integer	Width. Width of the point.
opacity	Double	Opacity. Opacity of the point.
fill	Boolean	Fill. If enabled, the point will be filled by the color specified in Fill Color and Fill Opacity fields.
fillColor	String	Fill Color. Color for point filling.
fillOpacity	Double	Fill Opacity. Color opacity for point filling.
stroke	String	Stroke. Stroke of the point.
dashArray	String	Dash Length Array. Pattern of dashes and gaps used to paint the outline of the point.
dashOffest	String	Dash Offset. Offset of dash array.
radius	Integer	Radius. The radius of the point.
additionalStyles	String	Additional Styles. Additional CSS styles to be applied to the point.

Area Styles

Defines styles and visualization options of areas.

Variable Name:	areasStyles
Records:	0..unlimited

Record Format:

Field Name	Field Type	Field Description
id	String	ID. Unique ID of the area. Value of this field must match with id field of areas property.
name	String	Name. Style preset name.
description	String	Description. Style preset description.
color	String	Color. Color of the area.
width	Integer	Width. Width of the polyline.
opacity	Double	Opacity. Opacity of the area.
fill	Boolean	Fill. If enabled, the area will be filled by color specified in Fill Color and Fill Opacity fields.
fillColor	String	Fill Color. Color for the area filling.
fillOpacity	Double	Fill Opacity. Color opacity for the area filling.
stroke	String	Stroke. Stroke of the area border.
dashArray	String	Dash Length Array. Pattern of dashes and gaps used to paint the outline of the area.
dashOffest	String	Dash Offset. Offset of dash array.
additionalStyles	String	Additional Styles. Additional CSS styles to be applied to the area.

Round Area Styles

Defines styles and visualization options of round areas.

Variable Name:	circleAreasStyles
Records:	0..unlimited

Record Format:

Field Name	Field Type	Field Description
id	String	ID. Unique ID of the round area. Value of this field must match with id field of markers property.
name	String	Name. Style preset name.
description	String	Description. Style preset description.
color	String	Color. Color of the round area.
width	Integer	Width. Width of the round area.
opacity	Double	Opacity. Opacity of the round area.
fill	Boolean	Fill. If enabled, the round area will be filled by color specified in Fill Color and Fill Opacity fields.
fillColor	String	Fill Color. Color for the round area filling.
fillOpacity	Double	Fill Opacity. Color opacity for the round area filling.
stroke	String	Stroke. Stroke of the round area border.
dashArray	String	Dash Length Array. Pattern of dashes and gaps used to paint the outline of the round area.
dashOffest	String	Dash Offset. Offset of dash array.
additionalStyles	String	Additional Styles. Additional CSS styles to be applied to the round area.

Events

Properties to enable certain events. In addition to properties for enabling common mouse events, the Map component has the following property for enabling a specific event.

Generate Coordinate Changed Events

When enabled, the event Coordinate Changed will be generated when the map coordinates are changed.

Variable Name:	generateCoordinateChanged
Records:	1

Record Format:

Field Name	Field Type	Field Description
generateCoordinateChanged	Boolean	Generate Coordinate Changed Events

Zoom

Group of properties defining how zoom controls appear to the user.

Zoom Level

Defines default zoom level of the map.

Variable Name:	zoom
Records:	1

Record Format:

Field Name	Field Type	Field Description
zoom	Integer	Zoom Level

Enable Zoom Control

If enabled, displays zoom control buttons.

Variable Name:	zoomControl
Records:	1

Record Format:

Field Name	Field Type	Field Description
zoomControl	Boolean	Zoom Control

Show Scale

If enabled, displays scale bar indicating the map scale.

Variable Name:	showScale
Records:	1

Record Format:

Field Name	Field Type	Field Description
showScale	Boolean	Show Scale

Scale Position

Indicates where the scale bar will be displayed when it is active.

Variable Name:	scalePosition
Records:	1

Record Format:

Field Name	Field Type	Field Description
scalePosition	Boolean	Scale Position

Imperial Scale

Indicates whether the scale bar should display distance in imperial units, such as miles and feet.

Variable Name:	imperialScale
Records:	1

Record Format:

Field Name	Field Type	Field Description
imperialScale	Boolean	Imperial Scale

Metric Scale

Indicates whether the scale bar should display distance in metric units, such as kilometers and meters.

Variable Name:	metricScale
Records:	1

Record Format:

Field Name	Field Type	Field Description
metricScale	Boolean	Metric Scale

Update Scale When Idle

When selected, the scale bar measurements will be updated even when the map is idle.

Variable Name:	updatesScaleWhenIdle
Records:	1

Record Format:

Field Name	Field Type	Field Description
metricScale	Boolean	Update Scale When Idle

Public Events

[?]

Mouse Clicked

Extends the common component event Mouse Clicked by appending the fields Latitude and Longitude, described below.

Event Name	mouseClicked
Records:	1

Record Format:

Field Name	Field Type	Field Description
latitude	Double	Indicates the latitude of the mouse pointer at the click event.
longitude	Double	Indicates the longitude of the mouse pointer at the click event.

Track Point Clicked

This event is fired when the user clicks on a point in a track.

Event Name	trackPointClicked
Records:	1

Record Format:

Field Name	Field Type	Field Description
trackId	String	Indicates the ID of the track in which the point is located.
pointIndex	Integer	Indicates the index of the point.
latitude	Double	Indicates the latitude of the point.
longitude	Double	Indicates the longitude of the point.

Marker Clicked

This event is fired when the user clicks on a marker.

Event Name	markerClicked
Records:	1

Record Format:

Field Name

Field Type

Field Description

String

ID of the event.

value

Data Table

Contains nested data table with information about clicked marker. It contains few fields:

Latitude
Longitude
Name

Map Searched

This event is fired when the user completes the search request using the integrated search component.

Event Name	mapSearched
Records:	1

Record Format:

Field Name	Field Type	Field Description
id	String	ID of the event.
value	Data Table	Contains nested data table with information about search result. It contains few fields: Latitude Longitude Address
level	Integer	Default level of the event.

Custom Button Clicked

This event is fired when the user clicks the custom button element on the map component.

Event Name	customButtonClicked
Records:	1

Record Format:

Field Name	Field Type	Field Description
id	String	ID of the event.
value	Data Table	Contains nested data table with information about button click result. It contains one field. Custom Button - contains name of the event e.g. customButtonClicked.
level	Integer	Default level of the event.

Coordinate Changed

Fires if the property Generate Coordinate Changed Events property is enabled. Displays the current coordinates of the center of the map view any time the coordinates are changed.

Event Name	coordinateChanged
Records:	1

Record Format:

Field Name	Field Type	Field Description
latitude	Double	Current Latitude of the map view center point.
longitude	Double	Current Longitude of the map view center point.

DPF_EXPORT_V5.8.8 / TIME_1743710549 / 2025-04-03 20:02:29 / STRLEN_85765 / STRLEN_HTML_93276

{VERSION}

Was this page helpful?