@scoova/mgl 1.0.0

package/src/style/style_glyph.ts

@@ -0,0 +1,25 @@
+import type {AlphaImage} from '../util/image';
+
+/**
+ * Some metices related to a glyph
+ */
+export type GlyphMetrics = {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    advance: number;
+    /**
+     * isDoubleResolution = true for 48px textures
+     */
+    isDoubleResolution?: boolean;
+};
+
+/**
+ * A style glyph type
+ */
+export type StyleGlyph = {
+    id: number;
+    bitmap: AlphaImage;
+    metrics: GlyphMetrics;
+};

package/src/style/style_image.ts

@@ -0,0 +1,188 @@
+import {RGBAImage} from '../util/image';
+
+import type {Map} from '../ui/map';
+
+export type SpriteJSON = {[id: string]: StyleImageMetadata & {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};}
+
+/**
+ * The sprite data
+ */
+export type SpriteOnDemandStyleImage = {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    context: CanvasRenderingContext2D;
+};
+
+/**
+ * The style's image metadata
+ */
+export type StyleImageData = {
+    data: RGBAImage;
+    version?: number;
+    hasRenderCallback?: boolean;
+    userImage?: StyleImageInterface;
+    spriteData?: SpriteOnDemandStyleImage;
+};
+
+/**
+ * Enumeration of possible values for StyleImageMetadata.textFitWidth and textFitHeight.
+ */
+export const enum TextFit {
+    /**
+     * The image will be resized on the specified axis to tightly fit the content rectangle to target text.
+     * This is the same as not being defined.
+     */
+    stretchOrShrink = 'stretchOrShrink',
+    /**
+     * The image will be resized on the specified axis to fit the content rectangle to the target text, but will not
+     * fall below the aspect ratio of the original content rectangle if the other axis is set to proportional.
+     */
+    stretchOnly = 'stretchOnly',
+    /**
+     * The image will be resized on the specified axis to fit the content rectangle to the target text and
+     * will resize the other axis to maintain the aspect ratio of the content rectangle.
+     */
+    proportional = 'proportional'
+}
+
+/**
+ * The style's image metadata
+ */
+export type StyleImageMetadata = {
+    /**
+     * The ratio of pixels in the image to physical pixels on the screen
+     */
+    pixelRatio: number;
+    /**
+     * Whether the image should be interpreted as an SDF image
+     */
+    sdf: boolean;
+    /**
+     * If `icon-text-fit` is used in a layer with this image, this option defines the part(s) of the image that can be stretched horizontally.
+     */
+    stretchX?: Array<[number, number]>;
+    /**
+     * If `icon-text-fit` is used in a layer with this image, this option defines the part(s) of the image that can be stretched vertically.
+     */
+    stretchY?: Array<[number, number]>;
+    /**
+     * If `icon-text-fit` is used in a layer with this image, this option defines the part of the image that can be covered by the content in `text-field`.
+     */
+    content?: [number, number, number, number];
+    /**
+     * If `icon-text-fit` is used in a layer with this image, this option defines constraints on the horizontal scaling of the image.
+     */
+    textFitWidth?: TextFit;
+    /**
+     * If `icon-text-fit` is used in a layer with this image, this option defines constraints on the vertical scaling of the image.
+     */
+    textFitHeight?: TextFit;
+};
+
+/**
+ * the style's image, including data and metedata
+ */
+export type StyleImage = StyleImageData & StyleImageMetadata;
+
+/**
+ * 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
+ * {@link StyleImageInterface#render} method. The method is called every frame and
+ * can be used to update the image.
+ *
+ * @see [Add an animated icon to the map.](https://maplibre.org/maplibre-gl-js/docs/examples/add-image-animated/)
+ *
+ * @example
+ * ```ts
+ * 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);
+ * ```
+ */
+
+export interface StyleImageInterface {
+    width: number;
+    height: number;
+    data: Uint8Array | Uint8ClampedArray;
+    /**
+     * 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 {@link Map#updateImage} to update
+     * the image instead of implementing this method.
+     *
+     * @returns `true` if this method updated the image. `false` if the image was not changed.
+     */
+    render?: () => boolean;
+    /**
+     * Optional method called when the layer has been added to the Map with {@link Map#addImage}.
+     *
+     * @param map - The Map this custom layer was just added to.
+     */
+    onAdd?: (map: Map, id: string) => void;
+    /**
+     * Optional method called when the icon is removed from the map with {@link Map#removeImage}.
+     * This gives the image a chance to clean up resources and event listeners.
+     */
+    onRemove?: () => void;
+}
+
+export function renderStyleImage(image: StyleImage) {
+    const {userImage} = image;
+    if (userImage && userImage.render) {
+        const updated = userImage.render();
+        if (updated) {
+            image.data.replace(new Uint8Array(userImage.data.buffer));
+            return true;
+        }
+    }
+    return false;
+}

