---
title: "RadialGradientLayer | 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.

# Class RadialGradientLayer`Maptiler`

A custom map layer that renders a radial gradient effect, typically used as a halo around a globe. This layer uses WebGL for rendering and provides animation capabilities.

The layer is implemented as a 3D custom layer that renders a billboard quad with a radial gradient shader. The gradient can be configured with multiple color stops and can be animated.

#### Example[](#example)

```typescript
// Create a simple halo layer with default settings
const haloLayer = new RadialGradientLayer(true);
map.addLayer(haloLayer);

// Create a customized halo layer
const customHalo = new RadialGradientLayer({
  scale: 1.5,
  stops: [
    [0, "rgba(255, 255, 255, 0.8)"],
    [1, "rgba(255, 255, 255, 0)"]
  ]
});
map.addLayer(customHalo);
```

#### Remarks[](#remarks)

You shouldn't have to use this class directly. Instead, use the `Map.setHalo` method to create and add a halo layer to the map.

#### Implements

-   [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/)

##### Index

### Constructors[](#constructors)

[constructor](#constructor)

### Properties[](#properties)

[id](#id) [renderingMode](#renderingmode) [type](#type)

### Methods[](#methods)

[getConfig](#getconfig) [hide](#hide) [onAdd](#onadd) [onRemove](#onremove) [prerender](#prerender) [render](#render) [setAnimationActive](#setanimationactive) [setGradient](#setgradient) [shouldUpdate](#shouldupdate) [show](#show)

## Constructors[](#constructors-1)

### `Maptiler`constructor[](#constructor)

-   new RadialGradientLayer(  
        gradient: boolean | [GradientDefinition](https://docs.maptiler.com/sdk-js/api-reference/types/GradientDefinition/),  
    ): RadialGradientLayer[](#constructorradialgradientlayer)
    
    Creates a new RadialGradientLayer instance.
    
    #### Parameters
    
    -   gradient: boolean | [GradientDefinition](https://docs.maptiler.com/sdk-js/api-reference/types/GradientDefinition/)
        
        Configuration options for the radial gradient or a boolean value. If a boolean is provided, default configuration options will be used. If an `RadialGradientLayerConstructorOptions` is provided, it will be merged with default options.
        
    
    #### Returns RadialGradientLayer
    

## Properties[](#properties-1)

### `Maptiler`id[](#id)

id: string = "Halo Layer"

A unique layer id.

Implementation of [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/).[id](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/#id)

### `Maptiler`renderingMode[](#renderingmode)

renderingMode: "2d" | "3d" | undefined = "3d"

Either `"2d"` or `"3d"`. Defaults to `"2d"`.

Implementation of [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/).[renderingMode](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/#renderingmode)

### `Maptiler`type[](#type)

type: "custom"

The layer's type. Must be `"custom"`.

Implementation of [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/).[type](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/#type)

## Methods[](#methods-1)

### `Maptiler`getConfig[](#getconfig)

-   getConfig(): [GradientDefinition](https://docs.maptiler.com/sdk-js/api-reference/types/GradientDefinition/)[](#getconfig-1)
    
    Returns the current gradient configuration of the radial gradient layer.
    
    #### Returns [GradientDefinition](https://docs.maptiler.com/sdk-js/api-reference/types/GradientDefinition/)
    
    The current gradient configuration.
    

### `Maptiler`hide[](#hide)

-   hide(): void[](#hide-1)
    
    #### Returns void
    

### `Maptiler`onAdd[](#onadd)

-   onAdd(map: [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/), gl: [WebGLRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGLRenderingContext/) | [WebGL2RenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGL2RenderingContext/)): void[](#onadd-1)
    
    Adds the radial gradient layer to the specified map. This method is called by the map when the layer is added to it.
    
    #### Parameters
    
    -   map: [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)
        
        The MapSDK instance to which this layer is being added
        
    -   gl: [WebGLRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGLRenderingContext/) | [WebGL2RenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGL2RenderingContext/)
        
        The WebGL rendering context used for rendering the layer
        
    
    #### Returns void
    
    void
    
    Implementation of [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/).[onAdd](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/#onadd)
    

### `Maptiler`onRemove[](#onremove)

-   onRemove(\_map: [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/), gl: [WebGLRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGLRenderingContext/) | [WebGL2RenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGL2RenderingContext/)): void[](#onremove-1)
    
    Optional method called when the layer has been removed from the Map with [Map.removeLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#removelayer). This gives the layer a chance to clean up gl resources and event listeners.
    
    #### Parameters
    
    -   \_map: [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)
    -   gl: [WebGLRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGLRenderingContext/) | [WebGL2RenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGL2RenderingContext/)
        
        The gl context for the map.
        
    
    #### Returns void
    
    Implementation of [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/).[onRemove](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/#onremove)
    

### `Maptiler`prerender[](#prerender)

-   prerender(  
        \_gl: [WebGLRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGLRenderingContext/) | [WebGL2RenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGL2RenderingContext/),  
        \_options: [CustomRenderMethodInput](https://docs.maptiler.com/sdk-js/api-reference/types/CustomRenderMethodInput/),  
    ): void[](#prerender-1)
    
    Optional method called during a render frame to allow a layer to prepare resources or render into a texture.
    
    The layer cannot make any assumptions about the current GL state and must bind a framebuffer before rendering.
    
    #### Parameters
    
    -   \_gl: [WebGLRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGLRenderingContext/) | [WebGL2RenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGL2RenderingContext/)
    -   \_options: [CustomRenderMethodInput](https://docs.maptiler.com/sdk-js/api-reference/types/CustomRenderMethodInput/)
    
    #### Returns void
    
    Implementation of CustomLayerInterface.prerender
    

### `Maptiler`render[](#render)

-   render(  
        gl: [WebGLRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGLRenderingContext/) | [WebGL2RenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGL2RenderingContext/),  
        options: [CustomRenderMethodInput](https://docs.maptiler.com/sdk-js/api-reference/types/CustomRenderMethodInput/),  
    ): void[](#render-1)
    
    Called during a render frame allowing the layer to draw into the GL context.
    
    The layer can assume blending and depth state is set to allow the layer to properly blend and clip other layers. The layer cannot make any other assumptions about the current GL state.
    
    If the layer needs to render to a texture, it should implement the `prerender` method to do this and only use the `render` method for drawing directly into the main framebuffer.
    
    The blend function is set to `gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)`. This expects colors to be provided in premultiplied alpha form where the `r`, `g` and `b` values are already multiplied by the `a` value. If you are unable to provide colors in premultiplied form you may want to change the blend function to `gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA)`.
    
    #### Parameters
    
    -   gl: [WebGLRenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGLRenderingContext/) | [WebGL2RenderingContext](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WebGL2RenderingContext/)
    -   options: [CustomRenderMethodInput](https://docs.maptiler.com/sdk-js/api-reference/types/CustomRenderMethodInput/)
    
    #### Returns void
    
    Implementation of CustomLayerInterface.render
    

### `Maptiler`setAnimationActive[](#setanimationactive)

-   setAnimationActive(active: boolean): void[](#setanimationactive-1)
    
    #### Parameters
    
    -   active: boolean
    
    #### Returns void
    

### `Maptiler`setGradient[](#setgradient)

-   setGradient(gradient: boolean | [GradientDefinition](https://docs.maptiler.com/sdk-js/api-reference/types/GradientDefinition/)): Promise<void\>[](#setgradient-1)
    
    Sets a new gradient for the radial gradient layer and animates the transition.
    
    This method first animates the current gradient out, then updates the gradient property with the new gradient definition, and finally animates the new gradient in.
    
    #### Parameters
    
    -   gradient: boolean | [GradientDefinition](https://docs.maptiler.com/sdk-js/api-reference/types/GradientDefinition/)
        
        The new gradient definition to set for this layer.
        
    
    #### Returns Promise<void\>
    
    A promise that resolves when the new gradient is set and animated in.
    

### `Maptiler`shouldUpdate[](#shouldupdate)

-   shouldUpdate(newSpec?: boolean | [GradientDefinition](https://docs.maptiler.com/sdk-js/api-reference/types/GradientDefinition/)): boolean[](#shouldupdate-1)
    
    Checks if the gradient needs to be updated based on the provided specification.
    
    #### Parameters
    
    -   `Optional`newSpec: boolean | [GradientDefinition](https://docs.maptiler.com/sdk-js/api-reference/types/GradientDefinition/)
    
    #### Returns boolean
    
    True if the gradient needs to be updated, false otherwise.
    

### `Maptiler`show[](#show)

-   show(): void[](#show-1)
    
    #### Returns void