@scoova/mgl 1.0.0

package/src/style/style_layer/fill_extrusion_style_layer.ts

@@ -0,0 +1,224 @@
+import {StyleLayer} from '../style_layer';
+
+import {FillExtrusionBucket} from '../../data/bucket/fill_extrusion_bucket';
+import {polygonIntersectsPolygon, polygonIntersectsMultiPolygon} from '../../util/intersection_tests';
+import {translateDistance, translate} from '../query_utils';
+import properties, {FillExtrusionPaintPropsPossiblyEvaluated} from './fill_extrusion_style_layer_properties.g';
+import {Transitionable, Transitioning, 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 {BucketParameters} from '../../data/bucket';
+import type {FillExtrusionPaintProps} from './fill_extrusion_style_layer_properties.g';
+import type {Transform} from '../../geo/transform';
+import type {VectorTileFeature} from '@mapbox/vector-tile';
+
+export class Point3D extends Point {
+    z: number;
+}
+
+export class FillExtrusionStyleLayer extends StyleLayer {
+    _transitionablePaint: Transitionable<FillExtrusionPaintProps>;
+    _transitioningPaint: Transitioning<FillExtrusionPaintProps>;
+    paint: PossiblyEvaluated<FillExtrusionPaintProps, FillExtrusionPaintPropsPossiblyEvaluated>;
+
+    constructor(layer: LayerSpecification) {
+        super(layer, properties);
+    }
+
+    createBucket(parameters: BucketParameters<FillExtrusionStyleLayer>) {
+        return new FillExtrusionBucket(parameters);
+    }
+
+    queryRadius(): number {
+        return translateDistance(this.paint.get('fill-extrusion-translate'));
+    }
+
+    is3D(): boolean {
+        return true;
+    }
+
+    queryIntersectsFeature(
+        queryGeometry: Array<Point>,
+        feature: VectorTileFeature,
+        featureState: FeatureState,
+        geometry: Array<Array<Point>>,
+        zoom: number,
+        transform: Transform,
+        pixelsToTileUnits: number,
+        pixelPosMatrix: mat4
+    ): boolean | number {
+
+        const translatedPolygon = translate(queryGeometry,
+            this.paint.get('fill-extrusion-translate'),
+            this.paint.get('fill-extrusion-translate-anchor'),
+            transform.angle, pixelsToTileUnits);
+
+        const height = this.paint.get('fill-extrusion-height').evaluate(feature, featureState);
+        const base = this.paint.get('fill-extrusion-base').evaluate(feature, featureState);
+
+        const projectedQueryGeometry = projectQueryGeometry(translatedPolygon, pixelPosMatrix, transform, 0);
+
+        const projected = projectExtrusion(geometry, base, height, pixelPosMatrix);
+        const projectedBase = projected[0];
+        const projectedTop = projected[1];
+        return checkIntersection(projectedBase, projectedTop, projectedQueryGeometry);
+    }
+}
+
+function dot(a, b) {
+    return a.x * b.x + a.y * b.y;
+}
+
+export function getIntersectionDistance(projectedQueryGeometry: Array<Point3D>, projectedFace: Array<Point3D>) {
+
+    if (projectedQueryGeometry.length === 1) {
+        // For point queries calculate the z at which the point intersects the face
+        // using barycentric coordinates.
+
+        // Find the barycentric coordinates of the projected point within the first
+        // triangle of the face, using only the xy plane. It doesn't matter if the
+        // point is outside the first triangle because all the triangles in the face
+        // are in the same plane.
+        //
+        // Check whether points are coincident and use other points if they are.
+        let i = 0;
+        const a = projectedFace[i++];
+        let b;
+        while (!b || a.equals(b)) {
+            b = projectedFace[i++];
+            if (!b) return Infinity;
+        }
+
+        // Loop until point `c` is not colinear with points `a` and `b`.
+        for (; i < projectedFace.length; i++) {
+            const c = projectedFace[i];
+
+            const p = projectedQueryGeometry[0];
+
+            const ab = b.sub(a);
+            const ac = c.sub(a);
+            const ap = p.sub(a);
+
+            const dotABAB = dot(ab, ab);
+            const dotABAC = dot(ab, ac);
+            const dotACAC = dot(ac, ac);
+            const dotAPAB = dot(ap, ab);
+            const dotAPAC = dot(ap, ac);
+            const denom = dotABAB * dotACAC - dotABAC * dotABAC;
+
+            const v = (dotACAC * dotAPAB - dotABAC * dotAPAC) / denom;
+            const w = (dotABAB * dotAPAC - dotABAC * dotAPAB) / denom;
+            const u = 1 - v - w;
+
+            // Use the barycentric weighting along with the original triangle z coordinates to get the point of intersection.
+            const distance = a.z * u + b.z * v + c.z * w;
+
+            if (isFinite(distance)) return distance;
+        }
+
+        return Infinity;
+
+    } else {
+        // The counts as closest is less clear when the query is a box. This
+        // returns the distance to the nearest point on the face, whether it is
+        // within the query or not. It could be more correct to return the
+        // distance to the closest point within the query box but this would be
+        // more complicated and expensive to calculate with little benefit.
+        let closestDistance = Infinity;
+        for (const p of projectedFace) {
+            closestDistance = Math.min(closestDistance, p.z);
+        }
+        return closestDistance;
+    }
+}
+
+function checkIntersection(projectedBase: Array<Array<Point3D>>, projectedTop: Array<Array<Point3D>>, projectedQueryGeometry: Array<Point3D>) {
+    let closestDistance = Infinity;
+
+    if (polygonIntersectsMultiPolygon(projectedQueryGeometry, projectedTop)) {
+        closestDistance = getIntersectionDistance(projectedQueryGeometry, projectedTop[0]);
+    }
+
+    for (let r = 0; r < projectedTop.length; r++) {
+        const ringTop = projectedTop[r];
+        const ringBase = projectedBase[r];
+        for (let p = 0; p < ringTop.length - 1; p++) {
+            const topA = ringTop[p];
+            const topB = ringTop[p + 1];
+            const baseA = ringBase[p];
+            const baseB = ringBase[p + 1];
+            const face = [topA, topB, baseB, baseA, topA];
+            if (polygonIntersectsPolygon(projectedQueryGeometry, face)) {
+                closestDistance = Math.min(closestDistance, getIntersectionDistance(projectedQueryGeometry, face));
+            }
+        }
+    }
+
+    return closestDistance === Infinity ? false : closestDistance;
+}
+
+/*
+ * Project the geometry using matrix `m`. This is essentially doing
+ * `vec4.transformMat4([], [p.x, p.y, z, 1], m)` but the multiplication
+ * is inlined so that parts of the projection that are the same across
+ * different points can only be done once. This produced a measurable
+ * performance improvement.
+ */
+function projectExtrusion(geometry: Array<Array<Point>>, zBase: number, zTop: number, m: mat4): [Array<Array<Point3D>>, Array<Array<Point3D>>] {
+    const projectedBase = [] as Array<Array<Point3D>>;
+    const projectedTop = [] as Array<Array<Point3D>>;
+    const baseXZ = m[8] * zBase;
+    const baseYZ = m[9] * zBase;
+    const baseZZ = m[10] * zBase;
+    const baseWZ = m[11] * zBase;
+    const topXZ = m[8] * zTop;
+    const topYZ = m[9] * zTop;
+    const topZZ = m[10] * zTop;
+    const topWZ = m[11] * zTop;
+
+    for (const r of geometry) {
+        const ringBase = [] as Array<Point3D>;
+        const ringTop = [] as Array<Point3D>;
+        for (const p of r) {
+            const x = p.x;
+            const y = p.y;
+
+            const sX = m[0] * x + m[4] * y + m[12];
+            const sY = m[1] * x + m[5] * y + m[13];
+            const sZ = m[2] * x + m[6] * y + m[14];
+            const sW = m[3] * x + m[7] * y + m[15];
+
+            const baseX = sX + baseXZ;
+            const baseY = sY + baseYZ;
+            const baseZ = sZ + baseZZ;
+            const baseW = sW + baseWZ;
+
+            const topX = sX + topXZ;
+            const topY = sY + topYZ;
+            const topZ = sZ + topZZ;
+            const topW = sW + topWZ;
+
+            const b = new Point(baseX / baseW, baseY / baseW) as Point3D;
+            b.z = baseZ / baseW;
+            ringBase.push(b);
+
+            const t = new Point(topX / topW, topY / topW) as Point3D;
+            t.z = topZ / topW;
+            ringTop.push(t);
+        }
+        projectedBase.push(ringBase);
+        projectedTop.push(ringTop);
+    }
+    return [projectedBase, projectedTop];
+}
+
+function projectQueryGeometry(queryGeometry: Array<Point>, pixelPosMatrix: mat4, transform: Transform, z: number) {
+    const projectedQueryGeometry = [];
+    for (const p of queryGeometry) {
+        const v = [p.x, p.y, z, 1] as vec4;
+        vec4.transformMat4(v, v, pixelPosMatrix);
+        projectedQueryGeometry.push(new Point(v[0] / v[3], v[1] / v[3]));
+    }
+    return projectedQueryGeometry;
+}

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

@@ -0,0 +1,55 @@
+// 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 FillExtrusionPaintProps = {
+    "fill-extrusion-opacity": DataConstantProperty<number>,
+    "fill-extrusion-color": DataDrivenProperty<Color>,
+    "fill-extrusion-translate": DataConstantProperty<[number, number]>,
+    "fill-extrusion-translate-anchor": DataConstantProperty<"map" | "viewport">,
+    "fill-extrusion-pattern": CrossFadedDataDrivenProperty<ResolvedImage>,
+    "fill-extrusion-height": DataDrivenProperty<number>,
+    "fill-extrusion-base": DataDrivenProperty<number>,
+    "fill-extrusion-vertical-gradient": DataConstantProperty<boolean>,
+};
+
+export type FillExtrusionPaintPropsPossiblyEvaluated = {
+    "fill-extrusion-opacity": number,
+    "fill-extrusion-color": PossiblyEvaluatedPropertyValue<Color>,
+    "fill-extrusion-translate": [number, number],
+    "fill-extrusion-translate-anchor": "map" | "viewport",
+    "fill-extrusion-pattern": PossiblyEvaluatedPropertyValue<CrossFaded<ResolvedImage>>,
+    "fill-extrusion-height": PossiblyEvaluatedPropertyValue<number>,
+    "fill-extrusion-base": PossiblyEvaluatedPropertyValue<number>,
+    "fill-extrusion-vertical-gradient": boolean,
+};
+
+let paint: Properties<FillExtrusionPaintProps>;
+const getPaint = () => paint = paint || new Properties({
+    "fill-extrusion-opacity": new DataConstantProperty(styleSpec["paint_fill-extrusion"]["fill-extrusion-opacity"] as any as StylePropertySpecification),
+    "fill-extrusion-color": new DataDrivenProperty(styleSpec["paint_fill-extrusion"]["fill-extrusion-color"] as any as StylePropertySpecification),
+    "fill-extrusion-translate": new DataConstantProperty(styleSpec["paint_fill-extrusion"]["fill-extrusion-translate"] as any as StylePropertySpecification),
+    "fill-extrusion-translate-anchor": new DataConstantProperty(styleSpec["paint_fill-extrusion"]["fill-extrusion-translate-anchor"] as any as StylePropertySpecification),
+    "fill-extrusion-pattern": new CrossFadedDataDrivenProperty(styleSpec["paint_fill-extrusion"]["fill-extrusion-pattern"] as any as StylePropertySpecification),
+    "fill-extrusion-height": new DataDrivenProperty(styleSpec["paint_fill-extrusion"]["fill-extrusion-height"] as any as StylePropertySpecification),
+    "fill-extrusion-base": new DataDrivenProperty(styleSpec["paint_fill-extrusion"]["fill-extrusion-base"] as any as StylePropertySpecification),
+    "fill-extrusion-vertical-gradient": new DataConstantProperty(styleSpec["paint_fill-extrusion"]["fill-extrusion-vertical-gradient"] as any as StylePropertySpecification),
+});
+
+export default ({ get paint() { return getPaint() } });

