Layer Configuration

Unfolded Studio layers can be created programmatically by following the JSON format
specifications on this page.

Note that the Unfolded layer configuration format can be used across the Unfolded Platform:

Platform API

Description

UnfoldedMap.addLayer

JavaScript Map SDK function that adds a new layer to a map in web applications.

unfolded_map.add_layer()

Python Map SDK function that adds a new layer to a map in Jupyter Notebooks.

config.visState.layers

Field in the Unfolded Map Configuration is an array of layers objects following this specification.

Common Fields

Setting

Type

Description

type

'point', 'arc', 'line', 'grid', 'hexagon', 'geojson', 'cluster', 'icon', 'heatmap', 'hexagonId', '3D', 'trip', 's2'

The type of the layer

id

string

Identifier of the layer

visualChannels

object

Mapping of columns to various layer channels

config

object

Map of table column names to data driven fields. Automatically deduced if not provided.

config.dataId

string

Id of dataset visualized by this layer.

config.isVisible

boolean

Whether layer starts out visible.

config.visState

object

Per layer configuration, see below.

config.colorField

object

config.colorScale

string

Remarks:

  • The dataset specified in dataId must represent a valid dataset.

columns

The config.columns map describes which data fields are used by layers for data driven styling.

visualChannels

Each layer defines a number of visual channels.

Layers

Examples

A point layer specification:

{
  "id": "layer_1",
  "type": "point",
  "config": {
    "dataId": "data_1",
    "columns": {
      "lat": "point_lat",
      "lng": "point_lng",
      "altitude": "point_altitude"
    },
    "label": "my point layer",
    "isVisible": true,
    "visState": {
      "radius": 10,
      "opacity": 0.8,
      "colorRange": {
        "name": "Global Warming",
        "type": "sequential",
        "category": "Uber",
        "colors": ["#5A1846", "#900C3F", "#C70039", "#E3611C", "#F1920E", "#FFC300"]
      }
    }
  },
  "visualChannels": {
    "colorField": {
      "name": "value",
      "type": "real"
    },
    "colorScale": "quantile"
  }
}

Did this page help you?