Display standard points on map¶

Prerequisites¶

Modules

External

A MapBox account see https://docs.mapbox.com/help/tutorials/get-started-tokens-api/

Checkout branches

git checkout origin/osp-maps-configuration .
git checkout origin/osp-web-configuration .
git checkout origin/osp-variables-configuration .
git checkout origin/osp-scripts-configuration .

Note

The example can be checkout from any OnSphere :

git checkout origin/example-maps-display-standard .

Objectives¶

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 is actually able to let the user display GeoJson information on a map. Those geometry are declared inside a geo.maps file. Once the geometry is declared it will be assigned to every values under it until another geo.maps file is found. To display those geometrical information you will need to declare 3 files :

layers.web
layers.maps
layers.ospp.

The layers.ospp file is the one that interests us the most. Inside it you will declare the type of layer you want. Its content will be similar to something like this :

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

Configuration structure¶

Steps¶

Warning

In the following example there is a token from MapBox you have to change. This token has to be set inside the module.maps file. This token can be created following this link (you need an MapBox account) https://docs.mapbox.com/help/tutorials/get-started-tokens-api/ .

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": "",
    "content": {
        "valueType": "POINT",
        "layerType": "STANDARD",
        "linkedValues": [
            {
                "id": "root.site.bulle.value.variable"
            },
            {
                "id": "root.site.lausanne.value.variable"
            }
        ]
    }
}

root/layers/alarms/layer.web

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