Map context usage
This example shows how to use the Map widget context from menus to interact with other widgets on the same dashboard.
Reference a specific map widget by name inside a menu configuration.
Use the map context to trigger actions targeting other dashboard widgets (e.g. an alarm table).
Combine a
Mapswidget and anAlarmTablewidget inside a BoxLayout dashboard.
git checkout origin/osp-maps-configuration .
git checkout origin/osp-web-configuration .
git checkout origin/osp-variables-configuration .
git checkout origin/osp-scripts-configuration .
git checkout origin/example-maps-display-standard .
git checkout origin/example-maps-context-usage .
Example configuration
Create the menu that handles the call and the interaction with the map. Use the same widget name that the one you want to reference :
root/maps/menus/menu.web
{
"moduleId": [
"modules.web.web-1"
],
"name": "Map context menu",
"description": "Menu actions to drive map context operations",
"menus": [
{
"label": "Center",
"icon": "place",
"context": [
{
"type": [
"AlarmTable"
],
"output": [
{
"operation": "evaluate",
"input": {
"code": {
"expression": "osp.widgets('Lo-_-jGf').navigateOnMap(7.153656, 46.80603, 12, 0, 0)"
}
}
}
]
},
{
"type": [
"Maps"
],
"output": [
{
"operation": "evaluate",
"input": {
"code": {
"expression": "osp.widgets('Lo-_-jGf').navigateOnMap(7.153656, 46.80603, 12, 0, 0)"
}
}
}
]
}
]
},
{
"label": "Show points layer",
"icon": "layers",
"context": [
{
"type": [
"AlarmTable"
],
"output": [
{
"operation": "evaluate",
"input": {
"code": {
"expression": "osp.widgets('Lo-_-jGf').activateLayer('root.layers.alarms')"
}
}
}
]
}
]
},
{
"label": "Hide points layer",
"icon": "layers_clear",
"context": [
{
"type": [
"AlarmTable"
],
"output": [
{
"operation": "evaluate",
"input": {
"code": {
"expression": "osp.widgets('Lo-_-jGf').deactivateLayer('root.layers.alarms')"
}
}
}
]
}
]
},
{
"label": "Copy click coordinates",
"icon": "content_copy",
"context": [
{
"type": [
"Maps"
],
"scopes": [
"Click"
],
"outputExecution": "Sequential",
"output": [
{
"operation": "copy",
"input": {
"content": {
"expression": "map.point.lngLat.lng.toFixed(6) + ', ' + map.point.lngLat.lat.toFixed(6)"
}
}
},
{
"operation": "snackbar",
"input": {
"message": {
"expression": "'Coordinates copied to clipboard'"
},
"variant": {
"expression": "'success'"
}
}
}
]
}
]
}
]
}
In the dashboard.view add a widget type AlarmTable and another Maps. Here they are contained in a BoxLayout :
root/dashboard.view
{
"configuration": [
{
"type": "BoxLayout",
"id": "maps_with_toolbar",
"title": "",
"boxLayoutWidgetSettings": {
"orientation": "Vertical",
"components": [
{
"component": {
"type": "AlarmTable",
"id": "b",
"title": "Alarm table widget example",
"menuReferences": [
"root.maps.menus"
],
"alarmWidgetSettings": {
"defaultFilter": "root.alarms.filters.all",
"defaultView": "root.alarms.views.default",
"resizeMode": "widget",
"disableFilterUpdate": false,
"disableToolbar": false,
"enableAutomaticRefresh": true,
"disableToolbarTableRefresh": false,
"disableToolbarTableAutoRefresh": false,
"disableToolbarJournal": false,
"disableToolbarColumnShowHide": false,
"disableToolbarFilterShowHide": false,
"disableToolbarSummaryShowHide": false,
"disableToolbarSearch": false,
"disableToolbarColumnChooser": false,
"disableToolbarClearFilter": false
}
},
"size": 0.5
},
{
"component": {
"id": "Lo-_-jGf",
"type": "Maps",
"title": "",
"menuReferences": ["root.maps.menus"],
"mapsWidgetSettings": {
"layerOptions": [
{
"layerId": "root.layers.points",
"activatedByDefault": true
}
],
"mapStyle": {
"dark": "mapbox://styles/mapbox/dark-v11",
"light": "mapbox://styles/mapbox/light-v11"
},
"centerPosition": [
7.153656,
46.80603
],
"zoomLevel": 9
}
},
"size": 0.5
}
]
}
}
],
"layout": {
"lg": [
{
"w": 12,
"h": 6,
"x": 0,
"y": 0,
"i": "maps_with_toolbar"
}
]
},
"breakpoints": {
"lg": 1200,
"md": 996,
"sm": 768,
"xs": 480,
"xxs": 0
},
"cols": {
"lg": 12,
"md": 10,
"sm": 6,
"xs": 4,
"xxs": 2
},
"rowHeight": 150
}
The dashboard contains only a description of you dashboard :
root/dashboard.web
{
"moduleId": "modules.web.web-1",
"title": "Map context usage",
"description": "Example showing map widget context actions",
"tags": []
}