package/src/style/style_layer/background_style_layer.ts

@@ -0,0 +1,17 @@
+import {StyleLayer} from '../style_layer';
+
+import properties, {BackgroundPaintPropsPossiblyEvaluated} from './background_style_layer_properties.g';
+import {Transitionable, Transitioning, PossiblyEvaluated} from '../properties';
+
+import type {BackgroundPaintProps} from './background_style_layer_properties.g';
+import type {LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
+
+export class BackgroundStyleLayer extends StyleLayer {
+    _transitionablePaint: Transitionable<BackgroundPaintProps>;
+    _transitioningPaint: Transitioning<BackgroundPaintProps>;
+    paint: PossiblyEvaluated<BackgroundPaintProps, BackgroundPaintPropsPossiblyEvaluated>;
+
+    constructor(layer: LayerSpecification) {
+        super(layer, properties);
+    }
+}

package/src/style/style_layer/background_style_layer_properties.g.ts

@@ -0,0 +1,40 @@
+// This file is generated. Edit build/generate-style-code.ts, then run 'npm run codegen'.
+/* eslint-disable */
+
+import {latest as styleSpec} from '@maplibre/maplibre-gl-style-spec';
+
+import {
+    Properties,
+    DataConstantProperty,
+    DataDrivenProperty,
+    CrossFadedDataDrivenProperty,
+    CrossFadedProperty,
+    ColorRampProperty,
+    PossiblyEvaluatedPropertyValue,
+    CrossFaded
+} from '../properties';
+
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
+import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
+
+
+export type BackgroundPaintProps = {
+    "background-color": DataConstantProperty<Color>,
+    "background-pattern": CrossFadedProperty<ResolvedImage>,
+    "background-opacity": DataConstantProperty<number>,
+};
+
+export type BackgroundPaintPropsPossiblyEvaluated = {
+    "background-color": Color,
+    "background-pattern": CrossFaded<ResolvedImage>,
+    "background-opacity": number,
+};
+
+let paint: Properties<BackgroundPaintProps>;
+const getPaint = () => paint = paint || new Properties({
+    "background-color": new DataConstantProperty(styleSpec["paint_background"]["background-color"] as any as StylePropertySpecification),
+    "background-pattern": new CrossFadedProperty(styleSpec["paint_background"]["background-pattern"] as any as StylePropertySpecification),
+    "background-opacity": new DataConstantProperty(styleSpec["paint_background"]["background-opacity"] as any as StylePropertySpecification),
+});
+
+export default ({ get paint() { return getPaint() } });

package/src/style/style_layer/circle_style_layer.ts

@@ -0,0 +1,98 @@
+import {StyleLayer} from '../style_layer';
+
+import {CircleBucket} from '../../data/bucket/circle_bucket';
+import {polygonIntersectsBufferedPoint} from '../../util/intersection_tests';
+import {getMaximumPaintValue, translateDistance, translate} from '../query_utils';
+import properties, {CircleLayoutPropsPossiblyEvaluated, CirclePaintPropsPossiblyEvaluated} from './circle_style_layer_properties.g';
+import {Transitionable, Transitioning, Layout, PossiblyEvaluated} from '../properties';
+import {mat4, vec4} from 'gl-matrix';
+import Point from '@mapbox/point-geometry';
+import type {FeatureState, LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
+import type {Transform} from '../../geo/transform';
+import type {Bucket, BucketParameters} from '../../data/bucket';
+import type {CircleLayoutProps, CirclePaintProps} from './circle_style_layer_properties.g';
+import type {VectorTileFeature} from '@mapbox/vector-tile';
+
+/**
+ * A style layer that defines a circle
+ */
+export class CircleStyleLayer extends StyleLayer {
+    _unevaluatedLayout: Layout<CircleLayoutProps>;
+    layout: PossiblyEvaluated<CircleLayoutProps, CircleLayoutPropsPossiblyEvaluated>;
+
+    _transitionablePaint: Transitionable<CirclePaintProps>;
+    _transitioningPaint: Transitioning<CirclePaintProps>;
+    paint: PossiblyEvaluated<CirclePaintProps, CirclePaintPropsPossiblyEvaluated>;
+
+    constructor(layer: LayerSpecification) {
+        super(layer, properties);
+    }
+
+    createBucket(parameters: BucketParameters<any>) {
+        return new CircleBucket(parameters);
+    }
+
+    queryRadius(bucket: Bucket): number {
+        const circleBucket: CircleBucket<CircleStyleLayer> = (bucket as any);
+        return getMaximumPaintValue('circle-radius', this, circleBucket) +
+            getMaximumPaintValue('circle-stroke-width', this, circleBucket) +
+            translateDistance(this.paint.get('circle-translate'));
+    }
+
+    queryIntersectsFeature(
+        queryGeometry: Array<Point>,
+        feature: VectorTileFeature,
+        featureState: FeatureState,
+        geometry: Array<Array<Point>>,
+        zoom: number,
+        transform: Transform,
+        pixelsToTileUnits: number,
+        pixelPosMatrix: mat4
+    ): boolean {
+        const translatedPolygon = translate(queryGeometry,
+            this.paint.get('circle-translate'),
+            this.paint.get('circle-translate-anchor'),
+            transform.angle, pixelsToTileUnits);
+        const radius = this.paint.get('circle-radius').evaluate(feature, featureState);
+        const stroke = this.paint.get('circle-stroke-width').evaluate(feature, featureState);
+        const size  = radius + stroke;
+
+        // For pitch-alignment: map, compare feature geometry to query geometry in the plane of the tile
+        // // Otherwise, compare geometry in the plane of the viewport
+        // // A circle with fixed scaling relative to the viewport gets larger in tile space as it moves into the distance
+        // // A circle with fixed scaling relative to the map gets smaller in viewport space as it moves into the distance
+        const alignWithMap = this.paint.get('circle-pitch-alignment') === 'map';
+        const transformedPolygon = alignWithMap ? translatedPolygon : projectQueryGeometry(translatedPolygon, pixelPosMatrix);
+        const transformedSize = alignWithMap ? size * pixelsToTileUnits : size;
+
+        for (const ring of geometry) {
+            for (const point of ring) {
+
+                const transformedPoint = alignWithMap ? point : projectPoint(point, pixelPosMatrix);
+
+                let adjustedSize = transformedSize;
+                const projectedCenter = vec4.transformMat4([] as any, [point.x, point.y, 0, 1], pixelPosMatrix);
+                if (this.paint.get('circle-pitch-scale') === 'viewport' && this.paint.get('circle-pitch-alignment') === 'map') {
+                    adjustedSize *= projectedCenter[3] / transform.cameraToCenterDistance;
+                } else if (this.paint.get('circle-pitch-scale') === 'map' && this.paint.get('circle-pitch-alignment') === 'viewport') {
+                    adjustedSize *= transform.cameraToCenterDistance / projectedCenter[3];
+                }
+
+                if (polygonIntersectsBufferedPoint(transformedPolygon, transformedPoint, adjustedSize)) return true;
+            }
+        }
+
+        return false;
+    }
+}
+
+function projectPoint(p: Point, pixelPosMatrix: mat4) {
+    const point = vec4.transformMat4([] as any, [p.x, p.y, 0, 1], pixelPosMatrix);
+    return new Point(point[0] / point[3], point[1] / point[3]);
+}
+
+function projectQueryGeometry(queryGeometry: Array<Point>, pixelPosMatrix: mat4) {
+    return queryGeometry.map((p) => {
+        return projectPoint(p, pixelPosMatrix);
+    });
+}

package/src/style/style_layer/circle_style_layer_properties.g.ts

@@ -0,0 +1,76 @@
+// This file is generated. Edit build/generate-style-code.ts, then run 'npm run codegen'.
+/* eslint-disable */
+
+import {latest as styleSpec} from '@maplibre/maplibre-gl-style-spec';
+
+import {
+    Properties,
+    DataConstantProperty,
+    DataDrivenProperty,
+    CrossFadedDataDrivenProperty,
+    CrossFadedProperty,
+    ColorRampProperty,
+    PossiblyEvaluatedPropertyValue,
+    CrossFaded
+} from '../properties';
+
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
+import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
+
+export type CircleLayoutProps = {
+    "circle-sort-key": DataDrivenProperty<number>,
+};
+
+export type CircleLayoutPropsPossiblyEvaluated = {
+    "circle-sort-key": PossiblyEvaluatedPropertyValue<number>,
+};
+
+let layout: Properties<CircleLayoutProps>;
+const getLayout = () => layout = layout || new Properties({
+    "circle-sort-key": new DataDrivenProperty(styleSpec["layout_circle"]["circle-sort-key"] as any as StylePropertySpecification),
+});
+
+export type CirclePaintProps = {
+    "circle-radius": DataDrivenProperty<number>,
+    "circle-color": DataDrivenProperty<Color>,
+    "circle-blur": DataDrivenProperty<number>,
+    "circle-opacity": DataDrivenProperty<number>,
+    "circle-translate": DataConstantProperty<[number, number]>,
+    "circle-translate-anchor": DataConstantProperty<"map" | "viewport">,
+    "circle-pitch-scale": DataConstantProperty<"map" | "viewport">,
+    "circle-pitch-alignment": DataConstantProperty<"map" | "viewport">,
+    "circle-stroke-width": DataDrivenProperty<number>,
+    "circle-stroke-color": DataDrivenProperty<Color>,
+    "circle-stroke-opacity": DataDrivenProperty<number>,
+};
+
+export type CirclePaintPropsPossiblyEvaluated = {
+    "circle-radius": PossiblyEvaluatedPropertyValue<number>,
+    "circle-color": PossiblyEvaluatedPropertyValue<Color>,
+    "circle-blur": PossiblyEvaluatedPropertyValue<number>,
+    "circle-opacity": PossiblyEvaluatedPropertyValue<number>,
+    "circle-translate": [number, number],
+    "circle-translate-anchor": "map" | "viewport",
+    "circle-pitch-scale": "map" | "viewport",
+    "circle-pitch-alignment": "map" | "viewport",
+    "circle-stroke-width": PossiblyEvaluatedPropertyValue<number>,
+    "circle-stroke-color": PossiblyEvaluatedPropertyValue<Color>,
+    "circle-stroke-opacity": PossiblyEvaluatedPropertyValue<number>,
+};
+
+let paint: Properties<CirclePaintProps>;
+const getPaint = () => paint = paint || new Properties({
+    "circle-radius": new DataDrivenProperty(styleSpec["paint_circle"]["circle-radius"] as any as StylePropertySpecification),
+    "circle-color": new DataDrivenProperty(styleSpec["paint_circle"]["circle-color"] as any as StylePropertySpecification),
+    "circle-blur": new DataDrivenProperty(styleSpec["paint_circle"]["circle-blur"] as any as StylePropertySpecification),
+    "circle-opacity": new DataDrivenProperty(styleSpec["paint_circle"]["circle-opacity"] as any as StylePropertySpecification),
+    "circle-translate": new DataConstantProperty(styleSpec["paint_circle"]["circle-translate"] as any as StylePropertySpecification),
+    "circle-translate-anchor": new DataConstantProperty(styleSpec["paint_circle"]["circle-translate-anchor"] as any as StylePropertySpecification),
+    "circle-pitch-scale": new DataConstantProperty(styleSpec["paint_circle"]["circle-pitch-scale"] as any as StylePropertySpecification),
+    "circle-pitch-alignment": new DataConstantProperty(styleSpec["paint_circle"]["circle-pitch-alignment"] as any as StylePropertySpecification),
+    "circle-stroke-width": new DataDrivenProperty(styleSpec["paint_circle"]["circle-stroke-width"] as any as StylePropertySpecification),
+    "circle-stroke-color": new DataDrivenProperty(styleSpec["paint_circle"]["circle-stroke-color"] as any as StylePropertySpecification),
+    "circle-stroke-opacity": new DataDrivenProperty(styleSpec["paint_circle"]["circle-stroke-opacity"] as any as StylePropertySpecification),
+});
+
+export default ({ get paint() { return getPaint() }, get layout() { return getLayout() } });

package/src/style/style_layer/custom_style_layer.ts

@@ -0,0 +1,233 @@
+import {StyleLayer} from '../style_layer';
+import type {Map} from '../../ui/map';
+import {mat4} from 'gl-matrix';
+import {LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
+
+/**
+* Input arguments exposed by custom render function.
+*/
+type CustomRenderMethodInput = {
+    /**
+     * This value represents the distance from the camera to the far clipping plane.
+     * It is used in the calculation of the projection matrix to determine which objects are visible.
+     * farZ should be larger than nearZ.
+     */
+    farZ: number;
+    /**
+     * This value represents the distance from the camera to the near clipping plane.
+     * It is used in the calculation of the projection matrix to determine which objects are visible.
+     * nearZ should be smaller than farZ.
+     */
+    nearZ: number;
+    /** field of view of camera **/
+    fov: number;
+    /**
+    * model view projection matrix
+    * represents the matrix converting from world space to clip space
+    * https://learnopengl.com/Getting-started/Coordinate-Systems
+    * **/
+    modelViewProjectionMatrix: mat4;
+    /**
+    * projection matrix
+    * represents the matrix converting from view space to clip space
+    * https://learnopengl.com/Getting-started/Coordinate-Systems
+    */
+    projectionMatrix: mat4;
+}
+
+/**
+ * @param gl - The map's gl context.
+ * @param matrix - The map's camera matrix. It projects spherical mercator
+ * coordinates to gl clip space coordinates. The spherical mercator coordinate `[0, 0]` represents the
+ * top left corner of the mercator world and `[1, 1]` represents the bottom right corner. When
+ * the `renderingMode` is `"3d"`, the z coordinate is conformal. A box with identical x, y, and z
+ * lengths in mercator units would be rendered as a cube. {@link MercatorCoordinate.fromLngLat}
+ * can be used to project a `LngLat` to a mercator coordinate.
+ * @param options - Argument object with additional render inputs like camera properties.
+ */
+type CustomRenderMethod = (gl: WebGLRenderingContext|WebGL2RenderingContext, matrix: mat4, options: CustomRenderMethodInput) => void;
+
+/**
+ * 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 {@link 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 {@link Map#triggerRepaint}
+ * and they should appropriately handle {@link 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 {@link CustomLayerInterface#prerender}
+ *
+ * @example
+ * Custom layer implemented as ES6 class
+ * ```ts
+ * class NullIslandLayer {
+ *     constructor() {
+ *         this.id = 'null-island';
+ *         this.type = 'custom';
+ *         this.renderingMode = '2d';
+ *     }
+ *
+ *     onAdd(map, gl) {
+ *         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, matrix) {
+ *         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());
+ * });
+ * ```
+ */
+export interface CustomLayerInterface {
+    /**
+     * A unique layer id.
+     */
+    id: string;
+    /**
+     * The layer's type. Must be `"custom"`.
+     */
+    type: 'custom';
+    /**
+     * Either `"2d"` or `"3d"`. Defaults to `"2d"`.
+     */
+    renderingMode?: '2d' | '3d';
+    /**
+     * 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)`.
+     */
+    render: CustomRenderMethod;
+    /**
+     * 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.
+     */
+    prerender?: CustomRenderMethod;
+    /**
+     * Optional method called when the layer has been added to the Map with {@link Map#addLayer}. This
+     * gives the layer a chance to initialize gl resources and register event listeners.
+     *
+     * @param map - The Map this custom layer was just added to.
+     * @param gl - The gl context for the map.
+     */
+    onAdd?(map: Map, gl: WebGLRenderingContext | WebGL2RenderingContext): void;
+    /**
+     * Optional method called when the layer has been removed from the Map with {@link Map#removeLayer}. This
+     * gives the layer a chance to clean up gl resources and event listeners.
+     *
+     * @param map - The Map this custom layer was just added to.
+     * @param gl - The gl context for the map.
+     */
+    onRemove?(map: Map, gl: WebGLRenderingContext | WebGL2RenderingContext): void;
+}
+
+export function validateCustomStyleLayer(layerObject: CustomLayerInterface) {
+    const errors = [];
+    const id = layerObject.id;
+
+    if (id === undefined) {
+        errors.push({
+            message: `layers.${id}: missing required property "id"`
+        });
+    }
+
+    if (layerObject.render === undefined) {
+        errors.push({
+            message: `layers.${id}: missing required method "render"`
+        });
+    }
+
+    if (layerObject.renderingMode &&
+        layerObject.renderingMode !== '2d' &&
+        layerObject.renderingMode !== '3d') {
+        errors.push({
+            message: `layers.${id}: property "renderingMode" must be either "2d" or "3d"`
+        });
+    }
+
+    return errors;
+}
+
+export class CustomStyleLayer extends StyleLayer {
+
+    implementation: CustomLayerInterface;
+
+    constructor(implementation: CustomLayerInterface) {
+        super(implementation, {});
+        this.implementation = implementation;
+    }
+
+    is3D() {
+        return this.implementation.renderingMode === '3d';
+    }
+
+    hasOffscreenPass() {
+        return this.implementation.prerender !== undefined;
+    }
+
+    recalculate() {}
+    updateTransitions() {}
+    hasTransition() { return false; }
+
+    serialize(): LayerSpecification {
+        throw new Error('Custom layers cannot be serialized');
+    }
+
+    onAdd = (map: Map) => {
+        if (this.implementation.onAdd) {
+            this.implementation.onAdd(map, map.painter.context.gl);
+        }
+    };
+
+    onRemove = (map: Map) => {
+        if (this.implementation.onRemove) {
+            this.implementation.onRemove(map, map.painter.context.gl);
+        }
+    };
+}