Map Widget
A map widget based on the LeafletJS library.
Usage
Properties
Properties | Type | Binding | Default | Description |
---|---|---|---|---|
Custom Class | STRING[localized] | <> | Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space. | |
Data | INFOTABLE | < | Infotable with at least one LOCATION column to be displayed on the map. | |
MarkerLocationField | FIELDNAME | Field from the Data property that contains location information for markers. | ||
MarkerIdField | FIELDNAME | Field from the Data property that can optionally uniquely identify the marker. | ||
MarkerIconField | FIELDNAME | Field from the Data property that contains IQNOX Icon links that will be used for each marker. | ||
MarkerSelectedIconField | FIELDNAME | Field from the Data property that can optionally set the selected marker icon. | ||
MarkerZIndexField | FIELDNAME | Field from the Data property driving the zIndex of a marker. | ||
MarkerTooltipField | FIELDNAME | Field from the Data property containing the HTML of the tooltip, shown when the user hovers over a marker. | ||
MarkerMultiSelect | BOOLEAN | FALSE | Enable or disable multiple marker selection. | |
MarkerPopupMashup | MASHUPNAME | < | Name of the mashup that will be used to display a popup when the user click on a marker. | |
MarkerPopupWidth | NUMBER | < | 400 | Width of the mashup popup. |
MarkerPopupHeight | NUMBER | < | 300 | Height of the mashup popup. |
SelectedMarkerId | STRING | <> | Currently selected marker ID on the map. | |
ClusterMarkers | BOOLEAN | TRUE | Cluster nearby markers into a single object that shows the total count of items in the area. | |
ClusterShowCoverageOnHover | BOOLEAN | TRUE | When you mouse over a cluster it shows the bounds of its markers. | |
ClusterZoomToBoundsOnClick | BOOLEAN | TRUE | When a cluster is clicked , zoom to its bounds. | |
ClusterSpiderfyOnMaxZoom | BOOLEAN | TRUE | When a click a cluster is clicked at the bottom zoom level expand the markers so they all can be seen. | |
MovementWithAnimation | BOOLEAN | TRUE | Enable smooth movement animation for markers. | |
MarkerDefaultIcon | STRING | <> | material-rounded:location_on | Default icon for marker. |
MarkerSelectedDefaultIcon | STRING | <> | material-rounded:location_on | Default icon for selected marker. |
EnableRegions | BOOLEAN | FALSE | Enable Regions on map. | |
RegionData | INFOTABLE | < | Infotable with Regions to be displayed on the map. | |
RegionColorField | FIELDNAME | Field from the RegionData property that contains a column for CSS Color. | ||
RegionLocationField | FIELDNAME | Field from the RegionData property that contains an INFOTABLE with the IQNOX_RegionLocation_DS data shape which has a column named location of type location. | ||
RegionToolTipField | FIELDNAME | Field from the RegionData property that contains the Region Tooltip. | ||
RegionSelection | STRING | None | Region selection options(None , Single , Multiple ). | |
Zoom | NUMBER | <> | 5 | Initial zoom level of the map. |
MaxZoom | NUMBER | 25 | The maximum zoom level up to which this layer will be displayed. | |
MaxNativeZoom | NUMBER | 18 | Maximum zoom number the tile source has available. | |
InitialLocation | LOCATION | < | Europe | Default map center at load. |
EnableDroppedPin | BOOLEAN | FALSE | Enable add custom marker at click on map. | |
DroppedPinLocation | LOCATION | > | The last location of the dropped pin. | |
DroppedPinIcon | STRING | material-rounded:pin_drop | Default icon for dropped pin. | |
Overlays | INFOTABLE | < | Infotable with at least one IQNOX_MapOverlay_DS row to be displayed on the map. | |
Provider | STRING | < | Lists the configured tile providers in a dropdown or used as an input for URL or JSON strings. | |
ShowLayersSelector | BOOLEAN | Show 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. | ||
HeatmapData | INFOTABLE | Infotable with IQNOX_HeatmapValues_DS points to be displayed on the map. |
Services
Property | Type | Binding | Description |
---|---|---|---|
AutoZoom | SERVICE | < | AutoZoom the map so all markers can be shown. |
ZoomOnSelected | SERVICE | < | Zoom on the selected marker on the map. |
ShowDroppedPin | SERVICE | < | Shows a marker on the map at the location where the last event occurred. |
ClearDroppedPin | SERVICE | < | Hides the event marker. |
Events
Property | Type | Binding | Description |
---|---|---|---|
BoundsChanged | EVENT | > | Triggers when the bounds of the maps are changed. |
SelectedMarkerIdChanged | EVENT | > | Triggers when the SelectedMarkerId property changes. |
MarkerWasClicked | EVENT | > | Triggers when a marker is clicked. |
MarkerWasDoubleClicked | EVENT | > | Triggers when a marker is double clicked. |
MarkerWasRightClicked | EVENT | > | Triggers when a marker is right clicked. |
DroppedPinLocationChanged | EVENT | > | 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.
Property | Type | Description |
---|---|---|
displayName | STRING | Name for composer use |
serverUrl | STRING | URL for the needed tile provider |
attribution | STRING | Display 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.
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 © <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.
Property | Type | Description |
---|---|---|
identifier | GUID | Unique identifier used for each Image Overlay |
imageUrl | STRING | String link for the image to be used in the Image Overlay |
errorUrl | STRING | String link for an image to be displayed when the imageUrl property is not available/correct |
topLeftBound | LOCATION | Coordinates for the top left corner of the image |
topRightBound | LOCATION | Coordinates for the top right corner of the image |
bottomLeftBound | LOCATION | Coordinates for the bottom left corner of the image |
opacity | NUMBER | Opacity 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/.
Instructions for use:
- Upload the image you want to get the coordinates for.
- By moving the markers, position the image in the wanted position.
- Select the best suited level of opacity.
- 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.
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.
IQNOX_HeatmapValues_DS
This Data Shape contains only a location
type property that is formed of three parts:
latitude
andlongitude
that will be used as coordinates for each heatmap point to be placed on the mapelevation
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.