Display icons points on map

🟢 Beginner

map variable

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

This example shows how to configure icons, in geo.maps, layers.ospp and dashboard.view files.

Declare an ICON layer with linked values and supported icon names in layer.ospp.
Configure static icons via icon-image and dynamic icons via icons with visibleExpression in geo.maps files.
Register icon assets through module.resources and reference them with icons and iconPriority in the dashboard view.
Display the result: icons appear on the map and switch dynamically based on live value states.

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-display-icons .

Prerequisites

See Get an API token to show Mapbox widget.

Learning goals

How to configure an ICON layer.
How to configure static and dynamic icons in geo.map files.
How to display icons 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.

Steps

Warning

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

1. Create icon layer

The first thing to declare an ICON layer is the list of values linked to this layer. In the new format those ids are stored in mapSources[0].linkedValues of the STATIC source.

In this example, we link the following values:

root.site.bulle.value.maintenance
root.site.bulle.value.fire
root.site.lausanne.value.maintenance
root.site.poi

Each of the value announced looks for the closest geo.maps file to display it as an icon.

The next step is to announce which icons the layer will support:

fire to display flames on a geographic location
maintenance to display maintenance on a site
poi to show a point of interest

The final layer.ospp file looks as follows:

root/layers/icons/layer.ospp

{
    "name": "Icons layer",
    "description": "",
    "layerType": "ICON",
    "valueType": "POINT",
    "icons": ["maintenance", "fire", "poi"],
    "mapSources": [
        {
            "type": "STATIC",
            "linkedValues": [
                "root.site.bulle.value.maintenance",
                "root.site.bulle.value.fire",
                "root.site.lausanne.value.maintenance",
                "root.site.poi"
            ]
        }
    ]
}

Linked files layer.maps and layer.web looks as follows:

root/layers/icons/layer.maps

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

root/layers/icons/layer.web

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

2. Create the different sites with their icons with their `geo.maps` file

To shows icons on the map, we first define a point of interest using the poi icon. For static image, we use icon-image property.

root/site/poi/geo.maps

{
    "moduleId": "modules.maps.maps-1",
    "geoJsonString": {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                7.112513501074773,
                46.81264309217151
            ]
        },
        "properties": {
            "name": "SDN Office",
            "label": {
                "name": "SDN SA",
                "text-anchor": "bottom"
            },
            "icon-image": "poi"
        }
    }
}

For the dynamic icons, we use the icons property. For each icons key announced, we must provide a visibleExpression used to decide which icon to show. The visibleExpression is evaluated at runtime.

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"},
          "icons": {
            "maintenance": {
              "visibleExpression": "!!${root.site.bulle.value.maintenance}"
            },
            "fire": {
              "visibleExpression": "!!${root.site.bulle.value.fire}"
            }
          }
        }
      },
      
    "moduleId": "modules.maps.maps-1"
}

In the case of Bulle site, we have two icons that might be displayed based on values:

maintenance icon when root.site.bulle.value.maintenance value evaluates to true
fire icon when root.site.bulle.value.fire value evaluates to true

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"},
          "icons": {
            "maintenance": {
              "visibleExpression": "!!${root.site.lausanne.value.maintenance}"
            }
          }
        }
      },
      
    "moduleId": "modules.maps.maps-1"
}

In the case of Lausanne site, we have one icon that might be displayed based on values:

maintenance icon when root.site.lausanne.value.maintenance value evaluates to true

3. Configure the dashboard

To display the dashboard, we add all assets in module.resources for osp-web module.

modules/web/web-1/module.resources

{
    "resources": [
        {
            "destination": "osp/resources/icons/fire.png",
            "source": "root/layers/assets/fire.png"
        },
        {
            "destination": "osp/resources/icons/maintenance.png",
            "source": "root/layers/assets/maintenance.png"
        },
        {
            "destination": "osp/resources/icons/poi.png",
            "source": "root/layers/assets/poi.png"
        }
    ]
}

After adding assets from the module.resources file in the hierarchy (for example root/layers/assets/fire.png), we can use them in the dashboard.view file. We add icons with paths and name as well as iconPriority.

root/dashboard.view

{
  "configuration": [
    {
      "type": "Maps",
      "id": "Lo-_-jGf",
      "title": "",
      "mapsWidgetSettings": {
        "layerOptions": [
          {
            "layerId": "root.layers.icons",
            "activatedByDefault": true
          },
          {
            "layerId": "root.layers.points",
            "activatedByDefault": true
          }
        ],
        "mapStyle": {
          "dark": "mapbox://styles/mapbox/dark-v11",
          "light": "mapbox://styles/mapbox/light-v11"
        },
        "icons": [
          {
            "path": "osp/resources/icons/poi.png",
            "name": "poi"
          },
          {
            "path": "osp/resources/icons/fire.png",
            "name": "fire"
          },
          {
            "path": "osp/resources/icons/maintenance.png",
            "name": "maintenance"
          }
        ],
        "iconPriority": [
          "fire",
          "maintenance",
          "poi"
        ],
        "centerPosition": [
          7.153656,
          46.80603
        ],
        "zoomLevel": 9,
        "maxZoom": 25,
        "minZoom": 0,
        "pitch": 0,
        "minPitch": 0,
        "maxPitch": 85,
        "bearing": 0,
        "disableUrlHistory": false
      }
    },
    {
      "valueSubscriptions": {
        "values": [
          {"id": "root.site.bulle.value.fire", "right": "READ_WRITE"},
          {"id": "root.site.bulle.value.maintenance", "right": "READ_WRITE"},
          {"id": "root.site.lausanne.value.maintenance", "right": "READ_WRITE"}
        ]
      },
      "id": "7tGLXFr7",
      "type": "ValueSubscription",
      "title": ""
    }
  ],
  "layout": {
    "lg": [
      {
        "w": 12,
        "h": 4,
        "x": 0,
        "y": 0,
        "i": "Lo-_-jGf"
      },
      {
        "w": 12,
        "h": 2,
        "x": 0,
        "y": 4,
        "i": "7tGLXFr7"
      }
    ]
  },
  "breakpoints": {
    "lg": 1200,
    "md": 996,
    "sm": 768,
    "xs": 480,
    "xxs": 0
  },
  "cols": {
    "lg": 12,
    "md": 10,
    "sm": 6,
    "xs": 4,
    "xxs": 2
  },
  "rowHeight": 150
}

4. Result of the example