5.7.1 widgetMap as Reading widget
First of all, an existing Map widget must be identified in the dashboard, of which the id <TARGET_WIDGET_NAME> must be noted.
The JS function to be inserted in the appropriate CK Editor box (in more options) of another widget of the same dashboard, in order to pilot the <TARGET_WIDGET_NAME> widgetMap is of the following type:
function execute() {
var coordsAndType = {};
coordsAndType.eventGenerator = $(this);
coordsAndType.desc = "CarPark";
coordsAndType.query = "https://servicemap.disit.org/WebAppGrafo/api/v1/?selection=43.64471;11.005751;43.89471;11.505751&categories=Car_park&max...";
coordsAndType.color1 = "#ebb113";
coordsAndType.color2 = "#eb8a13";
coordsAndType.targets = <TARGET_TIME_TREND_WIDGET_NAME_(OPTIONAL)>;
coordsAndType.display = "pins";
coordsAndType.queryType = "Default";
coordsAndType.iconTextMode = "text";
coordsAndType.pinattr = "square";
coordsAndType.pincolor = "#959595";
coordsAndType.symbolcolor = "undefined";
coordsAndType.bubbleSelectedMetric = "";
$('body').trigger({
type: "addSelectorPin",
target: <TARGET_WIDGET_NAME>,
passedData: coordsAndType
});
}
coordsAndType.query can be of the following types:
- Device category: To find all entities (e.g. IoT Devices, sensors, etc.) of a certain category (specified in the query's categories parameter, which corresponds to the Subnature column in the wizard table) and produced by a certain IoT Model ( model parameter in the query, corresponding to the Device/Model column of the wizard). A display bounding box must also be specified (parameter selection)
Subnature and Model examples:
- categories=Car_park&model=CarPark
- categories=Traffic_sensor&model=metrotrafficsensor
- categories=Weather_sensor&model=SirSensors
- Individual devices: To find individual entities (e.g. IoT Devices, sensors, etc.) identified by their unique serviceURI.
Example:
https://servicemap.disit.org/WebAppGrafo/api/v1/?serviceUri=<SERVICE_URI>
Examples of serviceURIs:
(Environmental sensor)
(Traffic sensor)
(Parking sensor)
Where to find the ServiceURI in the Wizard or Inspector:
(Traffic sensors):
FIGURE: (Device Selection by Wizard)
(Weather sensors):
FIGURE: (Device Selection by Wizard)
5.7.2 widgetMap as Writing widget: Geographic Drill-Down by Zoom on Widget Map
At the click on the geographic drill-down button on the widget map, the js function script in the ckeditor is executed passing as a parameter a JSON named "param" containing the zoom bounds, the type of event (in this case "zoom") and a list containing all the selected layers (those inside the bounds) and their properties.
The properties of the sensors passed have to be adapted to prepare data in the suitable format to be read by the target widget, in order to retrieve and display them. Therefore, it is necessary to build a JSON with proper data format. Below is an example of how to construct a JSON to be passed starting from the input parameter and an array of metrics of interest:
var e = JSON.parse(param)
var metrics = ["anomalyLevel","averageSpeed","avgTime","concentration","congestionLevel","vehicleFlow"];
var data = [];
let h = 0;
for (var l in e.layers) {
for(var m in metrics){
data[h] = {};
data[h].metricId = "https://servicemap.disit.org/WebAppGrafo/api/v1/?serviceUri="+ e.layers[l].serviceUri;
data[h].metricHighLevelType = "Sensor";
data[h].metricName = "DISIT:orionUNIFI:" + e.layers[l].name;
data[h].metricType = metrics[m];
h++;
}
}
The javascript “data” object can be sent for display to other widgets, here is an example with a PieChart:
$('body').trigger({
type: "showPieChartFromExternalContent_<TARGET_WIDGET_NAME>",
eventGenerator: $(this),
targetWidget: "<TARGET_WIDGET_NAME>",
passedData: date
});
5.7.3 widgetMap as Writing widget: Marker click on WidgetMap
At the click on a specific marker on widget map, the js function script in the ckeditor is executed passing as a parameter a JSON named "param" with a list containing all the selected layers (those inside the bounds) and their properties.
The properties of the sensors passed have to be adapted to prepare data in the suitable format to be read by the target widget, in order to retrieve and display them. Therefore, it is necessary to build a JSON with proper data format.
The same example shown in section 5.7.2 is suitable also for this action: in this case, a single SURI will be passed in the Javascript function, instead of a list of SURI as in the previous case.
5.7.4 widgetMap as Writing widget: Click on a generic point on WidgetMap
At the click on a generic point on widget map, the JavaScript function script in the CKeditor is executed passing as a parameter a JSON named "param" with the geographical coordinates of the clicked point. The JSON has the following structure and attributes:
{
"event": "mapClick",
"coordinates": {
"latitude": 43.780043758868835,
"longitude": 11.26093190389292
}
}
