Skip to main content

Map Widget

A map widget based on the LeafletJS library.

Usage

Properties

PropertiesTypeBindingDefaultDescription
Custom ClassSTRING[localized]<>Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space.
DataINFOTABLE<Infotable with at least one LOCATION column to be displayed on the map.
MarkerLocationFieldFIELDNAMEField from the Data property that contains location information for markers.
MarkerIdFieldFIELDNAMEField from the Data property that can optionally uniquely identify the marker.
MarkerIconFieldFIELDNAMEField from the Data property that contains IQNOX Icon links that will be used for each marker.
MarkerSelectedIconFieldFIELDNAMEField from the Data property that can optionally set the selected marker icon.
MarkerZIndexFieldFIELDNAMEField from the Data property driving the zIndex of a marker.
MarkerTooltipFieldFIELDNAMEField from the Data property containing the HTML of the tooltip, shown when the user hovers over a marker.
MarkerMultiSelectBOOLEANFALSEEnable or disable multiple marker selection.
MarkerPopupMashupMASHUPNAME<Name of the mashup that will be used to display a popup when the user click on a marker.
MarkerPopupWidthNUMBER<400Width of the mashup popup.
MarkerPopupHeightNUMBER<300Height of the mashup popup.
SelectedMarkerIdSTRING<>Currently selected marker ID on the map.
ClusterMarkersBOOLEANTRUECluster nearby markers into a single object that shows the total count of items in the area.
ClusterShowCoverageOnHoverBOOLEANTRUEWhen you mouse over a cluster it shows the bounds of its markers.
ClusterZoomToBoundsOnClickBOOLEANTRUEWhen a cluster is clicked , zoom to its bounds.
ClusterSpiderfyOnMaxZoomBOOLEANTRUEWhen a click a cluster is clicked at the bottom zoom level expand the markers so they all can be seen.
MovementWithAnimationBOOLEANTRUEEnable smooth movement animation for markers.
MarkerDefaultIconSTRING<>material-rounded:location_onDefault icon for marker.
MarkerSelectedDefaultIconSTRING<>material-rounded:location_onDefault icon for selected marker.
EnableRegionsBOOLEANFALSEEnable Regions on map.
RegionDataINFOTABLE<Infotable with Regions to be displayed on the map.
RegionColorFieldFIELDNAMEField from the RegionData property that contains a column for CSS Color.
RegionLocationFieldFIELDNAMEField from the RegionData property that contains an INFOTABLE with the IQNOX_RegionLocation_DS data shape which has a column named location of type location.
RegionToolTipFieldFIELDNAMEField from the RegionData property that contains the Region Tooltip.
RegionSelectionSTRINGNoneRegion selection options(None, Single, Multiple).
ZoomNUMBER<>5Initial zoom level of the map.
MaxZoomNUMBER25The maximum zoom level up to which this layer will be displayed.
MaxNativeZoomNUMBER18Maximum zoom number the tile source has available.
InitialLocationLOCATION<EuropeDefault map center at load.
EnableDroppedPinBOOLEANFALSEEnable add custom marker at click on map.
DroppedPinLocationLOCATION>The last location of the dropped pin.
DroppedPinIconSTRINGmaterial-rounded:pin_dropDefault icon for dropped pin.
OverlaysINFOTABLE<Infotable with at least one IQNOX_MapOverlay_DS row to be displayed on the map.
ProviderSTRING<Lists the configured tile providers in a dropdown or used as an input for URL or JSON strings.
ShowLayersSelectorBOOLEANShow or hides the Tile Layer controller at runtime. If this is set to true, it will use the selected Provider as the initial tile layer.
HeatmapDataINFOTABLEInfotable with IQNOX_HeatmapValues_DS points to be displayed on the map.

Services

PropertyTypeBindingDescription
AutoZoomSERVICE<AutoZoom the map so all markers can be shown.
ZoomOnSelectedSERVICE<Zoom on the selected marker on the map.
ShowDroppedPinSERVICE<Shows a marker on the map at the location where the last event occurred.
ClearDroppedPinSERVICE<Hides the event marker.

