# Layers

### setLayer

Adds a FATOS style layer to the map's style.

```javascript
map.setLayer(layer, beforlayerID);
```

#### Parameter

| Required Parameter | Description                                                                                                                                                                                                      | Type   |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| id                 | A unique identifier that you define.                                                                                                                                                                             | String |
| source             | The data source for the layer. Reference a source that has *already been defined* using the source's unique id.                                                                                                  | String |
| type               | <p>The type of layer (ex. fill or symbol)</p><p>A list of layer types is available in the <a href="https://fatos-doc.fatos.biz/fatos-api/map/map-control/layers/style-specification">Style Specification</a></p> | String |

| Optional Parameter | Description                                                                                                                                                                                                                                                                                           | Type   |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| filter             | An expression specifying conditions on source features. Only features that match the filter are displayed.                                                                                                                                                                                            | Array  |
| minzoom            | The minimum zoom level for the layer.                                                                                                                                                                                                                                                                 | number |
| maxzoom            | The maximum zoom level for the layer.                                                                                                                                                                                                                                                                 | number |
| layout             | <p>Layout properties for the layer. Available layout properties vary by <code>layer.type</code> . <br>A full list of layout properties for each layer type is available in the <a href="https://fatos-doc.fatos.biz/fatos-api/map/map-control/layers/style-specification">Style Specification</a></p> | Object |
| paint              | <p>Paint properties for the layer. Available paint properties vary by <code>layer.type</code> . </p><p>A full list of paint properties for each layer type is available in the <a href="https://fatos-doc.fatos.biz/fatos-api/map/map-control/layers/style-specification">Style Specification</a></p> | Object |
| beforlayerID       | The ID of an existing layer to insert the new layer before, resulting in the new layer appearing visually beneath the existing layer.                                                                                                                                                                 | String |

#### Example

```javascript
map.addLayer({
    id: 'some Layer ID',
    // References the GeoJSON source defined above
    // and does not require a `source-layer`
    source: 'some Source ID',
    //Style Specification
    type: 'symbol',
    layout: {
        // Set the label content to the
        // feature's `name` property
        'text-field': ['get', 'name'] //or String
    }
    paint: {
        'text-color' : '#000000'
    }
});
```

### moveLayer

Moves a layer to a different z-position.

```javascript
map.moveLayer(id, beforlayerID)
```

#### Parameter

| Required Parameter | Description                                                                                                                                | Type   |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | ------ |
| id                 | The ID of the layer to move.                                                                                                               | String |
| beforlayerID       | The ID of an existing layer to insert the new layer before. When viewing the map, the `id` layer will appear beneath the `beforeId` layer. | String |

#### Example

```javascript
map.moveLayer('3d_building-kor', 'landuse');
```

### removeLayer

Removes the layer with the given ID from the map's style.

```javascript
map.removeLayer(id);
```

#### Parameter

| Required Parameter | Description                | Type   |
| ------------------ | -------------------------- | ------ |
| id                 | ID of the layer to remove. | String |

#### Example

```javascript
if (map.getLayer('3d_building-kor')) map.removeLayer('3d_building-kor');
```

### getLayer

Returns the layer with the specified ID in the map's style.

```javascript
map.getLayer(id);
```

#### Parameter

| Required Parameter | Description                 | Type   |
| ------------------ | --------------------------- | ------ |
| id                 | The ID of the layer to get. | String |

#### Example

```javascript
const stateDataLayer = map.getLayer('3d_building-kor');
```

### setFilter

Sets the filter for the specified style layer.

```javascript
map.setFilter(layerId, filter);
```

#### Parameter

| Required Parameter | Description                                                           | Type          |
| ------------------ | --------------------------------------------------------------------- | ------------- |
| layerId            | The ID of the layer to which the filter will be applied.              | String        |
| filter             | Filters control which features a style layer renders from its source. | Array \| null |

#### Example

```javascript
// display only features with the 'name' property 'USA'
map.setFilter('my-layer', ['==', ['get', 'name'], 'USA']);
// remove the filter for the 'my-layer' style layer
map.setFilter('my-layer', null);
```

### getFilter

Returns the filter applied to the specified style layer.

```javascript
map.getFilter(layerId);
```

#### Parameter

| Required Parameter | Description                                    | Type   |
| ------------------ | ---------------------------------------------- | ------ |
| layerId            | The ID of the style layer whose filter to get. | String |

#### Example

```javascript
const filter = map.getFilter('myLayer');
```

### setPaintProperty

Returns the filter applied to the specified style layer.

```javascript
map.setPaintProperty(layerId, name, value);
```

#### Parameter

<table><thead><tr><th>Required Parameter</th><th width="327.3333333333333">Description</th><th>Type</th></tr></thead><tbody><tr><td>layerId</td><td>The ID of the layer to set the paint property in.</td><td>String</td></tr><tr><td>name</td><td>The name of the paint property to set.</td><td>String</td></tr><tr><td>value</td><td>The value of the paint property to set. Must be of a type appropriate for the property</td><td>any</td></tr></tbody></table>

#### Example

```javascript
map.setPaintProperty('my-layer', 'fill-color', '#faafee');
```

### getPaintProperty

Returns the value of a paint property in the specified style layer.

```javascript
map.getPaintProperty(layerId, name);
```

#### Parameter

<table><thead><tr><th>Required Parameter</th><th width="327.3333333333333">Description</th><th>Type</th></tr></thead><tbody><tr><td>layerId</td><td>The ID of the layer to get the paint property from.</td><td>String</td></tr><tr><td>name</td><td>The name of the paint property to set.</td><td>String</td></tr></tbody></table>

#### Example

```javascript
const paintProperty = map.getPaintProperty('mySymbolLayer', 'icon-color');
```

### setLayoutProperty

Sets the value of a layout property in the specified style layer.

```
map.setLayoutProperty(layerId, name, value);
```

#### Parameter

<table><thead><tr><th>Required Parameter</th><th width="327.3333333333333">Description</th><th>Type</th></tr></thead><tbody><tr><td>layerId</td><td>The ID of the layer to set the layout property in.</td><td>String</td></tr><tr><td>name</td><td>The name of the layout property to set.</td><td>String</td></tr><tr><td>value</td><td>The value of the layout property. Must be of a type appropriate for the property</td><td>any</td></tr></tbody></table>

#### Example

```javascript
map.setLayoutProperty('my-layer', 'visibility', 'none');
```

### getLayoutProperty

Returns the value of a layout property in the specified style layer.

```javascript
map.getLayoutProperty(layerId, name);
```

#### Parameter

<table><thead><tr><th>Required Parameter</th><th width="327.3333333333333">Description</th><th>Type</th></tr></thead><tbody><tr><td>layerId</td><td>TThe ID of the layer to get the layout property from.</td><td>String</td></tr><tr><td>name</td><td>The name of the layout property to get.</td><td>String</td></tr></tbody></table>

#### Example

```javascript
const layoutProperty = map.getLayoutProperty('mySymbolLayer', 'icon-anchor');
```