package/src/style/style_layer/fill_style_layer.test.ts

@@ -0,0 +1,37 @@
+import {getIntersectionDistance, Point3D} from './fill_extrusion_style_layer';
+
+describe('getIntersectionDistance', () => {
+    const queryPoint = [new Point3D(100, 100)];
+    const z = 3;
+    const a = new Point3D(100, -90);
+    const b = new Point3D(110, 110);
+    const c = new Point3D(-110, 110);
+    a.z = z;
+    b.z = z;
+    c.z = z;
+
+    test('one point', () => {
+        const projectedFace = [a, a];
+        expect(getIntersectionDistance(queryPoint, projectedFace)).toBe(Infinity);
+    });
+
+    test('two points', () => {
+        const projectedFace = [a, b, a];
+        expect(getIntersectionDistance(queryPoint, projectedFace)).toBe(Infinity);
+    });
+
+    test('two points coincident', () => {
+        const projectedFace = [a, a, a, b, b, b, b, a];
+        expect(getIntersectionDistance(queryPoint, projectedFace)).toBe(Infinity);
+    });
+
+    test('three points', () => {
+        const projectedFace = [a, b, c, a];
+        expect(getIntersectionDistance(queryPoint, projectedFace)).toBe(z);
+    });
+
+    test('three points coincident points', () => {
+        const projectedFace = [a, a, b, b, b, c, c, a];
+        expect(getIntersectionDistance(queryPoint, projectedFace)).toBe(z);
+    });
+});

