maplibre-gl 3.3.1 → 3.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "maplibre-gl",
   "description": "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library",
-  "version": "3.3.1",
+  "version": "3.4.1",
   "main": "dist/maplibre-gl.js",
   "style": "dist/maplibre-gl.css",
   "license": "BSD-3-Clause",
@@ -20,12 +20,12 @@
     "@mapbox/unitbezier": "^0.0.1",
     "@mapbox/vector-tile": "^1.3.1",
     "@mapbox/whoots-js": "^3.1.0",
-    "@maplibre/maplibre-gl-style-spec": "^19.3.0",
-    "@types/geojson": "^7946.0.10",
+    "@maplibre/maplibre-gl-style-spec": "^19.3.2",
+    "@types/geojson": "^7946.0.11",
     "@types/mapbox__point-geometry": "^0.1.2",
-    "@types/mapbox__vector-tile": "^1.3.0",
-    "@types/pbf": "^3.0.2",
-    "@types/supercluster": "^7.1.0",
+    "@types/mapbox__vector-tile": "^1.3.1",
+    "@types/pbf": "^3.0.3",
+    "@types/supercluster": "^7.1.1",
     "earcut": "^2.2.4",
     "geojson-vt": "^3.2.1",
     "gl-matrix": "^3.4.3",
@@ -42,56 +42,56 @@
   "devDependencies": {
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
     "@mapbox/mvt-fixtures": "^3.10.0",
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-strip": "^3.0.2",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-typescript": "^11.1.3",
-    "@types/benchmark": "^2.1.2",
+    "@rollup/plugin-commonjs": "^25.0.5",
+    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.3",
+    "@rollup/plugin-strip": "^3.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@types/benchmark": "^2.1.3",
     "@types/cssnano": "^5.0.0",
-    "@types/d3": "^7.4.0",
-    "@types/diff": "^5.0.3",
-    "@types/earcut": "^2.1.1",
-    "@types/eslint": "^8.44.2",
-    "@types/gl": "^6.0.2",
+    "@types/d3": "^7.4.1",
+    "@types/diff": "^5.0.5",
+    "@types/earcut": "^2.1.2",
+    "@types/eslint": "^8.44.3",
+    "@types/gl": "^6.0.3",
     "@types/glob": "^8.1.0",
     "@types/jest": "^29.5.3",
-    "@types/jsdom": "^21.1.2",
-    "@types/minimist": "^1.2.2",
+    "@types/jsdom": "^21.1.3",
+    "@types/minimist": "^1.2.3",
     "@types/murmurhash-js": "^1.0.4",
-    "@types/nise": "^1.4.1",
-    "@types/node": "^20.5.7",
-    "@types/offscreencanvas": "^2019.7.0",
+    "@types/nise": "^1.4.2",
+    "@types/node": "^20.8.3",
+    "@types/offscreencanvas": "^2019.7.1",
     "@types/pixelmatch": "^5.2.4",
-    "@types/pngjs": "^6.0.1",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@types/request": "^2.48.8",
+    "@types/pngjs": "^6.0.2",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.11",
+    "@types/request": "^2.48.9",
     "@types/shuffle-seed": "^1.1.0",
     "@types/window-or-global": "^1.0.4",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.4.1",
-    "address": "^1.2.2",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "address": "^2.0.1",
     "benchmark": "^2.1.4",
     "canvas": "^2.11.2",
     "cssnano": "^6.0.1",
     "d3": "^7.8.5",
     "d3-queue": "^3.0.7",
-    "devtools-protocol": "^0.0.1188743",
+    "devtools-protocol": "^0.0.1206220",
     "diff": "^5.1.0",
     "dts-bundle-generator": "^8.0.1",
-    "eslint": "^8.48.0",
+    "eslint": "^8.51.0",
     "eslint-config-mourner": "^3.0.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^27.2.3",
+    "eslint-plugin-jest": "^27.4.2",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-tsdoc": "0.2.17",
-    "expect": "^29.6.4",
+    "expect": "^29.7.0",
     "gl": "^6.0.2",
-    "glob": "^10.3.3",
+    "glob": "^10.3.10",
     "is-builtin-module": "^3.2.1",
     "jest": "^29.6.2",
     "jest-canvas-mock": "^2.5.2",
@@ -107,14 +107,14 @@
     "pdf-merger-js": "^4.3.0",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
-    "postcss": "^8.4.28",
+    "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-inline-svg": "^6.0.0",
     "pretty-bytes": "^6.1.1",
-    "puppeteer": "^21.1.0",
+    "puppeteer": "^21.3.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.28.1",
+    "rollup": "^4.0.2",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rw": "^1.3.3",
     "semver": "^7.5.4",
@@ -126,10 +126,10 @@
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.2",
-    "typedoc": "^0.24.8",
+    "typedoc": "^0.25.2",
     "typedoc-plugin-markdown": "^3.16.0",
     "typedoc-plugin-missing-exports": "^2.1.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   },
   "overrides": {
     "postcss-inline-svg": {

package/src/data/dem_data.test.ts

@@ -47,179 +47,111 @@ describe('DEMData', () => {
             new DEMData('0', imageData0, 'otherEncoding' as any);
 
             expect(spyOnWarnConsole).toHaveBeenCalledTimes(1);
-            expect(spyOnWarnConsole.mock.calls).toEqual([['\"otherEncoding\" is not a valid encoding type. Valid types include \"mapbox\" and \"terrarium\".']]);
+            expect(spyOnWarnConsole.mock.calls).toEqual([['\"otherEncoding\" is not a valid encoding type. Valid types include \"mapbox\", \"terrarium\" and \"custom\".']]);
         });
     });
 });
 
