This widget prints out a map with a marker for each geolocated Thing.
[DEPRECATED] Use the new Map widget.
code_blocksCode View
Template Syntax
Below you can find some examples of how to use the component within a template.
<thing-map-widget title="Equipment" mapOptions="{zoom:5}" layerFilter="customLayer" > <marker filter="mapMarkerFilter" [includeAlertSeverity]="true" [clusterEnabled]="true" clusterFilter="customCluster"> <property name="serialNumber"></property> <property name="thingDefinition.name"></property> <property name="properties.Temperature"></property> </marker> </thing-map-widget>
Component Reference
Here is a comprehensive list of all the elements and properties that can be used to configure the component.
Thing Map <thing-map-widget> | |
---|---|
PROPERTIES | |
CSS Class | The name(s) of the CSS class used to customize the widget layout. Type: STRING | Optional class="my-custom-class" |
Failure Marker Image Url | The URL of the failure marker image. Type: STRING | Optional failureMarkerUrl="fooBar" |
Height | The height of the widget (e.g. 250px). Type: STRING | Optional height="250px" |
Layer Filter | The filter configuring the map layer (optional). Check out the Layer documentation, or see the available layers here. Type: STRING | Optional layerFilter="fooBar" |
Map Options | The JSON describing the rendering map options. Check out the Options documentation. Type: JSON | Optional [mapOptions]="{foo: 'bar'}" |
Normal Marker Image Url | The URL of the default marker image. Type: STRING | Optional defaultMarkerUrl="fooBar" |
Query | The array of conditions filtering out items. For instance: [query]='[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}]' Predicates: eq, beginsWith, like, notLike, isEmpty, isNotEmpty, gt, gte, lt, lte. Type: QUERY | Optional query="[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}, {...}]" |
Query Variable | The id of the page's <things-filter-field> used for searching. Type: STRING | Optional queryFieldRef="query-1" |
Search Fields | The array of fields used to filter out the objects when searching by a generic key. For instance: [searchFields]='['name', 'serialNumber', 'customer.name', 'customer.code']' Type: PROPERTY_ARRAY | Optional searchFields="['name', 'serialNumber']" |
Selected Marker Image Url | The URL of the selected marker image. Type: STRING | Optional selectedMarkerUrl="fooBar" |
Title | The title displayed on the top part of the widget box. Type: STRING | Optional [title]="'Details'" |
Warning Marker Image Url | The URL of the warning marker image. Type: STRING | Optional warningMarkerUrl="fooBar" |
Width | The width of the widget (e.g. 500px). Type: STRING | Optional width="500px" |
SUB-ELEMENTS | |
Marker | This element allows defining how marker are computed and rendered. Single | Optional <marker></marker> |
Marker <marker> | |
---|---|
PROPERTIES | |
Cluster Enabled | If selected, markers are clustered according to the zoom level. Type: BOOLEAN | Optional | Values: true
false
[clusterEnabled]="true" |
Cluster Filter | The filter configuring the cluster (optional). Type: STRING | Optional clusterFilter="fooBar" |
Filter | The filter configuring the markers depending on values of referenced properties and metrics. Type: FILTER | Optional filter="fooBarFilter" |
Include Alert Severity | If selected, each marker receives also the maximum severity of the alerts currently active on the associated thing. Type: BOOLEAN | Optional | Values: true
false
[includeAlertSeverity]="true" |
SUB-ELEMENTS | |
Property | The property used by the marker filter to render markers and the details popups. Multiple | Optional <property name="serialNumber"></property> |
Property <property> | |
---|---|
PROPERTIES | |
Description | The property description. Type: STRING | Optional description="fooBar" |
Filter | The name of the filter used to transform and display values. Type: FILTER | Optional filter="fooBarFilter" |
Label | The property alternative label. Type: STRING | Optional label="Temperature" |
Name | The property whose value must be loaded by the widget. Type: PROPERTY | Required name="serialNumber" |
Visibility Condition | The expression that allows you to reduce the visibility of the element. Type: STRING | Optional *ngIf="getUser().organizationId != null" |
Custom marker sample function
exports.markerFilter = function() {
function MarkerFilter() {
}
MarkerFilter.prototype.transform = function(markerObjets) {
markerObjects.orEach(m => {
var markerIcon = null;
if ( m.data && m.data["thingDefinition.name"] == "Ovn 800w") {
markerIcon = L.icon({ iconUrl: '/img/oven-marker.png', iconSize: [60, 60] });
} else if (m.data && m.data["temperatur"] > 50) {
markerIcon = L.icon({ iconUrl: '/img/cooking.png', iconSize: [50, 50] });
}
if (markerIcon) {
m.markersetIcon(makerIcon)
}
});
};
return MarkerFilter;
}();
For more details about marker configuration see Leaflet documentation.
Comments
0 comments
Please sign in to leave a comment.