---
title: "CircleLayerSpecification | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Type Alias CircleLayerSpecification

type CircleLayerSpecification \= {  
    [filter](#filter)?: [FilterSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/FilterSpecification/);  
    [id](#id): string;  
    [layout](#layout)?: {  
        "circle-sort-key"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
        visibility?: [VisibilitySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/VisibilitySpecification/);  
    };  
    [maxzoom](#maxzoom)?: number;  
    [metadata](#metadata)?: unknown;  
    [minzoom](#minzoom)?: number;  
    [paint](#paint)?: {  
        "circle-blur"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
        "circle-blur-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "circle-color"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<[ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/)\>;  
        "circle-color-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "circle-opacity"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
        "circle-opacity-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "circle-pitch-alignment"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"map" | "viewport"\>;  
        "circle-pitch-scale"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"map" | "viewport"\>;  
        "circle-radius"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
        "circle-radius-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "circle-stroke-color"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<  
            [ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/),  
        \>;  
        "circle-stroke-color-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "circle-stroke-opacity"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
        "circle-stroke-opacity-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "circle-stroke-width"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
        "circle-stroke-width-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "circle-translate"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<\[number, number\]\>;  
        "circle-translate-anchor"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"map" | "viewport"\>;  
        "circle-translate-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    };  
    [source](#source): string;  
    ["source-layer"](#source-layer)?: string;  
    [type](#type): "circle";  
}

##### Index

### Properties[](#properties)

[filter?](#filter) [id](#id) [layout?](#layout) [maxzoom?](#maxzoom) [metadata?](#metadata) [minzoom?](#minzoom) [paint?](#paint) [source](#source) [source-layer?](#source-layer) [type](#type)

## Properties[](#properties-1)

### `Optional`filter[](#filter)

filter?: [FilterSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/FilterSpecification/)

A expression specifying conditions on source features. Only features that match the filter are displayed. Zoom expressions in filters are only evaluated at integer zoom levels. The `feature-state` expression is not supported in filter expressions.

### id[](#id)

id: string

Unique layer name.

### `Optional`layout[](#layout)

layout?: {  
    "circle-sort-key"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
    visibility?: [VisibilitySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/VisibilitySpecification/);  
}

Layout properties for the layer.

#### Type Declaration

-   ##### `Optional`circle-sort-key?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>
    
    Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
    
-   ##### `Optional`visibility?: [VisibilitySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/VisibilitySpecification/)
    
    Whether this layer is displayed.
    
    #### Default[](#default)
    
    ```typescript
    "visible"
    ```
    

### `Optional`maxzoom[](#maxzoom)

maxzoom?: number

The maximum zoom level for the layer. At zoom levels equal to or greater than the maxzoom, the layer will be hidden.

### `Optional`metadata[](#metadata)

metadata?: unknown

Arbitrary properties useful to track with the layer, but do not influence rendering. Properties should be prefixed to avoid collisions, like 'maplibre:'.

#### Example[](#example)

```json
{"source:comment": "Hydrology FCCODE 460 - Narrow wash"}
```

### `Optional`minzoom[](#minzoom)

minzoom?: number

The minimum zoom level for the layer. At zoom levels less than the minzoom, the layer will be hidden.

### `Optional`paint[](#paint)

paint?: {  
    "circle-blur"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
    "circle-blur-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "circle-color"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<[ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/)\>;  
    "circle-color-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "circle-opacity"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
    "circle-opacity-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "circle-pitch-alignment"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"map" | "viewport"\>;  
    "circle-pitch-scale"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"map" | "viewport"\>;  
    "circle-radius"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
    "circle-radius-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "circle-stroke-color"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<  
        [ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/),  
    \>;  
    "circle-stroke-color-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "circle-stroke-opacity"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
    "circle-stroke-opacity-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "circle-stroke-width"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
    "circle-stroke-width-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "circle-translate"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<\[number, number\]\>;  
    "circle-translate-anchor"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"map" | "viewport"\>;  
    "circle-translate-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
}

Default paint properties for this layer.

#### Type Declaration

-   ##### `Optional`circle-blur?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>
    
    Amount to blur the circle. 1 blurs the circle such that only the centerpoint is full opacity.
    
-   ##### `Optional`circle-blur-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`circle-color?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<[ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/)\>
    
    The fill color of the circle.
    
    #### Default[](#default-1)
    
    ```typescript
    "#000000"
    ```
    
-   ##### `Optional`circle-color-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`circle-opacity?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>
    
    The opacity at which the circle will be drawn.
    
    #### Default[](#default-2)
    
    ```typescript
    1
    ```
    
-   ##### `Optional`circle-opacity-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`circle-pitch-alignment?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"map" | "viewport"\>
    
    Orientation of circle when map is pitched.
    
    #### Default[](#default-3)
    
    ```typescript
    "viewport"
    ```
    
-   ##### `Optional`circle-pitch-scale?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"map" | "viewport"\>
    
    Controls the scaling behavior of the circle when the map is pitched.
    
    #### Default[](#default-4)
    
    ```typescript
    "map"
    ```
    
-   ##### `Optional`circle-radius?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>
    
    Circle radius.
    
    #### Default[](#default-5)
    
    ```typescript
    5
    ```
    
-   ##### `Optional`circle-radius-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`circle-stroke-color?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<[ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/)\>
    
    The stroke color of the circle.
    
    #### Default[](#default-6)
    
    ```typescript
    "#000000"
    ```
    
-   ##### `Optional`circle-stroke-color-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`circle-stroke-opacity?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>
    
    The opacity of the circle's stroke.
    
    #### Default[](#default-7)
    
    ```typescript
    1
    ```
    
-   ##### `Optional`circle-stroke-opacity-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`circle-stroke-width?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>
    
    The width of the circle's stroke. Strokes are placed outside of the `circle-radius`.
    
-   ##### `Optional`circle-stroke-width-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`circle-translate?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<\[number, number\]\>
    
    The geometry's offset. Values are `[x, y]` where negatives indicate left and up, respectively.
    
    #### Default[](#default-8)
    
    ```json
    [0, 0]
    ```
    
-   ##### `Optional`circle-translate-anchor?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"map" | "viewport"\>
    
    Controls the frame of reference for `circle-translate`.
    
    #### Default[](#default-9)
    
    ```typescript
    "map"
    ```
    
-   ##### `Optional`circle-translate-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    

### source[](#source)

source: string

Name of a source description to be used for this layer. Required for all layer types except `background`.

### `Optional`source-layer[](#source-layer)

"source-layer"?: string

Layer to use from a vector tile source. Required for vector tile sources; prohibited for all other source types, including GeoJSON sources.

### type[](#type)

type: "circle"