-describe('DEMData#backfillBorder with encoding', () => {
-    describe('mabox encoding', () => {
-        const dem0 = new DEMData('0', createMockImage(4, 4), 'mapbox');
-        const dem1 = new DEMData('1', createMockImage(4, 4), 'mapbox');
-
-        test('border region is initially populated with neighboring data', () => {
-            let nonempty = true;
-            for (let x = -1; x < 5; x++) {
-                for (let y = -1; y < 5; y++) {
-                    if (dem0.get(x, y) === -65536) {
-                        nonempty = false;
-                        break;
-                    }
+function testDEMBorderRegion(dem: DEMData) {
+    return () => {
+        let nonempty = true;
+        for (let x = -1; x < 5; x++) {
+            for (let y = -1; y < 5; y++) {
+                if (dem.get(x, y) === -65536) {
+                    nonempty = false;
+                    break;
                 }
             }
-            expect(nonempty).toBeTruthy();
-
-            let verticalBorderMatch = true;
-            for (const x of [-1, 4]) {
-                for (let y = 0; y < 4; y++) {
-                    if (dem0.get(x, y) !== dem0.get(x < 0 ? x + 1 : x - 1, y)) {
-                        verticalBorderMatch = false;
-                        break;
-                    }
+        }
+        expect(nonempty).toBeTruthy();
+
+        let verticalBorderMatch = true;
+        for (const x of [-1, 4]) {
+            for (let y = 0; y < 4; y++) {
+                if (dem.get(x, y) !== dem.get(x < 0 ? x + 1 : x - 1, y)) {
+                    verticalBorderMatch = false;
+                    break;
                 }
             }
-            expect(verticalBorderMatch).toBeTruthy();
-
-            // horizontal borders empty
-            let horizontalBorderMatch = true;
-            for (const y of [-1, 4]) {
-                for (let x = 0; x < 4; x++) {
-                    if (dem0.get(x, y) !== dem0.get(x, y < 0 ? y + 1 : y - 1)) {
-                        horizontalBorderMatch = false;
-                        break;
-                    }
+        }
+        expect(verticalBorderMatch).toBeTruthy();
+
+        // horizontal borders empty
+        let horizontalBorderMatch = true;
+        for (const y of [-1, 4]) {
+            for (let x = 0; x < 4; x++) {
+                if (dem.get(x, y) !== dem.get(x, y < 0 ? y + 1 : y - 1)) {
+                    horizontalBorderMatch = false;
+                    break;
                 }
             }
-            expect(horizontalBorderMatch).toBeTruthy();
+        }
+        expect(horizontalBorderMatch).toBeTruthy();
 
-            expect(dem0.get(-1, 4) === dem0.get(0, 3)).toBeTruthy();
-            expect(dem0.get(4, 4) === dem0.get(3, 3)).toBeTruthy();
-            expect(dem0.get(-1, -1) === dem0.get(0, 0)).toBeTruthy();
-            expect(dem0.get(4, -1) === dem0.get(3, 0)).toBeTruthy();
-        });
+        expect(dem.get(-1, 4) === dem.get(0, 3)).toBeTruthy();
+        expect(dem.get(4, 4) === dem.get(3, 3)).toBeTruthy();
+        expect(dem.get(-1, -1) === dem.get(0, 0)).toBeTruthy();
+        expect(dem.get(4, -1) === dem.get(3, 0)).toBeTruthy();
+    };
+}
 
-        test('backfillBorder correctly populates borders with neighboring data', () => {
-            dem0.backfillBorder(dem1, -1, 0);
-            for (let y = 0; y < 4; y++) {
+function testDEMBackfill(dem0: DEMData, dem1: DEMData) {
+    return  () => {
+        dem0.backfillBorder(dem1, -1, 0);
+        for (let y = 0; y < 4; y++) {
             // dx = -1, dy = 0, so the left edge of dem1 should equal the right edge of dem0
-                expect(dem0.get(-1, y) === dem1.get(3, y)).toBeTruthy();
-            }
+            expect(dem0.get(-1, y) === dem1.get(3, y)).toBeTruthy();
+        }
 
-            dem0.backfillBorder(dem1, 0, -1);
-            for (let x = 0; x < 4; x++) {
-                expect(dem0.get(x, -1) === dem1.get(x, 3)).toBeTruthy();
-            }
+        dem0.backfillBorder(dem1, 0, -1);
+        for (let x = 0; x < 4; x++) {
+            expect(dem0.get(x, -1) === dem1.get(x, 3)).toBeTruthy();
+        }
 
-            dem0.backfillBorder(dem1, 1, 0);
-            for (let y = 0; y < 4; y++) {
-                expect(dem0.get(4, y) === dem1.get(0, y)).toBeTruthy();
-            }
+        dem0.backfillBorder(dem1, 1, 0);
+        for (let y = 0; y < 4; y++) {
+            expect(dem0.get(4, y) === dem1.get(0, y)).toBeTruthy();
+        }
 
-            dem0.backfillBorder(dem1, 0, 1);
-            for (let x = 0; x < 4; x++) {
-                expect(dem0.get(x, 4) === dem1.get(x, 0)).toBeTruthy();
-            }
+        dem0.backfillBorder(dem1, 0, 1);
+        for (let x = 0; x < 4; x++) {
+            expect(dem0.get(x, 4) === dem1.get(x, 0)).toBeTruthy();
+        }
 
-            dem0.backfillBorder(dem1, -1, 1);
-            expect(dem0.get(-1, 4) === dem1.get(3, 0)).toBeTruthy();
+        dem0.backfillBorder(dem1, -1, 1);
+        expect(dem0.get(-1, 4) === dem1.get(3, 0)).toBeTruthy();
 
-            dem0.backfillBorder(dem1, 1, 1);
-            expect(dem0.get(4, 4) === dem1.get(0, 0)).toBeTruthy();
+        dem0.backfillBorder(dem1, 1, 1);
+        expect(dem0.get(4, 4) === dem1.get(0, 0)).toBeTruthy();
 
-            dem0.backfillBorder(dem1, -1, -1);
-            expect(dem0.get(-1, -1) === dem1.get(3, 3)).toBeTruthy();
+        dem0.backfillBorder(dem1, -1, -1);
+        expect(dem0.get(-1, -1) === dem1.get(3, 3)).toBeTruthy();
 
-            dem0.backfillBorder(dem1, 1, -1);
-            expect(dem0.get(4, -1) === dem1.get(0, 3)).toBeTruthy();
-        });
+        dem0.backfillBorder(dem1, 1, -1);
+        expect(dem0.get(4, -1) === dem1.get(0, 3)).toBeTruthy();
+    };
+}
+
+describe('DEMData#backfillBorder with encoding', () => {
+    describe('mabox encoding', () => {
+        const dem0 = new DEMData('0', createMockImage(4, 4), 'mapbox');
+        const dem1 = new DEMData('1', createMockImage(4, 4), 'mapbox');
+
+        test('border region is initially populated with neighboring data', testDEMBorderRegion(dem0));
+        test('backfillBorder correctly populates borders with neighboring data', testDEMBackfill(dem0, dem1));
     });
 
     describe('terrarium encoding', () => {
         const dem0 = new DEMData('0', createMockImage(4, 4), 'terrarium');
         const dem1 = new DEMData('1', createMockImage(4, 4), 'terrarium');
 
-        test('border region is initially populated with neighboring data', () => {
-            let nonempty = true;
-            for (let x = -1; x < 5; x++) {
-                for (let y = -1; y < 5; y++) {
-                    if (dem0.get(x, y) === -65536) {
-                        nonempty = false;
-                        break;
-                    }
-                }
-            }
-            expect(nonempty).toBeTruthy();
-
-            let verticalBorderMatch = true;
-            for (const x of [-1, 4]) {
-                for (let y = 0; y < 4; y++) {
-                    if (dem0.get(x, y) !== dem0.get(x < 0 ? x + 1 : x - 1, y)) {
-                        verticalBorderMatch = false;
-                        break;
-                    }
-                }
-            }
-            expect(verticalBorderMatch).toBeTruthy();
-
-            // horizontal borders empty
-            let horizontalBorderMatch = true;
-            for (const y of [-1, 4]) {
-                for (let x = 0; x < 4; x++) {
-                    if (dem0.get(x, y) !== dem0.get(x, y < 0 ? y + 1 : y - 1)) {
-                        horizontalBorderMatch = false;
-                        break;
-                    }
-                }
-            }
-            expect(horizontalBorderMatch).toBeTruthy();
-
-            expect(dem0.get(-1, 4) === dem0.get(0, 3)).toBeTruthy();
-            expect(dem0.get(4, 4) === dem0.get(3, 3)).toBeTruthy();
-            expect(dem0.get(-1, -1) === dem0.get(0, 0)).toBeTruthy();
-            expect(dem0.get(4, -1) === dem0.get(3, 0)).toBeTruthy();
-        });
-
-        test('backfillBorder correctly populates borders with neighboring data', () => {
-            dem0.backfillBorder(dem1, -1, 0);
-            for (let y = 0; y < 4; y++) {
-                // dx = -1, dy = 0, so the left edge of dem1 should equal the right edge of dem0
-                expect(dem0.get(-1, y) === dem1.get(3, y)).toBeTruthy();
-            }
-
-            dem0.backfillBorder(dem1, 0, -1);
-            for (let x = 0; x < 4; x++) {
-                expect(dem0.get(x, -1) === dem1.get(x, 3)).toBeTruthy();
-            }
-
-            dem0.backfillBorder(dem1, 1, 0);
-            for (let y = 0; y < 4; y++) {
-                expect(dem0.get(4, y) === dem1.get(0, y)).toBeTruthy();
-            }
-
-            dem0.backfillBorder(dem1, 0, 1);
-            for (let x = 0; x < 4; x++) {
-                expect(dem0.get(x, 4) === dem1.get(x, 0)).toBeTruthy();
-            }
-
-            dem0.backfillBorder(dem1, -1, 1);
-            expect(dem0.get(-1, 4) === dem1.get(3, 0)).toBeTruthy();
-
-            dem0.backfillBorder(dem1, 1, 1);
-            expect(dem0.get(4, 4) === dem1.get(0, 0)).toBeTruthy();
-
-            dem0.backfillBorder(dem1, -1, -1);
-            expect(dem0.get(-1, -1) === dem1.get(3, 3)).toBeTruthy();
-
-            dem0.backfillBorder(dem1, 1, -1);
-            expect(dem0.get(4, -1) === dem1.get(0, 3)).toBeTruthy();
-        });
+        test('border region is initially populated with neighboring data', testDEMBorderRegion(dem0));
+        test('backfillBorder correctly populates borders with neighboring data', testDEMBackfill(dem0, dem1));
     });
 });
 
-describe('DEMData is correctly serialized and deserialized', () => {
-    test('serialized', () => {
-        const imageData0 = createMockImage(4, 4);
-        const dem0 = new DEMData('0', imageData0, 'mapbox');
+function testSerialization(dem0: DEMData, redFactor: number, greenFactor: number, blueFactor: number, baseShift: number) {
+    return () => {
         const serialized = serialize(dem0);
 
         // calculate min/max values
@@ -239,7 +171,10 @@ describe('DEMData is correctly serialized and deserialized', () => {
             dim: 4,
             stride: 6,
             data: dem0.data,
-            encoding: 'mapbox',
+            redFactor,
+            greenFactor,
+            blueFactor,
+            baseShift,
             max,
             min,
         });
@@ -247,36 +182,56 @@ describe('DEMData is correctly serialized and deserialized', () => {
         const transferrables = [];
         serialize(dem0, transferrables);
         expect(new Uint32Array(transferrables[0])).toEqual(dem0.data);
-    });
+    };
+}
 
-    test('deserialized', () => {
-        const imageData0 = createMockImage(4, 4);
-        const dem0 = new DEMData('0', imageData0, 'terrarium');
+function testDeserialization(dem0: DEMData) {
+    return () => {
         const serialized = serialize(dem0);
 
         const deserialized = deserialize(serialized);
         expect(deserialized).toEqual(dem0);
-    });
+    };
+}
+
+describe('DEMData is correctly serialized and deserialized', () => {
+    const mapboxDEM = new DEMData('0', createMockImage(4, 4), 'mapbox');
+    const terrariumDEM = new DEMData('0', createMockImage(4, 4), 'terrarium');
+    const customDEM = new DEMData('0', createMockImage(4, 4), 'custom', 1.0, 2.0, 3.0, 4.0);
+    test('serialized - mapbox', testSerialization(mapboxDEM, 6553.6, 25.6, 0.1, 10000));
+    test('serialized - terrarium', testSerialization(terrariumDEM, 256.0, 1.0, 1.0 / 256.0, 32768.0));
+    test('serialized - custom', testSerialization(customDEM, 1.0, 2.0, 3.0, 4.0));
+
+    test('deserialized - mapbox', testDeserialization(mapboxDEM));
+    test('deserialized - terrarium', testDeserialization(terrariumDEM));
+    test('deserialized - custom', testDeserialization(customDEM));
 });
 
 describe('UnpackVector is correctly returned', () => {
-    test('terrarium and mapbox', () => {
-        const imageData1 = createMockImage(4, 4);
-        const dem1 = new DEMData('0', imageData1, 'terrarium');
-
-        const imageData2 = createMockImage(4, 4);
-        const dem2 = new DEMData('0', imageData2, 'mapbox');
-
-        expect(dem1.getUnpackVector()).toEqual([256.0, 1.0, 1.0 / 256.0, 32768.0]);
-        expect(dem2.getUnpackVector()).toEqual([6553.6, 25.6, 0.1, 10000.0]);
+    test('terrarium, mapbox and custom', () => {
+        const mapboxDEM = new DEMData('0', createMockImage(4, 4), 'mapbox');
+        const terrariumDEM = new DEMData('0', createMockImage(4, 4), 'terrarium');
+        const customDEM = new DEMData('0', createMockImage(4, 4), 'custom', 1.0, 2.0, 3.0, 4.0);
+
+        expect(terrariumDEM.getUnpackVector()).toEqual([256.0, 1.0, 1.0 / 256.0, 32768.0]);
+        expect(mapboxDEM.getUnpackVector()).toEqual([6553.6, 25.6, 0.1, 10000.0]);
+        expect(customDEM.getUnpackVector()).toEqual([1.0, 2.0, 3.0, 4.0]);
     });
 });
 
-describe('DEMData#getImage', () => {
-    test('Image is correctly returned', () => {
-        const imageData = createMockImage(4, 4);
-        const dem = new DEMData('0', imageData, 'terrarium');
-
+function testGetPixels(dem: DEMData, imageData: RGBAImage) {
+    return () => {
         expect(dem.getPixels()).toEqual(imageData);
-    });
+    };
+}
+
+describe('DEMData#getImage', () => {
+    const imageData = createMockImage(4, 4);
+    const mapboxDEM = new DEMData('0', imageData, 'terrarium');
+    const terrariumDEM = new DEMData('0', imageData, 'terrarium');
+    const customDEM = new DEMData('0', imageData, 'terrarium');
+
+    test('Image is correctly returned - mapbox', testGetPixels(mapboxDEM, imageData));
+    test('Image is correctly returned - terrarium', testGetPixels(terrariumDEM, imageData));
+    test('Image is correctly returned - custom', testGetPixels(customDEM, imageData));
 });

package/src/data/dem_data.ts

@@ -13,6 +13,8 @@ import {register} from '../util/web_worker_transfer';
 // surrounding pixel values to compute the slope at that pixel, and we cannot accurately calculate the slope at pixels on a
 // tile's edge without backfilling from neighboring tiles.
 
+export type DEMEncoding = 'mapbox' | 'terrarium' | 'custom'
+
 export class DEMData {
     uid: string;
     data: Uint32Array;
@@ -20,21 +22,48 @@ export class DEMData {
     dim: number;
     min: number;
     max: number;
-    encoding: 'mapbox' | 'terrarium';
+    redFactor: number;
+    greenFactor: number;
+    blueFactor: number;
+    baseShift: number;
 
     // RGBAImage data has uniform 1px padding on all sides: square tile edge size defines stride
     // and dim is calculated as stride - 2.
-    constructor(uid: string, data: RGBAImage, encoding: 'mapbox' | 'terrarium') {
+    constructor(uid: string, data: RGBAImage, encoding: DEMEncoding, redFactor = 1.0, greenFactor = 1.0, blueFactor = 1.0, baseShift = 0.0) {
         this.uid = uid;
         if (data.height !== data.width) throw new RangeError('DEM tiles must be square');
-        if (encoding && encoding !== 'mapbox' && encoding !== 'terrarium') {
-            warnOnce(`"${encoding}" is not a valid encoding type. Valid types include "mapbox" and "terrarium".`);
+        if (encoding && !['mapbox', 'terrarium', 'custom'].includes(encoding)) {
+            warnOnce(`"${encoding}" is not a valid encoding type. Valid types include "mapbox", "terrarium" and "custom".`);
             return;
         }
         this.stride = data.height;
         const dim = this.dim = data.height - 2;
         this.data = new Uint32Array(data.data.buffer);
-        this.encoding = encoding || 'mapbox';
+        switch (encoding) {
+            case 'terrarium':
+                // unpacking formula for mapzen terrarium:
+                // https://aws.amazon.com/public-datasets/terrain/
+                this.redFactor = 256.0;
+                this.greenFactor = 1.0;
+                this.blueFactor = 1.0 / 256.0;
+                this.baseShift = 32768.0;
+                break;
+            case 'custom':
+                this.redFactor = redFactor;
+                this.greenFactor = greenFactor;
+                this.blueFactor = blueFactor;
+                this.baseShift = baseShift;
+                break;
+            case 'mapbox':
+            default:
+                // unpacking formula for mapbox.terrain-rgb:
+                // https://www.mapbox.com/help/access-elevation-data/#mapbox-terrain-rgb
+                this.redFactor = 6553.6;
+                this.greenFactor = 25.6;
+                this.blueFactor = 0.1;
+                this.baseShift = 10000.0;
+                break;
+        }
 
         // in order to avoid flashing seams between tiles, here we are initially populating a 1px border of pixels around the image
         // with the data of the nearest pixel from the image. this data is eventually replaced when the tile's neighboring
@@ -70,12 +99,11 @@ export class DEMData {
     get(x: number, y: number) {
         const pixels = new Uint8Array(this.data.buffer);
         const index = this._idx(x, y) * 4;
-        const unpack = this.encoding === 'terrarium' ? this._unpackTerrarium : this._unpackMapbox;
-        return unpack(pixels[index], pixels[index + 1], pixels[index + 2]);
+        return this.unpack(pixels[index], pixels[index + 1], pixels[index + 2]);
     }
 
     getUnpackVector() {
-        return this.encoding === 'terrarium' ? [256.0, 1.0, 1.0 / 256.0, 32768.0] : [6553.6, 25.6, 0.1, 10000.0];
+        return [this.redFactor, this.greenFactor, this.blueFactor, this.baseShift];
     }
 
     _idx(x: number, y: number) {
@@ -83,16 +111,8 @@ export class DEMData {
         return (y + 1) * this.stride + (x + 1);
     }
 
-    _unpackMapbox(r: number, g: number, b: number) {
-        // unpacking formula for mapbox.terrain-rgb:
-        // https://www.mapbox.com/help/access-elevation-data/#mapbox-terrain-rgb
-        return ((r * 256 * 256 + g * 256.0 + b) / 10.0 - 10000.0);
-    }
-
-    _unpackTerrarium(r: number, g: number, b: number) {
-        // unpacking formula for mapzen terrarium:
-        // https://aws.amazon.com/public-datasets/terrain/
-        return ((r * 256 + g + b / 256) - 32768.0);
+    unpack(r: number, g: number, b: number) {
+        return (r * this.redFactor + g * this.greenFactor + b * this.blueFactor - this.baseShift);
     }
 
     getPixels() {

package/src/render/glyph_manager.test.ts

@@ -95,13 +95,13 @@ describe('GlyphManager', () => {
         manager.getGlyphs({'Arial Unicode MS': [0x3005]}, (err, glyphs) => {
             expect(err).toBeFalsy();
             expect(glyphs['Arial Unicode MS'][0x3005]).not.toBeNull();
-            //Request char from Katakana range (te)
+            //Request char from Katakana range (te テ)
             manager.getGlyphs({'Arial Unicode MS': [0x30C6]}, (err, glyphs) => {
                 expect(err).toBeFalsy();
                 const glyph = glyphs['Arial Unicode MS'][0x30c6];
                 //Ensure that te is locally generated.
-                expect(glyph.bitmap.height).toBe(6);
-                expect(glyph.bitmap.width).toBe(6);
+                expect(glyph.bitmap.height).toBe(12);
+                expect(glyph.bitmap.width).toBe(12);
                 done();
             });
         });
@@ -110,9 +110,10 @@ describe('GlyphManager', () => {
     test('GlyphManager generates CJK PBF locally', done => {
         const manager = createGlyphManager('sans-serif');
 
+        // character 平
         manager.getGlyphs({'Arial Unicode MS': [0x5e73]}, (err, glyphs) => {
             expect(err).toBeFalsy();
-            expect(glyphs['Arial Unicode MS'][0x5e73].metrics.advance).toBe(1);
+            expect(glyphs['Arial Unicode MS'][0x5e73].metrics.advance).toBe(0.5);
             done();
         });
     });
@@ -120,10 +121,10 @@ describe('GlyphManager', () => {
     test('GlyphManager generates Katakana PBF locally', done => {
         const manager = createGlyphManager('sans-serif');
 
-        // Katakana letter te
+        // Katakana letter te テ
         manager.getGlyphs({'Arial Unicode MS': [0x30c6]}, (err, glyphs) => {
             expect(err).toBeFalsy();
-            expect(glyphs['Arial Unicode MS'][0x30c6].metrics.advance).toBe(1);
+            expect(glyphs['Arial Unicode MS'][0x30c6].metrics.advance).toBe(0.5);
             done();
         });
     });
@@ -131,10 +132,10 @@ describe('GlyphManager', () => {
     test('GlyphManager generates Hiragana PBF locally', done => {
         const manager = createGlyphManager('sans-serif');
 
-        //Hiragana letter te
+        //Hiragana letter te て
         manager.getGlyphs({'Arial Unicode MS': [0x3066]}, (err, glyphs) => {
             expect(err).toBeFalsy();
-            expect(glyphs['Arial Unicode MS'][0x3066].metrics.advance).toBe(1);
+            expect(glyphs['Arial Unicode MS'][0x3066].metrics.advance).toBe(0.5);
             done();
         });
     });
@@ -143,7 +144,7 @@ describe('GlyphManager', () => {
 
         const manager = createGlyphManager('sans-serif');
         const drawSpy = GlyphManager.TinySDF.prototype.draw = jest.fn().mockImplementation(() => {
-            return {data: new Uint8ClampedArray(900)} as any;
+            return {data: new Uint8ClampedArray(60 * 60)} as any;
         });
 
         // Katakana letter te