maplibre-gl 2.0.3 → 2.1.1

package/dist/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "maplibre-gl",
   "description": "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library",
-  "version": "2.0.3",
+  "version": "2.1.1",
   "main": "dist/maplibre-gl.js",
   "style": "dist/maplibre-gl.css",
   "license": "BSD-3-Clause",
@@ -9,13 +9,10 @@
     "type": "git",
     "url": "git://github.com/maplibre/maplibre-gl-js.git"
   },
-  "engines": {
-    "node": ">=16.0.0"
-  },
   "types": "dist/maplibre-gl.d.ts",
   "type": "module",
   "dependencies": {
-    "@mapbox/geojson-rewind": "^0.5.0",
+    "@mapbox/geojson-rewind": "^0.5.1",
     "@mapbox/jsonlint-lines-primitives": "^2.0.2",
     "@mapbox/mapbox-gl-supported": "^2.0.1",
     "@mapbox/point-geometry": "^0.1.0",
@@ -23,154 +20,137 @@
     "@mapbox/unitbezier": "^0.0.1",
     "@mapbox/vector-tile": "^1.3.1",
     "@mapbox/whoots-js": "^3.1.0",
-    "@types/geojson": "^7946.0.7",
-    "@types/mapbox__point-geometry": "^0.1.2",
-    "@types/mapbox__vector-tile": "^1.3.0",
-    "@types/pbf": "^3.0.2",
     "csscolorparser": "~1.0.3",
-    "earcut": "^2.2.2",
+    "earcut": "^2.2.3",
     "geojson-vt": "^3.2.1",
-    "gl-matrix": "^3.2.1",
+    "gl-matrix": "^3.4.3",
     "murmurhash-js": "^1.0.0",
     "pbf": "^3.2.1",
-    "potpack": "^1.0.1",
+    "potpack": "^1.0.2",
     "quickselect": "^2.0.0",
     "supercluster": "^7.1.4",
     "tinyqueue": "^2.0.3",
-    "vt-pbf": "^3.1.1"
+    "vt-pbf": "^3.1.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
+    "@babel/core": "^7.16.12",
     "@mapbox/gazetteer": "^5.1.0",
-    "@mapbox/mapbox-gl-rtl-text": "^0.2.1",
+    "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
     "@mapbox/mvt-fixtures": "^3.6.0",
-    "@octokit/rest": "^18.10.0",
-    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-replace": "^3.0.1",
     "@rollup/plugin-strip": "^2.1.0",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@types/babel__core": "^7.1.12",
-    "@types/babelify": "^7.3.6",
-    "@types/benchmark": "^2.1.0",
-    "@types/browserify": "^12.0.36",
-    "@types/cssnano": "^4.0.0",
-    "@types/d3": "^4.13.12",
-    "@types/diff": "^4.0.2",
+    "@types/babel__core": "^7.1.18",
+    "@types/babelify": "^7.3.7",
+    "@types/benchmark": "^2.1.1",
+    "@types/browserify": "^12.0.37",
+    "@types/cssnano": "^5.0.0",
+    "@types/d3": "^7.1.0",
+    "@types/diff": "^5.0.2",
     "@types/earcut": "^2.1.1",
     "@types/ejs": "^3.1.0",
-    "@types/eslint": "^8.2.1",
+    "@types/eslint": "^8.4.1",
+    "@types/geojson": "^7946.0.8",
     "@types/gl": "^4.1.0",
-    "@types/glob": "^7.1.3",
-    "@types/jest": "^27.0.2",
-    "@types/jsdom": "^16.2.5",
-    "@types/jsonwebtoken": "^8.5.5",
+    "@types/glob": "^7.2.0",
+    "@types/jest": "^27.4.0",
+    "@types/jsdom": "^16.2.14",
     "@types/lodash.template": "^4.5.0",
-    "@types/minimist": "^1.2.1",
+    "@types/mapbox__point-geometry": "^0.1.2",
+    "@types/mapbox__vector-tile": "^1.3.0",
+    "@types/minimist": "^1.2.2",
     "@types/murmurhash-js": "^1.0.3",
-    "@types/node-notifier": "^8.0.0",
-    "@types/npm-packlist": "^1.1.1",
-    "@types/offscreencanvas": "^2019.6.3",
-    "@types/pixelmatch": "^5.2.2",
+    "@types/node-notifier": "^8.0.2",
+    "@types/offscreencanvas": "^2019.6.4",
+    "@types/pbf": "^3.0.2",
+    "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^6.0.1",
     "@types/puppeteer": "^5.4.4",
-    "@types/react": "^17.0.19",
-    "@types/react-dom": "^17.0.9",
-    "@types/request": "^2.48.7",
-    "@types/rollup-plugin-json": "^3.0.2",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
+    "@types/request": "^2.48.8",
+    "@types/rollup-plugin-json": "^3.0.3",
     "@types/selenium-webdriver": "^4.0.16",
     "@types/shuffle-seed": "^1.1.0",
-    "@types/sinon": "^10.0.2",
-    "@types/stylelint": "^13.13.2",
-    "@types/supercluster": "^5.0.2",
+    "@types/sinon": "^10.0.9",
+    "@types/supercluster": "^5.0.3",
     "@types/tape": "^4.13.2",
     "@types/window-or-global": "^1.0.4",
-    "@typescript-eslint/eslint-plugin": "^5.9.1",
-    "@typescript-eslint/parser": "^5.9.1",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1",
     "address": "^1.1.2",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^27.2.5",
+    "babel-jest": "^27.4.6",
     "babelify": "^10.0.0",
     "benchmark": "^2.1.4",
     "browserify": "^17.0.0",
     "canvas": "^2.9.0",
-    "chokidar": "^3.0.2",
-    "cssnano": "^5.0.8",
-    "d3": "^4.12.0",
-    "diff": "^4.0.1",
-    "documentation": "~12.1.1",
-    "dts-bundle-generator": "^6.0.0",
+    "chokidar": "^3.5.3",
+    "cssnano": "^5.0.16",
+    "d3": "^7.3.0",
+    "d3-queue": "^3.0.7",
+    "diff": "^5.0.0",
+    "documentation": "13.0.2",
+    "dts-bundle-generator": "^6.4.0",
     "ejs": "^3.1.6",
-    "eslint": "^7.32.0",
+    "eslint": "^8.7.0",
     "eslint-config-mourner": "^3.0.0",
-    "eslint-plugin-html": "^6.1.2",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^25.2.2",
-    "eslint-plugin-jsdoc": "^37.0.3",
-    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-html": "^6.2.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^26.0.0",
+    "eslint-plugin-jsdoc": "^37.7.0",
+    "eslint-plugin-react": "^7.28.0",
     "gl": "^5.0.0",
-    "glob": "^7.1.4",
-    "is-builtin-module": "^3.0.0",
-    "jest": "^27.2.4",
+    "glob": "^7.2.0",
+    "is-builtin-module": "^3.1.0",
+    "jest": "^27.4.7",
     "jest-canvas-mock": "^2.3.1",
-    "jest-codemods": "^0.25.0",
     "jest-raw-loader": "^1.0.1",
-    "jscodeshift": "^0.13.0",
-    "jsdom": "^13.0.0",
+    "jsdom": "^19.0.0",
     "json-stringify-pretty-compact": "^3.0.0",
-    "jsonwebtoken": "^8.3.0",
-    "list-npm-contents": "^1.0.2",
-    "lodash": "^4.17.19",
-    "lodash.template": "^4.5.0",
     "mapbox-gl-styles": "^2.0.2",
     "minimist": "^1.2.5",
     "mock-geolocation": "^1.0.11",
     "node-notifier": "^10.0.0",
     "node-plantuml": "^0.9.0",
     "npm-font-open-sans": "^1.1.0",
-    "npm-packlist": "^3.0.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
-    "pirates": "^4.0.1",
-    "pixelmatch": "^5.1.0",
+    "pdf-merger-js": "^3.3.2",
+    "pixelmatch": "^5.2.1",
     "pngjs": "^6.0.0",
-    "postcss": "^8.3.11",
-    "postcss-cli": "^9.0.2",
+    "postcss": "^8.4.5",
+    "postcss-cli": "^9.1.0",
     "postcss-inline-svg": "^5.0.0",
-    "pretty-bytes": "^5.1.0",
-    "puppeteer": "^13.0.1",
-    "qrcode-terminal": "^0.12.0",
+    "pretty-bytes": "^5.6.0",
+    "puppeteer": "^13.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "replace-in-file": "^6.2.0",
     "request": "^2.88.0",
-    "rollup": "^2.56.3",
-    "rollup-plugin-buble": "^0.19.8",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.2.0",
+    "rollup": "^2.66.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-unassert": "^0.3.0",
     "rollup-pluginutils": "^2.8.2",
     "rw": "^1.3.3",
-    "selenium-webdriver": "^4.0.0-rc-1",
+    "selenium-webdriver": "^4.1.1",
     "semver": "^7.3.5",
     "shuffle-seed": "^1.1.6",
     "sinon": "^12.0.1",
-    "source-map-explorer": "^2.5.1",
+    "source-map-explorer": "^2.5.2",
     "st": "^3.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-standard": "^22.0.0",
-    "tap": "~12.4.1",
-    "tap-parser": "^10.0.1",
-    "tape": "^5.3.1",
+    "stylelint": "^14.3.0",
+    "stylelint-config-standard": "^24.0.0",
+    "tap-parser": "^10.1.0",
+    "tape": "^5.5.0",
     "tape-filter": "^1.0.4",
-    "testem": "^3.5.0",
-    "ts-jest": "^27.0.5",
-    "ts-node": "^10.2.1",
-    "typescript": "^4.5.4"
+    "testem": "^3.6.0",
+    "ts-jest": "^27.1.3",
+    "ts-node": "^10.4.0",
+    "typescript": "^4.5.5"
   },
   "browser": {
     "./rollup/build/tsc/src/util/web_worker.js": "./build/web_worker_replacement.js"
@@ -203,23 +183,21 @@
     "test": "run-s lint lint-css lint-docs test-unit",
     "test-suite": "run-s test-render test-query test-expressions",
     "test-suite-clean": "find test/integration/{render,query, expressions}-tests -mindepth 2 -type d -exec test -e \"{}/actual.png\" \\; -not \\( -exec test -e \"{}/style.json\" \\; \\) -print | xargs -t rm -r",
-    "test-unit": "tap --node-arg --no-warnings --node-arg --experimental-specifier-resolution=node --node-arg --experimental-json-modules --reporter classic --no-coverage test/unit",
-    "test-unit-file": "tap --node-arg --no-warnings --node-arg --experimental-specifier-resolution=node --node-arg --experimental-json-modules --reporter classic --no-coverage ",
-    "test-build": "tap --node-arg --no-warnings --node-arg --experimental-specifier-resolution=node --node-arg --experimental-json-modules --reporter classic --no-coverage test/build/**/*.test.js",
-    "test-browser": "tap --node-arg --no-warnings --node-arg --experimental-specifier-resolution=node --node-arg --experimental-json-modules --reporter classic --no-coverage test/browser/**/*.test.js",
+    "test-build": "jest ./test/build",
+    "test-browser": "jest ./test/browser",
     "test-render": "node --experimental-specifier-resolution=node --experimental-json-modules --max-old-space-size=2048 test/render.test.js",
     "watch-query": "testem -f test/integration/testem.cjs",
     "test-query": "testem ci -f test/integration/testem.cjs -R xunit > test/integration/query-tests/test-results.xml",
     "test-expressions": "node --experimental-specifier-resolution=node test/expression.test.js",
     "test-cov": "nyc --reporter=text-summary --reporter=lcov --cache run-s test-unit test-expressions test-query test-render",
-    "test-jest": "jest",
+    "test-unit": "jest ./src",
     "codegen": "node --loader ts-node/esm --experimental-specifier-resolution=node build/generate-style-code.ts && node --loader ts-node/esm --experimental-specifier-resolution=node build/generate-struct-arrays.ts && node --loader ts-node/esm --experimental-specifier-resolution=node build/generate-style-spec.ts",
+    "benchmark": "node bench/run-benchmarks.js",
     "gl-stats": "node bench/gl-stats.js"
   },
   "files": [
     "build/",
-    "dist/maplibre-gl*",
-    "dist/style-spec/",
+    "dist/*",
     "src/"
   ]
 }

