Layer Configuration

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

This layer configuration format can be used across the Foursquare Studio Platform:

Platform API	Description
`addLayer`	JavaScript Map SDK function that adds a new layer to a map in web applications.
`add_layer()`	Python Map SDK function that adds a new layer to a map in Jupyter Notebooks.
`config.visState.layers`	Field in the Studio 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"
  }
}