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`](https://docs.foursquare.com/developer/docs/studio-map-sdk-layer-functions#add-layer) | JavaScript Map SDK function that adds a new layer to a map in web applications. |
| [`add_layer()`](https://docs.foursquare.com/developer/docs/studio-map-sdk-layer-functions#add-layer) | Python Map SDK function that adds a new layer to a map in Jupyter Notebooks. |
| [`config.visState.layers`](https://docs.foursquare.com/developer/docs/studio-map-configuration#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

- [3D](https://docs.foursquare.com/developer/docs/studio-layer-reference#3d)
- [Arc](https://docs.foursquare.com/developer/docs/studio-layer-reference#arc)
- [Cluster](https://docs.foursquare.com/developer/docs/studio-layer-reference#cluster)
- [Flow](https://docs.foursquare.com/developer/docs/studio-layer-reference#flow)
- [Geojson](https://docs.foursquare.com/developer/docs/studio-layer-reference#geojsonpolygon)
- [Grid](https://docs.foursquare.com/developer/docs/studio-layer-reference#grid)
- [H3](https://docs.foursquare.com/developer/docs/studio-layer-reference#h3)
- [Heatmap](https://docs.foursquare.com/developer/docs/studio-layer-reference#heatmap)
- [Hexagon](https://docs.foursquare.com/developer/docs/studio-layer-reference#hexagon)
- [Icon](https://docs.foursquare.com/developer/docs/studio-layer-reference#icon)
- [Line](https://docs.foursquare.com/developer/docs/studio-layer-reference#line)
- [Point](https://docs.foursquare.com/developer/docs/studio-layer-reference#point)
- [Raster Tile](https://docs.foursquare.com/developer/docs/studio-layer-reference#raster-tile)
- [S2](https://docs.foursquare.com/developer/docs/studio-layer-reference#s2)
- [Trip](https://docs.foursquare.com/developer/docs/studio-layer-reference#trip)
- [Vector Tile](https://docs.foursquare.com/developer/docs/studio-layer-reference#vector)

## Examples

A point layer specification:

JavaScript

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