On this page
Constructors
Properties
Methods

Class RadialGradientLayerMaptiler

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.

// 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);

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

Index

Constructors

constructor

Properties

id renderingMode type

Methods

getConfig hide onAdd onRemove prerender render setAnimationActive setGradient shouldUpdate show

Constructors

  • Creates a new RadialGradientLayer instance.

    Parameters

    • gradient: boolean | 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

id: string = "Halo Layer"

A unique layer id.

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

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

type: "custom"

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

Methods

  • Returns void

  • 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

    Returns void

  • Parameters

    • active: boolean

    Returns void

  • 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

    Returns Promise<void>

    A promise that resolves when the new gradient is set and animated in.

  • Checks if the gradient needs to be updated based on the provided specification.

    Parameters

    Returns boolean

    True if the gradient needs to be updated, false otherwise.

  • Returns void

Was this helpful?
SDK JS
Reference
RadialGradientLayer