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:

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:

JavaScript

{
  "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"
  }
}