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 APIDescription
addLayerJavaScript 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.layersField in the Studio Map Configuration is an array of layers objects following this specification.

Common Fields

SettingTypeDescription
type'point', 'arc', 'line', 'grid', 'hexagon', 'geojson', 'cluster', 'icon', 'heatmap', 'hexagonId', '3D', 'trip', 's2'The type of the layer
idstringIdentifier of the layer
visualChannelsobjectMapping of columns to various layer channels
configobjectMap of table column names to data driven fields. Automatically deduced if not provided.
config.dataIdstringId of dataset visualized by this layer.
config.isVisiblebooleanWhether layer starts out visible.
config.visStateobjectPer layer configuration, see below.
config.colorFieldobject
config.colorScalestring

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

Sign In