package/src/style/style_layer/fill_style_layer.ts

@@ -0,0 +1,65 @@
+import {StyleLayer} from '../style_layer';
+
+import {FillBucket} from '../../data/bucket/fill_bucket';
+import {polygonIntersectsMultiPolygon} from '../../util/intersection_tests';
+import {translateDistance, translate} from '../query_utils';
+import properties, {FillLayoutPropsPossiblyEvaluated, FillPaintPropsPossiblyEvaluated} from './fill_style_layer_properties.g';
+import {Transitionable, Transitioning, Layout, PossiblyEvaluated} from '../properties';
+
+import type {FeatureState, LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
+import type {BucketParameters} from '../../data/bucket';
+import type Point from '@mapbox/point-geometry';
+import type {FillLayoutProps, FillPaintProps} from './fill_style_layer_properties.g';
+import type {EvaluationParameters} from '../evaluation_parameters';
+import type {Transform} from '../../geo/transform';
+import type {VectorTileFeature} from '@mapbox/vector-tile';
+
+export class FillStyleLayer extends StyleLayer {
+    _unevaluatedLayout: Layout<FillLayoutProps>;
+    layout: PossiblyEvaluated<FillLayoutProps, FillLayoutPropsPossiblyEvaluated>;
+
+    _transitionablePaint: Transitionable<FillPaintProps>;
+    _transitioningPaint: Transitioning<FillPaintProps>;
+    paint: PossiblyEvaluated<FillPaintProps, FillPaintPropsPossiblyEvaluated>;
+
+    constructor(layer: LayerSpecification) {
+        super(layer, properties);
+    }
+
+    recalculate(parameters: EvaluationParameters, availableImages: Array<string>) {
+        super.recalculate(parameters, availableImages);
+
+        const outlineColor = this.paint._values['fill-outline-color'];
+        if (outlineColor.value.kind === 'constant' && outlineColor.value.value === undefined) {
+            this.paint._values['fill-outline-color'] = this.paint._values['fill-color'];
+        }
+    }
+
+    createBucket(parameters: BucketParameters<any>) {
+        return new FillBucket(parameters);
+    }
+
+    queryRadius(): number {
+        return translateDistance(this.paint.get('fill-translate'));
+    }
+
+    queryIntersectsFeature(
+        queryGeometry: Array<Point>,
+        feature: VectorTileFeature,
+        featureState: FeatureState,
+        geometry: Array<Array<Point>>,
+        zoom: number,
+        transform: Transform,
+        pixelsToTileUnits: number
+    ): boolean {
+        const translatedPolygon = translate(queryGeometry,
+            this.paint.get('fill-translate'),
+            this.paint.get('fill-translate-anchor'),
+            transform.angle, pixelsToTileUnits);
+        return polygonIntersectsMultiPolygon(translatedPolygon, geometry);
+    }
+
+    isTileClipped() {
+        return true;
+    }
+}

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

@@ -0,0 +1,64 @@
+// 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 FillLayoutProps = {
+    "fill-sort-key": DataDrivenProperty<number>,
+};
+
+export type FillLayoutPropsPossiblyEvaluated = {
+    "fill-sort-key": PossiblyEvaluatedPropertyValue<number>,
+};
+
+let layout: Properties<FillLayoutProps>;
+const getLayout = () => layout = layout || new Properties({
+    "fill-sort-key": new DataDrivenProperty(styleSpec["layout_fill"]["fill-sort-key"] as any as StylePropertySpecification),
+});
+
+export type FillPaintProps = {
+    "fill-antialias": DataConstantProperty<boolean>,
+    "fill-opacity": DataDrivenProperty<number>,
+    "fill-color": DataDrivenProperty<Color>,
+    "fill-outline-color": DataDrivenProperty<Color>,
+    "fill-translate": DataConstantProperty<[number, number]>,
+    "fill-translate-anchor": DataConstantProperty<"map" | "viewport">,
+    "fill-pattern": CrossFadedDataDrivenProperty<ResolvedImage>,
+};
+
+export type FillPaintPropsPossiblyEvaluated = {
+    "fill-antialias": boolean,
+    "fill-opacity": PossiblyEvaluatedPropertyValue<number>,
+    "fill-color": PossiblyEvaluatedPropertyValue<Color>,
+    "fill-outline-color": PossiblyEvaluatedPropertyValue<Color>,
+    "fill-translate": [number, number],
+    "fill-translate-anchor": "map" | "viewport",
+    "fill-pattern": PossiblyEvaluatedPropertyValue<CrossFaded<ResolvedImage>>,
+};
+
+let paint: Properties<FillPaintProps>;
+const getPaint = () => paint = paint || new Properties({
+    "fill-antialias": new DataConstantProperty(styleSpec["paint_fill"]["fill-antialias"] as any as StylePropertySpecification),
+    "fill-opacity": new DataDrivenProperty(styleSpec["paint_fill"]["fill-opacity"] as any as StylePropertySpecification),
+    "fill-color": new DataDrivenProperty(styleSpec["paint_fill"]["fill-color"] as any as StylePropertySpecification),
+    "fill-outline-color": new DataDrivenProperty(styleSpec["paint_fill"]["fill-outline-color"] as any as StylePropertySpecification),
+    "fill-translate": new DataConstantProperty(styleSpec["paint_fill"]["fill-translate"] as any as StylePropertySpecification),
+    "fill-translate-anchor": new DataConstantProperty(styleSpec["paint_fill"]["fill-translate-anchor"] as any as StylePropertySpecification),
+    "fill-pattern": new CrossFadedDataDrivenProperty(styleSpec["paint_fill"]["fill-pattern"] as any as StylePropertySpecification),
+});
+
+export default ({ get paint() { return getPaint() }, get layout() { return getLayout() } });

