On this page
Properties

Interface StyleImageInterface

Interface for dynamically generated style images. This is a specification for implementers to model: it is not an exported method or class.

Images implementing this interface can be redrawn for every frame. They can be used to animate icons and patterns or make them respond to user input. Style images can implement a StyleImageInterface.render method. The method is called every frame and can be used to update the image.

Add an animated icon to the map.

let flashingSquare = {
    width: 64,
    height: 64,
    data: new Uint8Array(64 * 64 * 4),

    onAdd: function(map) {
        this.map = map;
    },

    render: function() {
        // keep repainting while the icon is on the map
        this.map.triggerRepaint();

        // alternate between black and white based on the time
        let value = Math.round(Date.now() / 1000) % 2 === 0  ? 255 : 0;

        // check if image needs to be changed
        if (value !== this.previousValue) {
            this.previousValue = value;

            let bytesPerPixel = 4;
            for (let x = 0; x < this.width; x++) {
                for (let y = 0; y < this.height; y++) {
                    let offset = (y * this.width + x) * bytesPerPixel;
                    this.data[offset + 0] = value;
                    this.data[offset + 1] = value;
                    this.data[offset + 2] = value;
                    this.data[offset + 3] = 255;
                }
            }

            // return true to indicate that the image changed
            return true;
        }
    }
 }

 map.addImage('flashing_square', flashingSquare);
interface StyleImageInterface {
    data: Uint8Array<ArrayBufferLike> | Uint8ClampedArray<ArrayBufferLike>;
    height: number;
    onAdd?: (map: MapLibreMap, id: string) => void;
    onRemove?: () => void;
    render?: () => boolean;
    width: number;
}
Index

Properties

data height onAdd? onRemove? render? width

Properties

data: Uint8Array<ArrayBufferLike> | Uint8ClampedArray<ArrayBufferLike>
height: number
onAdd?: (map: MapLibreMap, id: string) => void

Optional method called when the layer has been added to the Map with Map.addImage.

Type Declaration

    • (map: MapLibreMap, id: string): void

    • Parameters

      • map: MapLibreMap

        The Map this custom layer was just added to.

      • id: string

      Returns void

onRemove?: () => void

Optional method called when the icon is removed from the map with Map.removeImage. This gives the image a chance to clean up resources and event listeners.

render?: () => boolean

This method is called once before every frame where the icon will be used. The method can optionally update the image's data member with a new image.

If the method updates the image it must return true to commit the change. If the method returns false or nothing the image is assumed to not have changed.

If updates are infrequent it maybe easier to use Map.updateImage to update the image instead of implementing this method.

Type Declaration

    • (): boolean

    • Returns boolean

      true if this method updated the image. false if the image was not changed.

width: number
Was this helpful?
SDK JS
Reference
StyleImageInterface