Events

PropertyTypeBindingDescription
BoundsChangedEVENT>Triggers when the bounds of the maps are changed.
SelectedMarkerIdChangedEVENT>Triggers when the SelectedMarkerId property changes.
MarkerWasClickedEVENT>Triggers when a marker is clicked.
MarkerWasDoubleClickedEVENT>Triggers when a marker is double clicked.
MarkerWasRightClickedEVENT>Triggers when a marker is right clicked.
DroppedPinLocationChangedEVENT>Triggers when a dropped pin location is changed.

Selecting the Tile Layer

IQNOX_TileLayer_DS

This Data Shape is used for configuring different tile providers on the template store.

PropertyTypeDescription
displayNameSTRINGName for composer use
serverUrlSTRINGURL for the needed tile provider
attributionSTRINGDisplay data in a small text box on a map

How to Configure Tile Providers

After creating a new Template Store from the IQNOX_Widget_Template_Store_TT template, users can add new tile providers in the mapTilesConfig property. Each Template Store thing can have different configurations so switching between them in the composer will change the tile providers available from the Providers property and display them in a dropdown format.

To add new tile providers on a Template Store, open the Template Store Thing and click on the edit button for the mapTilesConfig property and add a new row to the infotable.

Tile Configuration Example

Although this is the recommended way to change the tile provider for the widget, the Providers property can be manually configured in the composer if nothing is set on the Template Store. The text input can accept only the URL for the tile provider server, or a JSON format string that contains the URL and the attribution properties.

An example of a JSON input:

{
"url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
"attribution": "Map data &copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"
}

When the ShowLayersSelector property is set to true, the map will have a layer controller at runtime, that can switch between the configured tile providers from the template store. It will use the value from the Provider property as the initial tile layer. When no tile provider has been set on the Template Store, this property should be set to false and the tile layer will be created from the Provider property.

Map Overlays

IQNOX_MapOverlay_DS

This new Data Shape shows users what properties are needed for the use of Image Overlays on the Leaflet map.

PropertyTypeDescription
identifierGUIDUnique identifier used for each Image Overlay
imageUrlSTRINGString link for the image to be used in the Image Overlay
errorUrlSTRINGString link for an image to be displayed when the imageUrl property is not available/correct
topLeftBoundLOCATIONCoordinates for the top left corner of the image
topRightBoundLOCATIONCoordinates for the top right corner of the image
bottomLeftBoundLOCATIONCoordinates for the bottom left corner of the image
opacityNUMBEROpacity of the displayed Image Overlay

External Tool for Image Coordinates

As part of this new feature, an external tool has been developed for users to have an easier time matching an image over the needed location. The tool can be found at https://25yib7.csb.app/. Coordinates Tool

Instructions for use:

  1. Upload the image you want to get the coordinates for.
  2. By moving the markers, position the image in the wanted position.
  3. Select the best suited level of opacity.
  4. Copy the displayed coordinates for use in Thingworx.

Heatmap Layer

The Heatmap Layer displays the intensity of a configured list of points or groups of points on the map. This list comes from the HeatmapData property, that accepts data based on the IQNOX_HeatmapValues_DS data shape.

Heatmap Example

Each point has an intensity value, that makes the point more prominent the higher the value is. When zoomed out, points will be grouped and a local maximum intensity will be calculated. When zoomed in, each point will be individually colored based on the intensity of the visible points on the screen.

The configurator can be used to change the color gradients that will be displayed and the intensity threshold from where they will appear.

Heatmap Configurator

IQNOX_HeatmapValues_DS

This Data Shape contains only a location type property that is formed of three parts:

  • latitude and longitude that will be used as coordinates for each heatmap point to be placed on the map
  • elevation that will be used as an intensity value for each point in the data set (default intensity value is 1 if not provided in data set)

Heatmap Example

Download and import the following entities to test the Heatmap functionality.