package/src/style/style_layer/heatmap_style_layer.ts

@@ -0,0 +1,74 @@
+import {StyleLayer} from '../style_layer';
+
+import {HeatmapBucket} from '../../data/bucket/heatmap_bucket';
+import {RGBAImage} from '../../util/image';
+import properties, {HeatmapPaintPropsPossiblyEvaluated} from './heatmap_style_layer_properties.g';
+import {renderColorRamp} from '../../util/color_ramp';
+import {Transitionable, Transitioning, PossiblyEvaluated} from '../properties';
+
+import type {Texture} from '../../render/texture';
+import type {Framebuffer} from '../../gl/framebuffer';
+import type {HeatmapPaintProps} from './heatmap_style_layer_properties.g';
+import type {LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
+
+export const HEATMAP_FULL_RENDER_FBO_KEY = 'big-fb';
+
+/**
+ * A style layer that defines a heatmap
+ */
+export class HeatmapStyleLayer extends StyleLayer {
+
+    heatmapFbos: Map<string, Framebuffer>;
+    colorRamp: RGBAImage;
+    colorRampTexture: Texture;
+
+    _transitionablePaint: Transitionable<HeatmapPaintProps>;
+    _transitioningPaint: Transitioning<HeatmapPaintProps>;
+    paint: PossiblyEvaluated<HeatmapPaintProps, HeatmapPaintPropsPossiblyEvaluated>;
+
+    createBucket(options: any) {
+        return new HeatmapBucket(options);
+    }
+
+    constructor(layer: LayerSpecification) {
+        super(layer, properties);
+
+        this.heatmapFbos = new Map();
+        // make sure color ramp texture is generated for default heatmap color too
+        this._updateColorRamp();
+    }
+
+    _handleSpecialPaintPropertyUpdate(name: string) {
+        if (name === 'heatmap-color') {
+            this._updateColorRamp();
+        }
+    }
+
+    _updateColorRamp() {
+        const expression = this._transitionablePaint._values['heatmap-color'].value.expression;
+        this.colorRamp = renderColorRamp({
+            expression,
+            evaluationKey: 'heatmapDensity',
+            image: this.colorRamp
+        });
+        this.colorRampTexture = null;
+    }
+
+    resize() {
+        if (this.heatmapFbos.has(HEATMAP_FULL_RENDER_FBO_KEY)) {
+            this.heatmapFbos.delete(HEATMAP_FULL_RENDER_FBO_KEY);
+        }
+    }
+
+    queryRadius(): number {
+        return 0;
+    }
+
+    queryIntersectsFeature(): boolean {
+        return false;
+    }
+
+    hasOffscreenPass() {
+        return this.paint.get('heatmap-opacity') !== 0 && this.visibility !== 'none';
+    }
+}

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

@@ -0,0 +1,46 @@
+// 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 HeatmapPaintProps = {
+    "heatmap-radius": DataDrivenProperty<number>,
+    "heatmap-weight": DataDrivenProperty<number>,
+    "heatmap-intensity": DataConstantProperty<number>,
+    "heatmap-color": ColorRampProperty,
+    "heatmap-opacity": DataConstantProperty<number>,
+};
+
+export type HeatmapPaintPropsPossiblyEvaluated = {
+    "heatmap-radius": PossiblyEvaluatedPropertyValue<number>,
+    "heatmap-weight": PossiblyEvaluatedPropertyValue<number>,
+    "heatmap-intensity": number,
+    "heatmap-color": ColorRampProperty,
+    "heatmap-opacity": number,
+};
+
+let paint: Properties<HeatmapPaintProps>;
+const getPaint = () => paint = paint || new Properties({
+    "heatmap-radius": new DataDrivenProperty(styleSpec["paint_heatmap"]["heatmap-radius"] as any as StylePropertySpecification),
+    "heatmap-weight": new DataDrivenProperty(styleSpec["paint_heatmap"]["heatmap-weight"] as any as StylePropertySpecification),
+    "heatmap-intensity": new DataConstantProperty(styleSpec["paint_heatmap"]["heatmap-intensity"] as any as StylePropertySpecification),
+    "heatmap-color": new ColorRampProperty(styleSpec["paint_heatmap"]["heatmap-color"] as any as StylePropertySpecification),
+    "heatmap-opacity": new DataConstantProperty(styleSpec["paint_heatmap"]["heatmap-opacity"] as any as StylePropertySpecification),
+});
+
+export default ({ get paint() { return getPaint() } });

