---
title: "LineLayerSpecification | 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 LineLayerSpecification

type LineLayerSpecification \= {  
    [filter](#filter)?: [FilterSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/FilterSpecification/);  
    [id](#id): string;  
    [layout](#layout)?: {  
        "line-cap"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<  
            "butt"  
            | "round"  
            | "square",  
        \>;  
        "line-join"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<  
            "bevel"  
            | "round"  
            | "miter",  
        \>;  
        "line-miter-limit"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
        "line-round-limit"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
        "line-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)?: {  
        "line-blur"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
        "line-blur-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "line-color"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<[ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/)\>;  
        "line-color-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "line-dasharray"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\[\]\>;  
        "line-dasharray-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "line-gap-width"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
        "line-gap-width-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "line-gradient"?: [ExpressionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ExpressionSpecification/);  
        "line-layer-opacity"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<number\>;  
        "line-layer-opacity-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "line-offset"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
        "line-offset-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "line-opacity"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
        "line-opacity-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "line-pattern"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<  
            [ResolvedImageSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ResolvedImageSpecification/),  
        \>;  
        "line-pattern-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "line-translate"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<\[number, number\]\>;  
        "line-translate-anchor"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"map" | "viewport"\>;  
        "line-translate-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "line-width"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
        "line-width-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    };  
    [source](#source): string;  
    ["source-layer"](#source-layer)?: string;  
    [type](#type): "line";  
}

##### 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?: {  
    "line-cap"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<  
        "butt"  
        | "round"  
        | "square",  
    \>;  
    "line-join"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<  
        "bevel"  
        | "round"  
        | "miter",  
    \>;  
    "line-miter-limit"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
    "line-round-limit"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
    "line-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`line-cap?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<"butt" | "round" | "square"\>
    
    The display of line endings.
    
    #### Default[](#default)
    
    ```typescript
    "butt"
    ```
    
-   ##### `Optional`line-join?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<"bevel" | "round" | "miter"\>
    
    The display of lines when joining.
    
    #### Default[](#default-1)
    
    ```typescript
    "miter"
    ```
    
-   ##### `Optional`line-miter-limit?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>
    
    Used to automatically convert miter joins to bevel joins for sharp angles.
    
    #### Default[](#default-2)
    
    ```typescript
    2
    ```
    
-   ##### `Optional`line-round-limit?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>
    
    Used to automatically convert round joins to miter joins for shallow angles.
    
    #### Default[](#default-3)
    
    ```typescript
    1.05
    ```
    
-   ##### `Optional`line-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-4)
    
    ```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?: {  
    "line-blur"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
    "line-blur-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "line-color"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<[ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/)\>;  
    "line-color-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "line-dasharray"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\[\]\>;  
    "line-dasharray-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "line-gap-width"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
    "line-gap-width-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "line-gradient"?: [ExpressionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ExpressionSpecification/);  
    "line-layer-opacity"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<number\>;  
    "line-layer-opacity-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "line-offset"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
    "line-offset-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "line-opacity"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
    "line-opacity-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "line-pattern"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<  
        [ResolvedImageSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ResolvedImageSpecification/),  
    \>;  
    "line-pattern-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "line-translate"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<\[number, number\]\>;  
    "line-translate-anchor"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"map" | "viewport"\>;  
    "line-translate-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "line-width"?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>;  
    "line-width-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
}

Default paint properties for this layer.

#### Type Declaration

-   ##### `Optional`line-blur?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>
    
    Blur applied to the line, in pixels.
    
-   ##### `Optional`line-blur-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`line-color?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<[ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/)\>
    
    The color with which the line will be drawn.
    
    #### Default[](#default-5)
    
    ```typescript
    "#000000"
    ```
    
-   ##### `Optional`line-color-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`line-dasharray?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\[\]\>
    
    Specifies the lengths of the alternating dashes and gaps that form the dash pattern. The lengths are later scaled by the line width. To convert a dash length to pixels, multiply the length by the current line width. GeoJSON sources with `lineMetrics: true` specified won't render dashed lines to the expected scale. Zoom-dependent expressions will be evaluated only at integer zoom levels. The only way to create an array value is using `["literal", [...]]`; arrays cannot be read from or derived from feature properties.
    
-   ##### `Optional`line-dasharray-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`line-gap-width?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>
    
    Draws a line casing outside of a line's actual path. Value indicates the width of the inner gap.
    
-   ##### `Optional`line-gap-width-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`line-gradient?: [ExpressionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ExpressionSpecification/)
    
    Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify `"lineMetrics": true`.
    
-   ##### `Optional`line-layer-opacity?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<number\>
    
    Opacity applied to the layer as a whole. Unlike `line-opacity` and alpha values in `line-color`, which are applied per feature and accumulate where lines overlap, `line-layer-opacity` is applied once so overlapping lines appear as a single surface at the given opacity. When both `line-opacity` and `line-layer-opacity` are set, the per-feature, overlap accumulation is preserved, then layer-opacity composites the result. This property affects only the layer it is set on and cannot be used to composite multiple layers together or control how this layer blends with layers above or below it.
    
    ![line-opacity vs. line-layer-opacity](https://docs.maptiler.com/assets/tsdocs/line-layer-opacity.svg)
    
    #### Default[](#default-6)
    
    ```typescript
    1
    ```
    
-   ##### `Optional`line-layer-opacity-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`line-offset?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>
    
    The line's offset. For linear features, a positive value offsets the line to the right, relative to the direction of the line, and a negative value to the left. For polygon features, a positive value results in an inset, and a negative value results in an outset.
    
-   ##### `Optional`line-offset-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`line-opacity?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>
    
    The opacity at which the line will be drawn.
    
    #### Default[](#default-7)
    
    ```typescript
    1
    ```
    
-   ##### `Optional`line-opacity-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`line-pattern?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<[ResolvedImageSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ResolvedImageSpecification/)\>
    
    Name of image in sprite to use for drawing image lines. For seamless patterns, image width must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels.
    
-   ##### `Optional`line-pattern-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`line-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`line-translate-anchor?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"map" | "viewport"\>
    
    Controls the frame of reference for `line-translate`.
    
    #### Default[](#default-9)
    
    ```typescript
    "map"
    ```
    
-   ##### `Optional`line-translate-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`line-width?: [DataDrivenPropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/DataDrivenPropertyValueSpecification/)<number\>
    
    Stroke thickness.
    
    #### Default[](#default-10)
    
    ```typescript
    1
    ```
    
-   ##### `Optional`line-width-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: "line"