package/src/css/maplibre-gl.css

@@ -1,9 +1,9 @@
 .maplibregl-map,
 .mapboxgl-map {
-    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
     overflow: hidden;
     position: relative;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
 }
 
 .maplibregl-canvas,
@@ -117,9 +117,9 @@
 
 .maplibregl-ctrl-group:not(:empty),
 .mapboxgl-ctrl-group:not(:empty) {
-    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: 0 0 2px rgb(0 0 0 / 10%);
+    -webkit-box-shadow: 0 0 2px rgb(0 0 0 / 10%);
+    box-shadow: 0 0 0 2px rgb(0 0 0 / 10%);
 }
 
 @media (-ms-high-contrast: active) {
@@ -179,7 +179,7 @@
 .maplibregl-ctrl-group button:focus,
 .mapboxgl-ctrl-attrib-button:focus,
 .mapboxgl-ctrl-group button:focus {
-    box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
+    box-shadow: 0 0 2px 2px rgb(0 150 255 / 100%);
 }
 
 .maplibregl-ctrl button:disabled,
@@ -194,12 +194,12 @@
 
 .maplibregl-ctrl button:not(:disabled):hover,
 .mapboxgl-ctrl button:not(:disabled):hover {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: rgb(0 0 0 / 5%);
 }
 
 .maplibregl-ctrl-group button:focus:focus-visible,
 .mapboxgl-ctrl-group button:focus:focus-visible {
-    box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
+    box-shadow: 0 0 2px 2px rgb(0 150 255 / 100%);
 }
 
 .maplibregl-ctrl-group button:focus:not(:focus-visible),
@@ -224,75 +224,75 @@
 
 .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
 .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
-    background-image: svg-load('svg/maplibregl-ctrl-zoom-out.svg', fill: #333);
+    background-image: svg-load("svg/maplibregl-ctrl-zoom-out.svg", fill: #333);
 }
 
 .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
 .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
-    background-image: svg-load('svg/maplibregl-ctrl-zoom-in.svg', fill: #333);
+    background-image: svg-load("svg/maplibregl-ctrl-zoom-in.svg", fill: #333);
 }
 
 @media (-ms-high-contrast: active) {
     .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
     .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
-        background-image: svg-load('svg/maplibregl-ctrl-zoom-out.svg', fill: #fff);
+        background-image: svg-load("svg/maplibregl-ctrl-zoom-out.svg", fill: #fff);
     }
 
     .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
     .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
-        background-image: svg-load('svg/maplibregl-ctrl-zoom-in.svg', fill: #fff);
+        background-image: svg-load("svg/maplibregl-ctrl-zoom-in.svg", fill: #fff);
     }
 }
 
 @media (-ms-high-contrast: black-on-white) {
     .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
     .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
-        background-image: svg-load('svg/maplibregl-ctrl-zoom-out.svg', fill: #000);
+        background-image: svg-load("svg/maplibregl-ctrl-zoom-out.svg", fill: #000);
     }
 
     .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
     .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
-        background-image: svg-load('svg/maplibregl-ctrl-zoom-in.svg', fill: #000);
+        background-image: svg-load("svg/maplibregl-ctrl-zoom-in.svg", fill: #000);
     }
 }
 
 .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon,
 .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
-    background-image: svg-load('svg/maplibregl-ctrl-fullscreen.svg', fill: #333);
+    background-image: svg-load("svg/maplibregl-ctrl-fullscreen.svg", fill: #333);
 }
 
 .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon,
 .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
-    background-image: svg-load('svg/maplibregl-ctrl-shrink.svg');
+    background-image: svg-load("svg/maplibregl-ctrl-shrink.svg");
 }
 
 @media (-ms-high-contrast: active) {
     .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon,
     .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
-        background-image: svg-load('svg/maplibregl-ctrl-fullscreen.svg', fill: #fff);
+        background-image: svg-load("svg/maplibregl-ctrl-fullscreen.svg", fill: #fff);
     }
 
     .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon,
     .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
-        background-image: svg-load('svg/maplibregl-ctrl-shrink.svg', fill: #fff);
+        background-image: svg-load("svg/maplibregl-ctrl-shrink.svg", fill: #fff);
     }
 }
 
 @media (-ms-high-contrast: black-on-white) {
     .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon,
     .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
-        background-image: svg-load('svg/maplibregl-ctrl-fullscreen.svg', fill: #000);
+        background-image: svg-load("svg/maplibregl-ctrl-fullscreen.svg", fill: #000);
     }
 
     .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon,
     .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
-        background-image: svg-load('svg/maplibregl-ctrl-shrink.svg', fill: #000);
+        background-image: svg-load("svg/maplibregl-ctrl-shrink.svg", fill: #000);
     }
 }
 
 .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon,
 .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
-    background-image: svg-load('svg/maplibregl-ctrl-compass.svg', fill: #333);
+    background-image: svg-load("svg/maplibregl-ctrl-compass.svg", fill: #333);
 }
 
 @media (-ms-high-contrast: active) {
@@ -310,7 +310,7 @@
 @media (-ms-high-contrast: black-on-white) {
     .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon,
     .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
-        background-image: svg-load('svg/maplibregl-ctrl-compass.svg', fill: #000);
+        background-image: svg-load("svg/maplibregl-ctrl-compass.svg", fill: #000);
     }
 }
 
@@ -483,7 +483,7 @@ a.mapboxgl-ctrl-logo {
     background-repeat: no-repeat;
     cursor: pointer;
     overflow: hidden;
-    background-image: svg-load('svg/maplibregl-ctrl-logo.svg');
+    background-image: svg-load("svg/maplibregl-ctrl-logo.svg");
 }
 
 a.maplibregl-ctrl-logo.maplibregl-compact,
@@ -519,7 +519,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
 .maplibregl-ctrl.maplibregl-ctrl-attrib,
 .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
     padding: 0 5px;
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgb(255 255 255 / 50%);
     margin: 0;
 }
 
@@ -558,8 +558,8 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
         display: none;
         cursor: pointer;
         position: absolute;
-        background-image: svg-load('svg/maplibregl-ctrl-attrib.svg');
-        background-color: rgba(255, 255, 255, 0.5);
+        background-image: svg-load("svg/maplibregl-ctrl-attrib.svg");
+        background-color: rgb(255 255 255 / 50%);
         width: 24px;
         height: 24px;
         box-sizing: border-box;
@@ -586,7 +586,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
 
     .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button,
     .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button {
-        background-color: rgba(0, 0, 0, 0.05);
+        background-color: rgb(0 0 0 / 5%);
     }
 
     .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib.maplibregl-compact::after,
@@ -617,20 +617,20 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
 @media screen and (-ms-high-contrast: active) {
     .maplibregl-ctrl-attrib.maplibregl-compact::after,
     .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
-        background-image: svg-load('svg/maplibregl-ctrl-attrib.svg', fill=#fff);
+        background-image: svg-load("svg/maplibregl-ctrl-attrib.svg", fill=#fff);
     }
 }
 
 @media screen and (-ms-high-contrast: black-on-white) {
     .maplibregl-ctrl-attrib.maplibregl-compact::after,
     .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
-        background-image: svg-load('svg/maplibregl-ctrl-attrib.svg');
+        background-image: svg-load("svg/maplibregl-ctrl-attrib.svg");
     }
 }
 
 .maplibregl-ctrl-attrib a,
 .mapboxgl-ctrl-attrib a {
-    color: rgba(0, 0, 0, 0.75);
+    color: rgb(0 0 0 / 75%);
     text-decoration: none;
 }
 
@@ -647,7 +647,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
 
 .maplibregl-ctrl-scale,
 .mapboxgl-ctrl-scale {
-    background-color: rgba(255, 255, 255, 0.75);
+    background-color: rgb(255 255 255 / 75%);
     font-size: 10px;
     border-width: medium 2px 2px;
     border-style: none solid solid;
@@ -789,7 +789,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
 
 .maplibregl-popup-close-button:hover,
 .mapboxgl-popup-close-button:hover {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: rgb(0 0 0 / 5%);
 }
 
 .maplibregl-popup-content,
@@ -797,7 +797,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     position: relative;
     background: #fff;
     border-radius: 3px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
     padding: 15px 10px;
     pointer-events: auto;
 }
@@ -862,7 +862,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
 .maplibregl-user-location-dot::before,
 .mapboxgl-user-location-dot::before {
     background-color: #1da1f2;
-    content: '';
+    content: "";
     width: 15px;
     height: 15px;
     border-radius: 50%;
@@ -877,14 +877,14 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
 .mapboxgl-user-location-dot::after {
     border-radius: 50%;
     border: 2px solid #fff;
-    content: '';
+    content: "";
     height: 19px;
     left: -2px;
     position: absolute;
     top: -2px;
     width: 19px;
     box-sizing: border-box;
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
+    box-shadow: 0 0 3px rgb(0 0 0 / 35%);
 }
 
 @-webkit-keyframes maplibregl-user-location-dot-pulse {

package/src/data/bucket/symbol_bucket.test.ts

@@ -11,7 +11,7 @@ import {OverscaledTileID} from '../../source/tile_id';
 import Tile from '../../source/tile';
 import CrossTileSymbolIndex from '../../symbol/cross_tile_symbol_index';
 import FeatureIndex from '../../data/feature_index';
-import {createSymbolBucket, createSymbolIconBucket} from '../../../test/util/create_symbol_layer_jest';
+import {createSymbolBucket, createSymbolIconBucket} from '../../../test/util/create_symbol_layer';
 import {RGBAImage} from '../../util/image';
 import {ImagePosition} from '../../render/image_atlas';
 import {IndexedFeature, PopulateParameters} from '../bucket';

package/src/data/bucket/symbol_bucket.ts

@@ -48,7 +48,7 @@ import type {
 } from '../bucket';
 import type {CollisionBoxArray, CollisionBox, SymbolInstance} from '../array_types';
 import type {StructArray, StructArrayMember, ViewType} from '../../util/struct_array';
-import SymbolStyleLayer from '../../style/style_layer/symbol_style_layer';
+import SymbolStyleLayer, {getOverlapMode} from '../../style/style_layer/symbol_style_layer';
 import type Context from '../../gl/context';
 import type IndexBuffer from '../../gl/index_buffer';
 import type VertexBuffer from '../../gl/vertex_buffer';
@@ -388,8 +388,8 @@ class SymbolBucket implements Bucket {
         const sortKey = layout.get('symbol-sort-key');
         const zOrder = layout.get('symbol-z-order');
         this.canOverlap =
-            layout.get('text-allow-overlap') ||
-            layout.get('icon-allow-overlap') ||
+            getOverlapMode(layout, 'text-overlap', 'text-allow-overlap') !== 'never' ||
+            getOverlapMode(layout, 'icon-overlap', 'icon-allow-overlap') !== 'never' ||
             layout.get('text-ignore-placement') ||
             layout.get('icon-ignore-placement');
         this.sortFeaturesByKey = zOrder !== 'viewport-y' && !sortKey.isConstant();

package/src/data/program_configuration.ts

@@ -129,7 +129,7 @@ class ConstantBinder implements UniformBinder {
 
 class CrossFadedConstantBinder implements UniformBinder {
     uniformNames: Array<string>;
-    patternFrom: Array<number> ;
+    patternFrom: Array<number>;
     patternTo: Array<number>;
     pixelRatioFrom: number;
     pixelRatioTo: number;

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/glyph_manager.ts

@@ -103,7 +103,7 @@ 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;
                     } | null) => {

package/src/render/painter.ts

@@ -92,6 +92,7 @@ class Painter {
     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) {

package/src/render/program/circle_program.ts

@@ -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
     };
 };