package/src/style/style_layer/hillshade_style_layer.ts

@@ -0,0 +1,21 @@
+import {StyleLayer} from '../style_layer';
+
+import properties, {HillshadePaintPropsPossiblyEvaluated} from './hillshade_style_layer_properties.g';
+import {Transitionable, Transitioning, PossiblyEvaluated} from '../properties';
+
+import type {HillshadePaintProps} from './hillshade_style_layer_properties.g';
+import type {LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
+
+export class HillshadeStyleLayer extends StyleLayer {
+    _transitionablePaint: Transitionable<HillshadePaintProps>;
+    _transitioningPaint: Transitioning<HillshadePaintProps>;
+    paint: PossiblyEvaluated<HillshadePaintProps, HillshadePaintPropsPossiblyEvaluated>;
+
+    constructor(layer: LayerSpecification) {
+        super(layer, properties);
+    }
+
+    hasOffscreenPass() {
+        return this.paint.get('hillshade-exaggeration') !== 0 && this.visibility !== 'none';
+    }
+}

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

@@ -0,0 +1,49 @@
+// 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 HillshadePaintProps = {
+    "hillshade-illumination-direction": DataConstantProperty<number>,
+    "hillshade-illumination-anchor": DataConstantProperty<"map" | "viewport">,
+    "hillshade-exaggeration": DataConstantProperty<number>,
+    "hillshade-shadow-color": DataConstantProperty<Color>,
+    "hillshade-highlight-color": DataConstantProperty<Color>,
+    "hillshade-accent-color": DataConstantProperty<Color>,
+};
+
+export type HillshadePaintPropsPossiblyEvaluated = {
+    "hillshade-illumination-direction": number,
+    "hillshade-illumination-anchor": "map" | "viewport",
+    "hillshade-exaggeration": number,
+    "hillshade-shadow-color": Color,
+    "hillshade-highlight-color": Color,
+    "hillshade-accent-color": Color,
+};
+
+let paint: Properties<HillshadePaintProps>;
+const getPaint = () => paint = paint || new Properties({
+    "hillshade-illumination-direction": new DataConstantProperty(styleSpec["paint_hillshade"]["hillshade-illumination-direction"] as any as StylePropertySpecification),
+    "hillshade-illumination-anchor": new DataConstantProperty(styleSpec["paint_hillshade"]["hillshade-illumination-anchor"] as any as StylePropertySpecification),
+    "hillshade-exaggeration": new DataConstantProperty(styleSpec["paint_hillshade"]["hillshade-exaggeration"] as any as StylePropertySpecification),
+    "hillshade-shadow-color": new DataConstantProperty(styleSpec["paint_hillshade"]["hillshade-shadow-color"] as any as StylePropertySpecification),
+    "hillshade-highlight-color": new DataConstantProperty(styleSpec["paint_hillshade"]["hillshade-highlight-color"] as any as StylePropertySpecification),
+    "hillshade-accent-color": new DataConstantProperty(styleSpec["paint_hillshade"]["hillshade-accent-color"] as any as StylePropertySpecification),
+});
+
+export default ({ get paint() { return getPaint() } });