maplibre-gl 2.0.4 → 2.1.2

package/src/render/draw_debug.ts

@@ -55,7 +55,7 @@ function drawDebugSSRect(painter: Painter, x: number, y: number, width: number,
     const gl = context.gl;
 
     gl.enable(gl.SCISSOR_TEST);
-    gl.scissor(x * devicePixelRatio, y * devicePixelRatio, width * devicePixelRatio, height * devicePixelRatio);
+    gl.scissor(x * painter.pixelRatio, y * painter.pixelRatio, width * painter.pixelRatio, height * painter.pixelRatio);
     context.clear({color});
     gl.disable(gl.SCISSOR_TEST);
 }

package/src/render/draw_line.ts

@@ -36,8 +36,8 @@ export default function drawLine(painter: Painter, sourceCache: SourceCache, lay
 
     const programId =
         image ? 'linePattern' :
-        dasharray ? 'lineSDF' :
-        gradient ? 'lineGradient' : 'line';
+            dasharray ? 'lineSDF' :
+                gradient ? 'lineGradient' : 'line';
 
     const context = painter.context;
     const gl = context.gl;
@@ -67,8 +67,8 @@ export default function drawLine(painter: Painter, sourceCache: SourceCache, lay
 
         const uniformValues = image ? linePatternUniformValues(painter, tile, layer, crossfade) :
             dasharray ? lineSDFUniformValues(painter, tile, layer, dasharray, crossfade) :
-            gradient ? lineGradientUniformValues(painter, tile, layer, bucket.lineClipsArray.length) :
-            lineUniformValues(painter, tile, layer);
+                gradient ? lineGradientUniformValues(painter, tile, layer, bucket.lineClipsArray.length) :
+                    lineUniformValues(painter, tile, layer);
 
         if (image) {
             context.activeTexture.set(gl.TEXTURE0);

package/src/render/draw_symbol.ts

@@ -34,25 +34,25 @@ import type {CrossTileID, VariableOffset} from '../symbol/placement';
 export default drawSymbols;
 
 type SymbolTileRenderState = {
-  segments: SegmentVector;
-  sortKey: number;
-  state: {
-    program: any;
-    buffers: SymbolBuffers;
-    uniformValues: any;
-    atlasTexture: Texture;
-    atlasTextureIcon: Texture | null;
-    atlasInterpolation: any;
-    atlasInterpolationIcon: any;
-    isSDF: boolean;
-    hasHalo: boolean;
-  };
+    segments: SegmentVector;
+    sortKey: number;
+    state: {
+        program: any;
+        buffers: SymbolBuffers;
+        uniformValues: any;
+        atlasTexture: Texture;
+        atlasTextureIcon: Texture | null;
+        atlasInterpolation: any;
+        atlasInterpolationIcon: any;
+        isSDF: boolean;
+        hasHalo: boolean;
+    };
 };
 
 const identityMat4 = mat4.identity(new Float32Array(16));
 
 function drawSymbols(painter: Painter, sourceCache: SourceCache, layer: SymbolStyleLayer, coords: Array<OverscaledTileID>, variableOffsets: {
-  [_ in CrossTileID]: VariableOffset;
+    [_ in CrossTileID]: VariableOffset;
 }) {
     if (painter.renderPass !== 'translucent') return;
 
@@ -132,13 +132,13 @@ function updateVariableAnchors(coords, painter, layer, sourceCache, rotationAlig
         if (size) {
             const tileScale = Math.pow(2, tr.zoom - tile.tileID.overscaledZ);
             updateVariableAnchorsForBucket(bucket, rotateWithMap, pitchWithMap, variableOffsets, symbolSize,
-                                  tr, labelPlaneMatrix, coord.posMatrix, tileScale, size, updateTextFitIcon);
+                tr, labelPlaneMatrix, coord.posMatrix, tileScale, size, updateTextFitIcon);
         }
     }
 }
 
 function updateVariableAnchorsForBucket(bucket, rotateWithMap, pitchWithMap, variableOffsets, symbolSize,
-                               transform, labelPlaneMatrix, posMatrix, tileScale, size, updateTextFitIcon) {
+    transform, labelPlaneMatrix, posMatrix, tileScale, size, updateTextFitIcon) {
     const placedSymbols = bucket.text.placedSymbolArray;
     const dynamicTextLayoutVertexArray = bucket.text.dynamicLayoutVertexArray;
     const dynamicIconLayoutVertexArray = bucket.icon.dynamicLayoutVertexArray;
@@ -223,7 +223,7 @@ function getSymbolProgramName(isSDF: boolean, isText: boolean, bucket: SymbolBuc
 }
 
 function drawLayerSymbols(painter, sourceCache, layer, coords, isText, translate, translateAnchor,
-                          rotationAlignment, pitchAlignment, keepUpright, stencilMode, colorMode) {
+    rotationAlignment, pitchAlignment, keepUpright, stencilMode, colorMode) {
 
     const context = painter.context;
     const gl = context.gl;
@@ -310,12 +310,12 @@ function drawLayerSymbols(painter, sourceCache, layer, coords, isText, translate
         if (isSDF) {
             if (!bucket.iconsInText) {
                 uniformValues = symbolSDFUniformValues(sizeData.kind,
-                size, rotateInShader, pitchWithMap, painter, matrix,
-                uLabelPlaneMatrix, uglCoordMatrix, isText, texSize, true);
+                    size, rotateInShader, pitchWithMap, painter, matrix,
+                    uLabelPlaneMatrix, uglCoordMatrix, isText, texSize, true);
             } else {
                 uniformValues = symbolTextAndIconUniformValues(sizeData.kind,
-                size, rotateInShader, pitchWithMap, painter, matrix,
-                uLabelPlaneMatrix, uglCoordMatrix, texSize, texSizeIcon);
+                    size, rotateInShader, pitchWithMap, painter, matrix,
+                    uLabelPlaneMatrix, uglCoordMatrix, texSize, texSizeIcon);
             }
         } else {
             uniformValues = symbolIconUniformValues(sizeData.kind,

package/src/render/glyph_atlas.ts

@@ -7,21 +7,21 @@ import type {GlyphMetrics, StyleGlyph} from '../style/style_glyph';
 const padding = 1;
 
 export type Rect = {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
 };
 
 export type GlyphPosition = {
-  rect: Rect;
-  metrics: GlyphMetrics;
+    rect: Rect;
+    metrics: GlyphMetrics;
 };
 
 export type GlyphPositions = {
-  [_: string]: {
-    [_: number]: GlyphPosition;
-  };
+    [_: string]: {
+        [_: number]: GlyphPosition;
+    };
 };
 
 export default class GlyphAtlas {
@@ -29,9 +29,9 @@ export default class GlyphAtlas {
     positions: GlyphPositions;
 
     constructor(stacks: {
-      [_: string]: {
-        [_: number]: StyleGlyph;
-      };
+        [_: string]: {
+            [_: number]: StyleGlyph;
+        };
     }) {
         const positions = {};
         const bins = [];

package/src/render/glyph_manager.test.ts

@@ -4,7 +4,7 @@ import fs from 'fs';
 import {RequestManager} from '../util/request_manager';
 
 const glyphs = {};
-for (const glyph of parseGlyphPBF(fs.readFileSync('./test/fixtures/0-255.pbf'))) {
+for (const glyph of parseGlyphPBF(fs.readFileSync('./test/unit/assets/0-255.pbf'))) {
     glyphs[glyph.id] = glyph;
 }
 
@@ -21,12 +21,6 @@ const createLoadGlyphRangeStub = () => {
 };
 
 const createGlyphManager = (font?) => {
-    GlyphManager.TinySDF = class {
-        // Return empty 30x30 bitmap (24 fontsize + 3 * 2 buffer)
-        draw() {
-            return {data: new Uint8ClampedArray(900)} as any;
-        }
-    };
     const manager = new GlyphManager(identityTransform, font);
     manager.setURL('https://localhost/fonts/v1/{fontstack}/{range}.pbf');
     return manager;
@@ -106,8 +100,8 @@ describe('GlyphManager', () => {
                 expect(err).toBeFalsy();
                 const glyph = glyphs['Arial Unicode MS'][0x30c6];
                 //Ensure that te is locally generated.
-                expect(glyph.bitmap.height).toBe(30);
-                expect(glyph.bitmap.width).toBe(30);
+                expect(glyph.bitmap.height).toBe(6);
+                expect(glyph.bitmap.width).toBe(6);
                 done();
             });
         });
@@ -118,7 +112,7 @@ describe('GlyphManager', () => {
 
         manager.getGlyphs({'Arial Unicode MS': [0x5e73]}, (err, glyphs) => {
             expect(err).toBeFalsy();
-            expect(glyphs['Arial Unicode MS'][0x5e73].metrics.advance).toBe(24);
+            expect(glyphs['Arial Unicode MS'][0x5e73].metrics.advance).toBe(1);
             done();
         });
     });
@@ -129,7 +123,7 @@ describe('GlyphManager', () => {
         // Katakana letter te
         manager.getGlyphs({'Arial Unicode MS': [0x30c6]}, (err, glyphs) => {
             expect(err).toBeFalsy();
-            expect(glyphs['Arial Unicode MS'][0x30c6].metrics.advance).toBe(24);
+            expect(glyphs['Arial Unicode MS'][0x30c6].metrics.advance).toBe(1);
             done();
         });
     });
@@ -140,7 +134,7 @@ describe('GlyphManager', () => {
         //Hiragana letter te
         manager.getGlyphs({'Arial Unicode MS': [0x3066]}, (err, glyphs) => {
             expect(err).toBeFalsy();
-            expect(glyphs['Arial Unicode MS'][0x3066].metrics.advance).toBe(24);
+            expect(glyphs['Arial Unicode MS'][0x3066].metrics.advance).toBe(1);
             done();
         });
     });
@@ -148,21 +142,16 @@ describe('GlyphManager', () => {
     test('GlyphManager caches locally generated glyphs', done => {
 
         const manager = createGlyphManager('sans-serif');
-        let drawCallCount = 0;
-        GlyphManager.TinySDF = class {
-            // Return empty 30x30 bitmap (24 fontsize + 3 * 2 buffer)
-            draw() {
-                drawCallCount++;
-                return {data: new Uint8ClampedArray(900)} as any;
-            }
-        };
+        const drawSpy = GlyphManager.TinySDF.prototype.draw = jest.fn().mockImplementation(() => {
+            return {data: new Uint8ClampedArray(900)} as any;
+        });
 
         // Katakana letter te
         manager.getGlyphs({'Arial Unicode MS': [0x30c6]}, (err, glyphs) => {
             expect(err).toBeFalsy();
             expect(glyphs['Arial Unicode MS'][0x30c6].metrics.advance).toBe(24);
             manager.getGlyphs({'Arial Unicode MS': [0x30c6]}, () => {
-                expect(drawCallCount).toBe(1);
+                expect(drawSpy).toHaveBeenCalledTimes(1);
                 done();
             });
         });

package/src/render/glyph_manager.ts

@@ -10,26 +10,26 @@ import type {RequestManager} from '../util/request_manager';
 import type {Callback} from '../types/callback';
 
 type Entry = {
-  // null means we've requested the range, but the glyph wasn't included in the result.
-  glyphs: {
-    [id: number]: StyleGlyph | null;
-  };
-  requests: {
-    [range: number]: Array<Callback<{
-      [_: number]: StyleGlyph | null;
-    }>>;
-  };
-  ranges: {
-    [range: number]: boolean | null;
-  };
-  tinySDF?: TinySDF;
+    // null means we've requested the range, but the glyph wasn't included in the result.
+    glyphs: {
+        [id: number]: StyleGlyph | null;
+    };
+    requests: {
+        [range: number]: Array<Callback<{
+            [_: number]: StyleGlyph | null;
+        }>>;
+    };
+    ranges: {
+        [range: number]: boolean | null;
+    };
+    tinySDF?: TinySDF;
 };
 
 export default class GlyphManager {
     requestManager: RequestManager;
     localIdeographFontFamily: string;
     entries: {
-      [_: string]: Entry;
+        [_: string]: Entry;
     };
     url: string;
 
@@ -48,11 +48,11 @@ export default class GlyphManager {
     }
 
     getGlyphs(glyphs: {
-      [stack: string]: Array<number>;
+        [stack: string]: Array<number>;
     }, callback: Callback<{
-      [stack: string]: {
-        [id: number]: StyleGlyph;
-      };
+        [stack: string]: {
+            [id: number]: StyleGlyph;
+        };
     }>) {
         const all = [];
 
@@ -63,9 +63,9 @@ export default class GlyphManager {
         }
 
         asyncAll(all, ({stack, id}, callback: Callback<{
-          stack: string;
-          id: number;
-          glyph: StyleGlyph;
+            stack: string;
+            id: number;
+            glyph: StyleGlyph;
         }>) => {
             let entry = this.entries[stack];
             if (!entry) {
@@ -103,9 +103,9 @@ export default class GlyphManager {
             let requests = entry.requests[range];
             if (!requests) {
                 requests = entry.requests[range] = [];
-                GlyphManager.loadGlyphRange(stack, range, this.url as any, this.requestManager,
+                GlyphManager.loadGlyphRange(stack, range, this.url, this.requestManager,
                     (err, response?: {
-                      [_: number]: StyleGlyph | null;
+                        [_: number]: StyleGlyph | null;
                     } | null) => {
                         if (response) {
                             for (const id in response) {
@@ -123,7 +123,7 @@ export default class GlyphManager {
             }
 
             requests.push((err, result?: {
-              [_: number]: StyleGlyph | null;
+                [_: number]: StyleGlyph | null;
             } | null) => {
                 if (err) {
                     callback(err);
@@ -132,9 +132,9 @@ export default class GlyphManager {
                 }
             });
         }, (err, glyphs?: Array<{
-          stack: string;
-          id: number;
-          glyph: StyleGlyph;
+            stack: string;
+            id: number;
+            glyph: StyleGlyph;
         }> | null) => {
             if (err) {
                 callback(err);
@@ -195,15 +195,16 @@ export default class GlyphManager {
             });
         }
 
+        const char = tinySDF.draw(String.fromCharCode(id));
         return {
             id,
-            bitmap: new AlphaImage({width: 30, height: 30}, tinySDF.draw(String.fromCharCode(id)).data),
+            bitmap: new AlphaImage({width: char.width || 30, height: char.height || 30}, char.data),
             metrics: {
-                width: 24,
-                height: 24,
-                left: 0,
-                top: -8,
-                advance: 24
+                width: char.glyphWidth || 24,
+                height: char.glyphHeight || 24,
+                left: char.glyphLeft || 0,
+                top: char.glyphTop || -8,
+                advance: char.glyphAdvance || 24
             }
         };
     }

package/src/render/image_manager.ts

@@ -14,8 +14,8 @@ import type {PotpackBox} from 'potpack';
 import type {Callback} from '../types/callback';
 
 type Pattern = {
-  bin: PotpackBox;
-  position: ImagePosition;
+    bin: PotpackBox;
+    position: ImagePosition;
 };
 
 // When copied into the atlas texture, image data is padded by one pixel on each side. Icon
@@ -41,8 +41,8 @@ class ImageManager extends Evented {
     callbackDispatchedThisFrame: {[_: string]: boolean};
     loaded: boolean;
     requestors: Array<{
-      ids: Array<string>;
-      callback: Callback<{[_: string]: StyleImage}>;
+        ids: Array<string>;
+        callback: Callback<{[_: string]: StyleImage}>;
     }>;
 
     patterns: {[_: string]: Pattern};

package/src/render/painter.ts

@@ -5,7 +5,7 @@ import SourceCache from '../source/source_cache';
 import EXTENT from '../data/extent';
 import pixelsToTileUnits from '../source/pixels_to_tile_units';
 import SegmentVector from '../data/segment';
-import {RasterBoundsArray, PosArray, TriangleIndexArray, LineStripIndexArray} from '../data/array_types';
+import {RasterBoundsArray, PosArray, TriangleIndexArray, LineStripIndexArray} from '../data/array_types.g';
 import rasterBoundsAttributes from '../data/raster_bounds_attributes';
 import posAttributes from '../data/pos_attributes';
 import ProgramConfiguration from '../data/program_configuration';
@@ -65,14 +65,14 @@ import type {RGBAImage} from '../util/image';
 export type RenderPass = 'offscreen' | 'opaque' | 'translucent';
 
 type PainterOptions = {
-  showOverdrawInspector: boolean;
-  showTileBoundaries: boolean;
-  showPadding: boolean;
-  rotating: boolean;
-  zooming: boolean;
-  moving: boolean;
-  gpuTiming: boolean;
-  fadeDuration: number;
+    showOverdrawInspector: boolean;
+    showTileBoundaries: boolean;
+    showPadding: boolean;
+    rotating: boolean;
+    zooming: boolean;
+    moving: boolean;
+    gpuTiming: boolean;
+    fadeDuration: number;
 };
 
 /**
@@ -85,13 +85,14 @@ class Painter {
     context: Context;
     transform: Transform;
     _tileTextures: {
-      [_: number]: Array<Texture>;
+        [_: number]: Array<Texture>;
     };
     numSublayers: number;
     depthEpsilon: number;
     emptyProgramConfiguration: ProgramConfiguration;
     width: number;
     height: number;
+    pixelRatio: number;
     tileExtentBuffer: VertexBuffer;
     tileExtentSegments: SegmentVector;
     debugBuffer: VertexBuffer;
@@ -146,9 +147,10 @@ class Painter {
      * Update the GL viewport, projection matrix, and transforms to compensate
      * for a new width and height value.
      */
-    resize(width: number, height: number) {
-        this.width = width * devicePixelRatio;
-        this.height = height * devicePixelRatio;
+    resize(width: number, height: number, pixelRatio: number) {
+        this.width = width * pixelRatio;
+        this.height = height * pixelRatio;
+        this.pixelRatio = pixelRatio;
         this.context.viewport.set([0, 0, this.width, this.height]);
 
         if (this.style) {
@@ -303,7 +305,7 @@ class Painter {
      * Returns [StencilMode for tile overscaleZ map, sortedCoords].
      */
     stencilConfigForOverlap(tileIDs: Array<OverscaledTileID>): [{
-      [_: number]: Readonly<StencilMode>;
+        [_: number]: Readonly<StencilMode>;
     }, Array<OverscaledTileID>] {
         const gl = this.context.gl;
         const coords = tileIDs.sort((a, b) => b.overscaledZ - a.overscaledZ);

package/src/render/program/background_program.ts

@@ -19,29 +19,29 @@ import type ResolvedImage from '../../style-spec/expression/types/resolved_image
 import {mat4} from 'gl-matrix';
 
 export type BackgroundUniformsType = {
-  'u_matrix': UniformMatrix4f;
-  'u_opacity': Uniform1f;
-  'u_color': UniformColor;
+    'u_matrix': UniformMatrix4f;
+    'u_opacity': Uniform1f;
+    'u_color': UniformColor;
 };
 
 export type BackgroundPatternUniformsType = {
-  'u_matrix': UniformMatrix4f;
-  'u_opacity': Uniform1f;
-  // pattern uniforms:
-  'u_image': Uniform1i;
-  'u_pattern_tl_a': Uniform2f;
-  'u_pattern_br_a': Uniform2f;
-  'u_pattern_tl_b': Uniform2f;
-  'u_pattern_br_b': Uniform2f;
-  'u_texsize': Uniform2f;
-  'u_mix': Uniform1f;
-  'u_pattern_size_a': Uniform2f;
-  'u_pattern_size_b': Uniform2f;
-  'u_scale_a': Uniform1f;
-  'u_scale_b': Uniform1f;
-  'u_pixel_coord_upper': Uniform2f;
-  'u_pixel_coord_lower': Uniform2f;
-  'u_tile_units_to_pixels': Uniform1f;
+    'u_matrix': UniformMatrix4f;
+    'u_opacity': Uniform1f;
+    // pattern uniforms:
+    'u_image': Uniform1i;
+    'u_pattern_tl_a': Uniform2f;
+    'u_pattern_br_a': Uniform2f;
+    'u_pattern_tl_b': Uniform2f;
+    'u_pattern_br_b': Uniform2f;
+    'u_texsize': Uniform2f;
+    'u_mix': Uniform1f;
+    'u_pattern_size_a': Uniform2f;
+    'u_pattern_size_b': Uniform2f;
+    'u_scale_a': Uniform1f;
+    'u_scale_b': Uniform1f;
+    'u_pixel_coord_upper': Uniform2f;
+    'u_pixel_coord_lower': Uniform2f;
+    'u_tile_units_to_pixels': Uniform1f;
 };
 
 const backgroundUniforms = (context: Context, locations: UniformLocations): BackgroundUniformsType => ({
@@ -76,15 +76,15 @@ const backgroundUniformValues = (matrix: mat4, opacity: number, color: Color): U
 });
 
 const backgroundPatternUniformValues = (
-  matrix: mat4,
-  opacity: number,
-  painter: Painter,
-  image: CrossFaded<ResolvedImage>,
-  tile: {
-    tileID: OverscaledTileID;
-    tileSize: number;
-  },
-  crossfade: CrossfadeParameters
+    matrix: mat4,
+    opacity: number,
+    painter: Painter,
+    image: CrossFaded<ResolvedImage>,
+    tile: {
+        tileID: OverscaledTileID;
+        tileSize: number;
+    },
+    crossfade: CrossfadeParameters
 ): UniformValues<BackgroundPatternUniformsType> => extend(
     bgPatternUniformValues(image, crossfade, painter, tile),
     {

package/src/render/program/circle_program.ts

@@ -9,12 +9,12 @@ import type CircleStyleLayer from '../../style/style_layer/circle_style_layer';
 import type Painter from '../painter';
 
 export type CircleUniformsType = {
-  'u_camera_to_center_distance': Uniform1f;
-  'u_scale_with_map': Uniform1i;
-  'u_pitch_with_map': Uniform1i;
-  'u_extrude_scale': Uniform2f;
-  'u_device_pixel_ratio': Uniform1f;
-  'u_matrix': UniformMatrix4f;
+    'u_camera_to_center_distance': Uniform1f;
+    'u_scale_with_map': Uniform1i;
+    'u_pitch_with_map': Uniform1i;
+    'u_extrude_scale': Uniform2f;
+    'u_device_pixel_ratio': Uniform1f;
+    'u_matrix': UniformMatrix4f;
 };
 
 const circleUniforms = (context: Context, locations: UniformLocations): CircleUniformsType => ({
@@ -27,10 +27,10 @@ const circleUniforms = (context: Context, locations: UniformLocations): CircleUn
 });
 
 const circleUniformValues = (
-  painter: Painter,
-  coord: OverscaledTileID,
-  tile: Tile,
-  layer: CircleStyleLayer
+    painter: Painter,
+    coord: OverscaledTileID,
+    tile: Tile,
+    layer: CircleStyleLayer
 ): UniformValues<CircleUniformsType> => {
     const transform = painter.transform;
 
@@ -53,7 +53,7 @@ const circleUniformValues = (
             layer.paint.get('circle-translate'),
             layer.paint.get('circle-translate-anchor')),
         'u_pitch_with_map': +(pitchWithMap),
-        'u_device_pixel_ratio': devicePixelRatio,
+        'u_device_pixel_ratio': painter.pixelRatio,
         'u_extrude_scale': extrudeScale
     };
 };

package/src/render/program/clipping_mask_program.ts

@@ -5,7 +5,7 @@ import type {UniformValues, UniformLocations} from '../uniform_binding';
 import {mat4} from 'gl-matrix';
 
 export type ClippingMaskUniformsType = {
-  'u_matrix': UniformMatrix4f;
+    'u_matrix': UniformMatrix4f;
 };
 
 const clippingMaskUniforms = (context: Context, locations: UniformLocations): ClippingMaskUniformsType => ({

package/src/render/program/collision_program.ts

@@ -8,18 +8,18 @@ import type Tile from '../../source/tile';
 import {mat4} from 'gl-matrix';
 
 export type CollisionUniformsType = {
-  'u_matrix': UniformMatrix4f;
-  'u_camera_to_center_distance': Uniform1f;
-  'u_pixels_to_tile_units': Uniform1f;
-  'u_extrude_scale': Uniform2f;
-  'u_overscale_factor': Uniform1f;
+    'u_matrix': UniformMatrix4f;
+    'u_camera_to_center_distance': Uniform1f;
+    'u_pixels_to_tile_units': Uniform1f;
+    'u_extrude_scale': Uniform2f;
+    'u_overscale_factor': Uniform1f;
 };
 
 export type CollisionCircleUniformsType = {
-  'u_matrix': UniformMatrix4f;
-  'u_inv_matrix': UniformMatrix4f;
-  'u_camera_to_center_distance': Uniform1f;
-  'u_viewport_size': Uniform2f;
+    'u_matrix': UniformMatrix4f;
+    'u_inv_matrix': UniformMatrix4f;
+    'u_camera_to_center_distance': Uniform1f;
+    'u_viewport_size': Uniform2f;
 };
 
 const collisionUniforms = (context: Context, locations: UniformLocations): CollisionUniformsType => ({

package/src/render/program/debug_program.ts

@@ -6,10 +6,10 @@ import type Color from '../../style-spec/util/color';
 import {mat4} from 'gl-matrix';
 
 export type DebugUniformsType = {
-  'u_color': UniformColor;
-  'u_matrix': UniformMatrix4f;
-  'u_overlay': Uniform1i;
-  'u_overlay_scale': Uniform1f;
+    'u_color': UniformColor;
+    'u_matrix': UniformMatrix4f;
+    'u_overlay': Uniform1i;
+    'u_overlay_scale': Uniform1f;
 };
 
 const debugUniforms = (context: Context, locations: UniformLocations): DebugUniformsType => ({