Display standard points on map

🟢 Beginner

map variable

osp-maps osp-web osp-variables osp-scripts

This example shows how to display standard geographic points on a map dashboard, with values linked to locations and a configurable layer.

• Link values to geographic locations using geo.maps files owned by osp-maps.

• Configure a complete layer with layer.maps, layer.ospp and layer.web files.

• Display the map and its points in a dashboard using the map widget.

• Use scripts and callbacks to control the state of each point’s associated value.

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 .

Learning goals

• How to configure values linked to geo.maps file.

• How to configure a complete layer (the three files layers.web, layers.maps and layers.ospp).

• How to display on a dashboard using the map widget.

Description

The Maps module lets users display GeoJSON support data on a map. Static geographic elements are usually declared inside geo.maps files. Once a geometry is declared, every value below it in the configuration tree inherits it until another geo.maps file is found. Collection-backed and alarm-backed layers can also stream GeoJSON directly instead of inheriting it from geo.maps. To expose a layer, you typically declare three files:

• layer.web

• layer.maps

• layer.ospp

The layer.ospp file is the main one for the examples in this section. It declares the layer type, the value type, and the mapSources used to populate it.

Configuration structure

Steps

Warning

Generate your own Mapbox API token in this example. Place it in module.web file.

1. Create the dashboard

The dashboard is the graphic frontend used to visualize the map.

root/dashboard.view

{
    "configuration": [
      {
        "id": "Lo-_-jGf",
        "type": "Maps",
        "title": "",
        "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
        }
      }
    ],
    "layout": {
      "lg": [
        {
          "w": 12,
          "h": 6,
          "x": 0,
          "y": 0,
          "i": "Lo-_-jGf"
        }
      ]
    },
    "breakpoints": {
      "lg": 1200,
      "md": 996,
      "sm": 768,
      "xs": 480,
      "xxs": 0
    },
    "cols": {
      "lg": 12,
      "md": 10,
      "sm": 6,
      "xs": 4,
      "xxs": 2
    },
    "rowHeight": 150
  }
  

root/dashboard.web

{
    "moduleId": "modules.web.web-1",
    "title": "Home",
    "description": "OnSphere home",
    "tags": []
}

2. Create the different sites with their alarms and their geo.maps file

root/site/bulle/geo.maps

{
    "geoJsonString": {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [7.0567, 46.6195, 450]
        },
        "properties": {
          "name": "Bulle city",
          "label": {"name": "Bulle","text-color": "#F0FFFF", "text-anchor": "bottom"}
        }
      },
      
    "moduleId": "modules.maps.maps-1"
}

root/site/lausanne/geo.maps

{
    "geoJsonString": {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [6.633597, 46.519962, 250]
        },
        "properties": {
          "name": "Lausanne",
          "label": {"name": "Lausanne","text-color": "#800080", "text-anchor": "bottom"}
        }
      },
      
    "moduleId": "modules.maps.maps-1"
}

1. Configure the layer

root/layers/alarms/layer.maps

{
    "moduleId": "modules.maps.maps-1"
}

root/layers/alarms/layer.ospp

Note

In this example we point our clicks to a root.alarmGenerator dashboard that let’s you test alarms displayed on the map by generating or changing some. It is optional.

{
    "name": "Example points layer",
    "description": "",
    "layerType": "STANDARD",
    "valueType": "POINT",
    "mapSources": [
        {
            "type": "STATIC",
            "linkedValues": [
                "root.site.bulle.value.variable",
                "root.site.lausanne.value.variable"
            ]
        }
    ]
}

root/layers/alarms/layer.web

{
    "moduleId": "modules.web.web-1"
}