On this page
Constructors
Properties
Methods

Class CubemapLayerMaptiler

Interface for custom style layers. This is a specification for implementers to model: it is not an exported method or class.

Custom layers allow a user to render directly into the map's GL context using the map's camera. These layers can be added between any regular layers using Map.addLayer.

Custom layers must have a unique id and must have the type of "custom". They must implement render and may implement prerender, onAdd and onRemove. They can trigger rendering using Map.triggerRepaint and they should appropriately handle MapContextEvent with webglcontextlost and webglcontextrestored.

The renderingMode property controls whether the layer is treated as a "2d" or "3d" map layer. Use:

  • "renderingMode": "3d" to use the depth buffer and share it with other layers
  • "renderingMode": "2d" to add a layer with no depth. If you need to use the depth buffer for a "2d" layer you must use an offscreen framebuffer and CustomLayerInterface.prerender

Custom layer implemented as ES6 class

class NullIslandLayer {
    constructor() {
        this.id = 'null-island';
        this.type = 'custom';
        this.renderingMode = '2d';
    }

     onAdd(map: maplibregl.Map, gl: WebGLRenderingContext | WebGL2RenderingContext) {
        const vertexSource = `
        uniform mat4 u_matrix;
        void main() {
            gl_Position = u_matrix * vec4(0.5, 0.5, 0.0, 1.0);
            gl_PointSize = 20.0;
        }`;

        const fragmentSource = `
        void main() {
            fragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }`;

        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexSource);
        gl.compileShader(vertexShader);
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentSource);
        gl.compileShader(fragmentShader);

        this.program = gl.createProgram();
        gl.attachShader(this.program, vertexShader);
        gl.attachShader(this.program, fragmentShader);
        gl.linkProgram(this.program);
    }

    render({
     gl,
     modelViewProjectionMatrix: matrix
     }: {
     gl: WebGLRenderingContext | WebGL2RenderingContext;
     modelViewProjectionMatrix: Float32Array;
     }) {
        gl.useProgram(this.program);
        gl.uniformMatrix4fv(gl.getUniformLocation(this.program, "u_matrix"), false, matrix);
        gl.drawArrays(gl.POINTS, 0, 1);
    }
}

map.on('load', () => {
    map.addLayer(new NullIslandLayer());
});

Implements

Index

Constructors

constructor

Properties

currentFacesDefinitionKey id renderingMode type

Methods

getConfig hide onAdd onRemove prerender render setAnimationActive setCubemap shouldUpdate show updateCubemap updateTexture

Constructors

  • Creates a new instance of CubemapLayer

    Parameters

    • cubemapConfig: true | CubemapLayerConstructorOptions

      Configuration options for the cubemap layer or true to use default options. Can specify faces, preset, path, and color properties to configure the cubemap.

    Returns CubemapLayer

    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. The constructor initializes the cubemap with the provided configuration. It processes the faces definition, sets up background colors, and determines whether to use a cubemap texture based on the provided options.

Properties

currentFacesDefinitionKey: string = ""

The key representing the current faces definition, used to diff / track changes in the cubemap faces.

id: string = "Cubemap 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

  • Hides the cubemap layer by setting its visibility to "none". This method is used to remove the cubemap layer from the map without deleting it.

    Returns void

  • Parameters

    • active: boolean

    Returns void

  • Sets the cubemap for the layer based on the provided definition. This method updates the cubemap faces, background color, and triggers a repaint of the map.

    Parameters

    Returns Promise<void>

    A promise that resolves when the cubemap is set and the map is updated.

    This method checks if the provided cubemap definition has a color, and if so, it updates the background color. It also checks if the faces definition has changed compared to the current one, and if so, it updates the cubemap faces. Finally, it calls updateCubemap to apply the changes and trigger a repaint of the map.

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

    Parameters

    Returns boolean

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

  • Shows the cubemap layer by setting its visibility to "visible". This method is used to make the cubemap layer visible on the map.

    Returns void

  • Updates the cubemap object with the current faces and shader configuration. This method is called when the cubemap faces change or when the layer is initialized.

    Parameters

    • __namedParameters: { facesNeedUpdate: boolean } = ...

    Returns void

    It creates a new Object3D instance with the specified vertex and fragment shaders, attributes, and uniforms. The cubemap will be rendered using this configuration.

  • Updates the cubemap texture with the provided faces. This method is called when the cubemap faces change or when the layer is initialized.

    Parameters

    • gl: WebGLContext

      The WebGL context used for rendering.

    • faces: CubemapFaces

      The cubemap faces to be loaded into the texture.

    Returns void

Was this helpful?
SDK JS
Reference
CubemapLayer