# Add Layer

Add a new layer to the map.

This function requires the user to supply at least one valid layer configuration object.

### Note:

For Typescript, we recommend using [`addLayerFromConfig()`](https://docs.foursquare.com/developer/docs/studio-map-sdk-layer-functions#addlayerfromconfig).

For Python users, we recommend using [`add_layer_from_config()`](https://docs.foursquare.com/developer/docs/studio-map-sdk-layer-functions#addlayerfromconfig) and specialized layer classes. See [Python layer guide](https://docs.foursquare.com/developer/docs/studio-layers-python).

## JavaScript

```javascript
map.addLayer({
  id: "test-layer-01",
  type: "point",
  dataId: "test-dataset-01",
  label: "New Layer",
  isVisible: true,
  fields: {
    lat: "latitude",
    lng: "longitude",
  },
  config: {
    visualChannels: {
      colorField: {
        name: "cityName",
        type: "string",
      },
      colorScale: "ordinal",
    },
  },
});
```

## Python

```python
map.add_layer(
    LayerCreationProps(
        id="test-layer-01",
        type=LayerType.POINT,
        data_id="test-dataset-01",
        label="New Layer",
        is_visible=True,
        fields={"lat": "latitude", "lng": "longitude"},
        config={
            "visual_channels": {
                "color_field": {"name": "city_name", "type": "string"},
                "color_scale":"ordinal",
            }
        },
    )
)
```

### Arguments

| Argument | Type | Description |
| --- | --- | --- |
| `layer` | `object` | An object containing layer details. |
| `layer.id` | `string` | Unique identifier of the layer. |
| `layer.type` | `string` | Type of the layer. See all available layers in the [LayerType](https://docs.foursquare.com/developer/docs/studio-map-sdk-types#layertype) documentation. |
| `layer.dataId` | `string` | Unique identifier of the dataset this layer visualizes. |
| `layer.fields` | `Record<string, string>` | Dictionary that maps fields that the layer requires for visualization to appropriate dataset fields. |
| `layer.label` | `string` | Canonic label of this layer. |
| `layer.isVisible` | `boolean` | Flag indicating whether layer is visible or not. |
| `layer.config` | [`LayerConfig`](https://docs.foursquare.com/developer/docs/studio-layer-configuration) | JSON layer configuration. |

For more information, including full Python documentation, [see `addLayer()` in the full API reference.](https://docs.foursquare.com/developer/docs/studio-map-sdk-api-reference#addlayer)

# Add Layer From Config

Adds a layer using the specified config. Provides improved typing over `addLayer()`, and can work with JSON objects from the JSON editor for layers directly.

### Note:

Use `addLayerFromConfig()` over [`addLayer()`](https://docs.foursquare.com/developer/docs/studio-map-sdk-layer-functions#add-layer) when working with large, non-trivial layer configurations. For more information, see the full [Python layer guide](https://docs.foursquare.com/developer/docs/studio-layers-python).

## JavaScript

```javascript
map.addLayerFromConfig({
  type: 'point',
  config: {
    dataId: myDataset.id,
    columnMode: 'points',
    columns: {
      lat: 'lat',
      lng: 'lon'
    },
    visConfig: {},
    color: [0, 255, 0],
    textLabel: []
  }
});
```

## Python

```python
map.add_layer_from_config(
  {
    "id": "sample-layer",
    "type": "point",
    "config": {
      "dataId": "sample-data",
      "label": "Sample layer",
      "columnMode": "points",
      "columns": {"lat": "Latitude", "lng": "Longitude"},
      "visConfig": {},
      "color": [0, 255, 0],
      "textLabel": [],
    },
  }
)
```

### Arguments

| Argument | Type | Description |
| --- | --- | --- |
| `layerConfig` | `object` | A layer config. |

For more information, including full Python documentation, [see `addLayerFromConfig()` in the full API reference.](https://docs.foursquare.com/developer/docs/studio-map-sdk-api-reference#addlayerfromconfig)

# Add Layer Group

Add a new layer group to the map.

Layer groups do not impact the visualization itself, and instead serve as folders that organize layers within the sidebar. Assign `layerIds` to be a member of the layer group.

## JavaScript

```javascript
map.addLayerGroup({
  id: "layer-group-1",
  label: "Layer Group 1",
  isVisible: true,
  layerIds: ["layer1", "layer2", "layer3"],
});
```

## Python

```python
map.add_layer_group(LayerGroupCreationProps(
    id="layer-group-1",
    label="Layer Group 1",
    is_visible=True,
    layer_ids=["layer1", "layer2", "layer3"]
))
```

### Arguments

| Argument | Type | Description |
| --- | --- | --- |
| `layerGroup` | `object` | An object containing layer group options. |
| `layerGroup.id` | `string` | Unique identifier of the layer group. |
| `layerGroup.label` | `string` | Canonical label of this group. |
| `layerGroup.isVisible` | `boolean` | Flag indicating whether layer group is visible or not. |
| `layerGroup.layerIds` | `string[]` | Layers referenced by `layerId` that are part of this group, sorted in the order in which they are shown. |

For more information, including full Python documentation, [see `addLayerGroup()` in the full API reference.](https://docs.foursquare.com/developer/docs/studio-map-sdk-api-reference#addlayergroup)

# Get Layer by ID

Retrieve a `Layer` object by passing a valid layer `layerId`.

## JavaScript

```javascript
layer = map.getLayerById("test-layer-01");
```

## Python

```python
layer = map.get_layer_by_id('test-layer-01')
```

### Arguments

| Argument | Type | Description |
| --- | --- | --- |
| `layerId` | `string` | Unique identifier of the layer. |

For more information, including full Python documentation, [see `getLayerById()` in the full API reference.](https://docs.foursquare.com/developer/docs/studio-map-sdk-api-reference#getlayerbyid)

# Get Layer Group by ID

Retrieve a `LayerGroup` object by passing a valid layer group `LayerGroupId`.

## JavaScript

```javascript
layerGroup = map.getLayerGroupById("layer-group-1");
```

## Python

```python
layer_group = map.get_layer_group_by_id("layer-group-1")
```

### Arguments

| Argument | Type | Description |
| --- | --- | --- |
| `layerGroupId` | `string` | Unique identifier of the layer group. |

For more information, including full Python documentation, [see `getLayerGroupById()` in the full API reference.](https://docs.foursquare.com/developer/docs/studio-map-sdk-api-reference#getlayergroupbyid)

# Get Layer Groups

Retrieve all `LayerGroups` present on the map.

## JavaScript

```javascript
layerGroups = map.getLayerGroups();
```

## Python

```python
layer_groups = map.get_layer_groups()
```

For more information, including full Python documentation, [see `getLayerGroups()` in the full API reference.](https://docs.foursquare.com/developer/docs/studio-map-sdk-api-reference#getlayergroups)

# Get Layers

Gets all the `Layers` currently available on the map.

## JavaScript

```javascript
layers = map.getLayers();
```

## Python

```python
layers = map.get_layers()
```

For more information, including full Python documentation, [see `getLayers()` in the full API reference.](https://docs.foursquare.com/developer/docs/studio-map-sdk-api-reference#getlayers)

# Get Layer Timeline

Retrieve the `LayerTimeline` object associated with the map.

## JavaScript

```javascript
layerTimeline = map.getLayerTimeline();
```

## Python

```python
layer_timeline = map.get_layer_timeline()
```

For more information, including full Python documentation, [see `getLayerTimeline()` in the full API reference.](https://docs.foursquare.com/developer/docs/studio-map-sdk-api-reference#getlayertimeline)

# Remove Layer

Remove a layer from the map by passing a valid `layerId`.

## JavaScript

```javascript
map.removeLayer("test-layer-01");
```

## Python

```python
map.remove_layer('test-layer-01')
```

### Arguments

| Argument | Type | Description |
| --- | --- | --- |
| `layerId` | `string` | Unique identifier of the layer to remove. |

For more information, including full Python documentation, [see `removeLayer()` in the full API reference.](https://docs.foursquare.com/developer/docs/studio-map-sdk-api-reference#removelayer)

# Remove Layer Group

Remove a layer group by passing a valid `layerGroupId`.

## JavaScript

```javascript
map.removeLayerGroup("layer-group-1");
```

## Python

```python
map.remove_layer_group("layer-group-1")
```

### Arguments

| Argument | Type | Description |
| --- | --- | --- |
| `layerGroupId` | `string` | Unique identifier of the layer group to remove. |

For more information, including full Python documentation, [see `removeLayerGroup()` in the full API reference.](https://docs.foursquare.com/developer/docs/studio-map-sdk-api-reference#removeLayerGroup)

# Update Layer

Update an existing layer with the given values. Pass the `layerId` to target the layer you wish to update, then provide new `Layer` parameters in a `values` object.

## JavaScript

```javascript
map.updateLayer("test-layer-01", {
  type: "point",
  dataId: "test-dataset-01",
  label: "Updated Layer",
  isVisible: true,
  fields: {
    lat: "latitude",
    lng: "longitude",
    alt: "altitude",
  },
  config: {
    visualChannels: {
      colorField: {
        name: "cityName",
        type: "string",
      },
    },
    visConfig: {
      radius: 10,
      fixedRadius: false,
      opacity: 0.8,
      outline: false,
      thickness: 2,
    },
  },
});
```

## Python

```python
map.update_layer('layer-id', LayerUpdateProps(
    label="My new label"
))
```

### Arguments

| Argument | Type | Description |
| --- | --- | --- |
| `layerId` | `string` | Unique identifier of the layer to update. |
| `layer` | `object` | An object containing layer details. |
| `layer.type` | `string` | Type of the layer. See all available layers in the [LayerType](https://docs.foursquare.com/developer/docs/studio-map-sdk-types#layertype) documentation. |
| `layer.dataId` | `string` | Unique identifier of the dataset this layer visualizes. |
| `layer.fields` | `Record<string, string>` | Dictionary that maps fields that the layer requires for visualization to appropriate dataset fields. |
| `layer.label` | `string` | Canonic label of this layer. |
| `layer.isVisible` | `boolean` | Flag indicating whether layer is visible or not. |
| `layer.config` | [`LayerConfig`](https://docs.foursquare.com/developer/docs/studio-layer-configuration) | JSON layer configuration. |

For more information, including full Python documentation, [see `updateLayer()` in the full API reference.](https://docs.foursquare.com/developer/docs/studio-map-sdk-api-reference#updatelayer)

# Update Layer Group

Update an existing layer group with the given values. Pass the `layerGroupId` to target the layer you wish to update, then provide new `LayerGroup` parameters in a `values` object.

## JavaScript

```javascript
map.updateLayerGroup(
    "layer-group-1",
    {
      id: "layer-group-1",
      label: "Layer Group 1",
      isVisible: false,
      layerIds: ["layer1", "layer2", "layer3"]
    }
);
```

## Python

```python
map.update_layer_group(LayerGroupUpdateProps(
    "layer-group-1",
    label = "New Layer Group 1",
    layers = ["layer1", "layer2"]
))
```

### Arguments

| Argument | Type | Description |
| --- | --- | --- |
| `layerGroupId` | `string` | Unique identifier of the layer group. |
| `layerGroup` | `object` | An object containing layer group options. |
| `layerGroup.label` | `string` | Canonical label of this group. |
| `layerGroup.isVisible` | `boolean` | Flag indicating whether layer group is visible or not. |
| `layerGroup.layerIds` | `string[]` | Layers referenced by `layerId` that are part of this group, sorted in the order in which they are shown. |

For more information, including full Python documentation, [see `updateLayerGroup()` in the full API reference.](https://docs.foursquare.com/developer/docs/studio-map-sdk-api-reference#updatelayergroup)

# Update Layer Timeline

Updates the current layer timeline configuration. Pass `LayerTimeline` parameters in a `values` object.

## JavaScript

```javascript
map.updateLayerTimeline({
  currentTime: 1660637600498,
  isAnimating: true,
  isVisible: true,
  animationSpeed: 1,
  timeFormat: "YYYY-MM-DDTHH:mm:ss",
  timezone: "America/Los_Angeles",
});
```

## Python

```python
map.update_layer_timeline(LayerTimelineUpdateProps(
    current_time=1660637600498,
    is_animating=True,
    is_visible=True,
    animation_speed=1,
    time_format="YYYY-MM-DDTHH:mm:ss",
    timezone="America/Los_Angeles"
))
```

### Arguments

| Argument | Type | Description |
| --- | --- | --- |
| `values` | `object` | An object containing layer timeline settings to pass as an update. |
| `values.currentTime` | `number` | Current time on the timeline in milliseconds. |
| `values.isAnimating` | `boolean` | Flag indicating whether the timeline is animating or not. |
| `values.isVisible` | `boolean` | Flag indicating whether the timeline is visible or not. |
| `values.animationSpeed` | `number` | Speed at which timeline is animating. |
| `values.timeFormat` | `string` | Time format that the timeline is using in [day.js supported format](https://day.js.org/docs/en/display/format). |
| `values.timezone` | `string` | Timezone that the timeline is using in [tz format](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). |

For more information, including full Python documentation, [see `updateLayerTimeline()` in the full API reference.](https://docs.foursquare.com/developer/docs/studio-map-sdk-api-reference#updateLayerTimeline)