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

type HillshadeLayerSpecification \= {  
    [filter](#filter)?: [FilterSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/FilterSpecification/);  
    [id](#id): string;  
    [layout](#layout)?: { visibility?: [VisibilitySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/VisibilitySpecification/) };  
    [maxzoom](#maxzoom)?: number;  
    [metadata](#metadata)?: unknown;  
    [minzoom](#minzoom)?: number;  
    [paint](#paint)?: {  
        "hillshade-accent-color"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
            [ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/),  
        \>;  
        "hillshade-accent-color-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "hillshade-exaggeration"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<number\>;  
        "hillshade-exaggeration-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "hillshade-highlight-color"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
            [ColorArraySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorArraySpecification/),  
        \>;  
        "hillshade-highlight-color-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "hillshade-illumination-altitude"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
            [NumberArraySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/NumberArraySpecification/),  
        \>;  
        "hillshade-illumination-anchor"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
            "map"  
            | "viewport",  
        \>;  
        "hillshade-illumination-direction"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
            [NumberArraySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/NumberArraySpecification/),  
        \>;  
        "hillshade-method"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
            "standard"  
            | "basic"  
            | "combined"  
            | "igor"  
            | "multidirectional",  
        \>;  
        "hillshade-shadow-color"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
            [ColorArraySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorArraySpecification/),  
        \>;  
        "hillshade-shadow-color-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        resampling?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"linear" | "nearest"\>;  
    };  
    [source](#source): string;  
    ["source-layer"](#source-layer)?: string;  
    [type](#type): "hillshade";  
}

##### 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?: { visibility?: [VisibilitySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/VisibilitySpecification/) }

Layout properties for the layer.

#### Type Declaration

-   ##### `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?: {  
    "hillshade-accent-color"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
        [ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/),  
    \>;  
    "hillshade-accent-color-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "hillshade-exaggeration"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<number\>;  
    "hillshade-exaggeration-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "hillshade-highlight-color"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
        [ColorArraySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorArraySpecification/),  
    \>;  
    "hillshade-highlight-color-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "hillshade-illumination-altitude"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
        [NumberArraySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/NumberArraySpecification/),  
    \>;  
    "hillshade-illumination-anchor"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
        "map"  
        | "viewport",  
    \>;  
    "hillshade-illumination-direction"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
        [NumberArraySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/NumberArraySpecification/),  
    \>;  
    "hillshade-method"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
        "standard"  
        | "basic"  
        | "combined"  
        | "igor"  
        | "multidirectional",  
    \>;  
    "hillshade-shadow-color"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
        [ColorArraySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorArraySpecification/),  
    \>;  
    "hillshade-shadow-color-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    resampling?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"linear" | "nearest"\>;  
}

Default paint properties for this layer.

#### Type Declaration

-   ##### `Optional`hillshade-accent-color?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<[ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/)\>
    
    The shading color used to accentuate rugged terrain like sharp cliffs and gorges.
    
    #### Default[](#default-1)
    
    ```typescript
    "#000000"
    ```
    
-   ##### `Optional`hillshade-accent-color-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`hillshade-exaggeration?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<number\>
    
    Intensity of the hillshade
    
    #### Default[](#default-2)
    
    ```typescript
    0.5
    ```
    
-   ##### `Optional`hillshade-exaggeration-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`hillshade-highlight-color?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<[ColorArraySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorArraySpecification/)\>
    
    The shading color of areas that faces towards the light source(s). Only when `hillshade-method` is set to `multidirectional` can you specify multiple light sources.
    
    #### Default[](#default-3)
    
    ```typescript
    "#FFFFFF"
    ```
    
-   ##### `Optional`hillshade-highlight-color-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`hillshade-illumination-altitude?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<[NumberArraySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/NumberArraySpecification/)\>
    
    The altitude of the light source(s) used to generate the hillshading with 0 as sunset and 90 as noon. Only when `hillshade-method` is set to `multidirectional` can you specify multiple light sources.
    
    #### Default[](#default-4)
    
    ```typescript
    45
    ```
    
-   ##### `Optional`hillshade-illumination-anchor?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"map" | "viewport"\>
    
    Direction of light source when map is rotated.
    
    #### Default[](#default-5)
    
    ```typescript
    "viewport"
    ```
    
-   ##### `Optional`hillshade-illumination-direction?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<[NumberArraySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/NumberArraySpecification/)\>
    
    The direction of the light source(s) used to generate the hillshading with 0 as the top of the viewport if `hillshade-illumination-anchor` is set to `viewport` and due north if `hillshade-illumination-anchor` is set to `map`. Only when `hillshade-method` is set to `multidirectional` can you specify multiple light sources.
    
    #### Default[](#default-6)
    
    ```typescript
    335
    ```
    
-   ##### `Optional`hillshade-method?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
        "standard"  
        | "basic"  
        | "combined"  
        | "igor"  
        | "multidirectional",  
    \>
    
    The hillshade algorithm to use, one of `standard`, `basic`, `combined`, `igor`, or `multidirectional`. ![Visual comparison of standard, basic, igor, combined, and multidirectional hillshade-method](https://docs.maptiler.com/assets/tsdocs/hillshade_methods.png)
    
    #### Default[](#default-7)
    
    ```typescript
    "standard"
    ```
    
-   ##### `Optional`hillshade-shadow-color?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<[ColorArraySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorArraySpecification/)\>
    
    The shading color of areas that face away from the light source(s). Only when `hillshade-method` is set to `multidirectional` can you specify multiple light sources.
    
    #### Default[](#default-8)
    
    ```typescript
    "#000000"
    ```
    
-   ##### `Optional`hillshade-shadow-color-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`resampling?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<"linear" | "nearest"\>
    
    The resampling/interpolation method to use for overscaling, also known as texture magnification filter. ![Visual comparison of linear resampling versus nearest resampling](https://docs.maptiler.com/assets/tsdocs/resampling.png)
    
    #### Default[](#default-9)
    
    ```typescript
    "linear"
    ```
    

### 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: "hillshade"