maplibre-gl 2.0.5 → 2.1.0

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.5",
+  "version": "2.1.0",
   "main": "dist/maplibre-gl.js",
   "style": "dist/maplibre-gl.css",
   "license": "BSD-3-Clause",
@@ -20,10 +20,6 @@
     "@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",
     "geojson-vt": "^3.2.1",
@@ -41,8 +37,6 @@
     "@mapbox/gazetteer": "^5.1.0",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.1",
     "@mapbox/mvt-fixtures": "^3.6.0",
-    "@octokit/rest": "^18.10.0",
-    "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
@@ -54,22 +48,24 @@
     "@types/benchmark": "^2.1.0",
     "@types/browserify": "^12.0.36",
     "@types/cssnano": "^5.0.0",
-    "@types/d3": "^4.13.12",
+    "@types/d3": "^5.16.4",
     "@types/diff": "^4.0.2",
     "@types/earcut": "^2.1.1",
     "@types/ejs": "^3.1.0",
     "@types/eslint": "^8.2.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/jsdom": "^16.2.14",
     "@types/lodash.template": "^4.5.0",
+    "@types/mapbox__point-geometry": "^0.1.2",
+    "@types/mapbox__vector-tile": "^1.3.0",
     "@types/minimist": "^1.2.1",
     "@types/murmurhash-js": "^1.0.3",
     "@types/node-notifier": "^8.0.0",
-    "@types/npm-packlist": "^1.1.1",
     "@types/offscreencanvas": "^2019.6.3",
+    "@types/pbf": "^3.0.2",
     "@types/pixelmatch": "^5.2.2",
     "@types/pngjs": "^6.0.1",
     "@types/puppeteer": "^5.4.4",
@@ -80,7 +76,7 @@
     "@types/selenium-webdriver": "^4.0.16",
     "@types/shuffle-seed": "^1.1.0",
     "@types/sinon": "^10.0.2",
-    "@types/stylelint": "^13.13.2",
+    "@types/stylelint": "^14.0.0",
     "@types/supercluster": "^5.0.2",
     "@types/tape": "^4.13.2",
     "@types/window-or-global": "^1.0.4",
@@ -95,16 +91,17 @@
     "canvas": "^2.9.0",
     "chokidar": "^3.0.2",
     "cssnano": "^5.0.8",
-    "d3": "^4.12.0",
+    "d3": "^5.16.0",
+    "d3-queue": "^3.0.7",
     "diff": "^4.0.1",
     "documentation": "^12.3.0",
     "dts-bundle-generator": "^6.0.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-jest": "^26.0.0",
     "eslint-plugin-jsdoc": "^37.0.3",
     "eslint-plugin-react": "^7.25.1",
     "gl": "^5.0.0",
@@ -112,13 +109,9 @@
     "is-builtin-module": "^3.0.0",
     "jest": "^27.2.4",
     "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",
@@ -127,10 +120,9 @@
     "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",
+    "pdf-merger-js": "^3.2.1",
     "pixelmatch": "^5.1.0",
     "pngjs": "^6.0.0",
     "postcss": "^8.3.11",
@@ -138,10 +130,8 @@
     "postcss-inline-svg": "^5.0.0",
     "pretty-bytes": "^5.1.0",
     "puppeteer": "^13.0.1",
-    "qrcode-terminal": "^0.12.0",
     "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-sourcemaps": "^0.6.3",
@@ -155,13 +145,12 @@
     "sinon": "^12.0.1",
     "source-map-explorer": "^2.5.1",
     "st": "^3.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-standard": "^22.0.0",
-    "tap": "~12.4.1",
+    "stylelint": "^14.3.0",
+    "stylelint-config-standard": "^24.0.0",
     "tap-parser": "^10.0.1",
     "tape": "^5.3.1",
     "tape-filter": "^1.0.4",
-    "testem": "^3.5.0",
+    "testem": "^3.6.0",
     "ts-jest": "^27.0.5",
     "ts-node": "^10.4.0",
     "typescript": "^4.5.4"
@@ -197,17 +186,16 @@
     "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": [

package/src/css/maplibre-gl.css

@@ -1,6 +1,6 @@
 .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);
@@ -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,
@@ -558,7 +558,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
         display: none;
         cursor: pointer;
         position: absolute;
-        background-image: svg-load('svg/maplibregl-ctrl-attrib.svg');
+        background-image: svg-load("svg/maplibregl-ctrl-attrib.svg");
         background-color: rgba(255, 255, 255, 0.5);
         width: 24px;
         height: 24px;
@@ -617,14 +617,14 @@ 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");
     }
 }
 
@@ -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,7 +877,7 @@ 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;

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

package/src/render/program/line_program.ts

@@ -99,7 +99,7 @@ const lineUniformValues = (painter: Painter, tile: Tile, layer: LineStyleLayer):
     return {
         'u_matrix': calculateMatrix(painter, tile, layer),
         'u_ratio': 1 / pixelsToTileUnits(tile, 1, transform.zoom),
-        'u_device_pixel_ratio': devicePixelRatio,
+        'u_device_pixel_ratio': painter.pixelRatio,
         'u_units_to_pixels': [
             1 / transform.pixelsToGLUnits[0],
             1 / transform.pixelsToGLUnits[1]
@@ -127,7 +127,7 @@ const linePatternUniformValues = (
         'u_texsize': tile.imageAtlasTexture.size,
         // camera zoom ratio
         'u_ratio': 1 / pixelsToTileUnits(tile, 1, transform.zoom),
-        'u_device_pixel_ratio': devicePixelRatio,
+        'u_device_pixel_ratio': painter.pixelRatio,
         'u_image': 0,
         'u_scale': [tileZoomRatio, crossfade.fromScale, crossfade.toScale],
         'u_fade': crossfade.t,
@@ -160,7 +160,7 @@ const lineSDFUniformValues = (
     return extend(lineUniformValues(painter, tile, layer), {
         'u_patternscale_a': [tileRatio / widthA, -posA.height / 2],
         'u_patternscale_b': [tileRatio / widthB, -posB.height / 2],
-        'u_sdfgamma': lineAtlas.width / (Math.min(widthA, widthB) * 256 * devicePixelRatio) / 2,
+        'u_sdfgamma': lineAtlas.width / (Math.min(widthA, widthB) * 256 * painter.pixelRatio) / 2,
         'u_image': 0,
         'u_tex_y_a': posA.y,
         'u_tex_y_b': posB.y,

package/src/render/program/symbol_program.ts

@@ -195,7 +195,7 @@ const symbolSDFUniformValues = (
         rotateInShader, pitchWithMap, painter, matrix, labelPlaneMatrix,
         glCoordMatrix, isText, texSize), {
         'u_gamma_scale': (pitchWithMap ? Math.cos(transform._pitch) * transform.cameraToCenterDistance : 1),
-        'u_device_pixel_ratio': devicePixelRatio,
+        'u_device_pixel_ratio': painter.pixelRatio,
         'u_is_halo': +isHalo
     });
 };

package/src/source/geojson_source.test.ts

@@ -318,7 +318,8 @@ describe('GeoJSONSource#update', () => {
 
         const source = new GeoJSONSource('id', {data: {}} as GeoJSONSourceOptions, mockDispatcher, undefined);
         source.map = {
-            transform: {} as Transform
+            transform: {} as Transform,
+            getPixelRatio() { return 1; }
         } as any;
 
         source.on('data', (e) => {

package/src/source/geojson_source.ts

@@ -299,7 +299,7 @@ class GeoJSONSource extends Evented implements Source {
             maxZoom: this.maxzoom,
             tileSize: this.tileSize,
             source: this.id,
-            pixelRatio: devicePixelRatio,
+            pixelRatio: this.map.getPixelRatio(),
             showCollisionBoxes: this.map.showCollisionBoxes,
             promoteId: this.promoteId
         };

package/src/source/raster_dem_tile_source.test.ts

@@ -10,7 +10,8 @@ function createSource(options, transformCallback?) {
     source.onAdd({
         transform: {angle: 0, pitch: 0, showCollisionBoxes: false},
         _getMapId: () => 1,
-        _requestManager: new RequestManager(transformCallback)
+        _requestManager: new RequestManager(transformCallback),
+        getPixelRatio() { return 1; }
     } as any);
 
     source.on('error', (e) => {

package/src/source/raster_dem_tile_source.ts

@@ -37,7 +37,7 @@ class RasterDEMTileSource extends RasterTileSource implements Source {
     }
 
     loadTile(tile: Tile, callback: Callback<void>) {
-        const url = tile.tileID.canonical.url(this.tiles, this.scheme);
+        const url = tile.tileID.canonical.url(this.tiles, this.map.getPixelRatio(), this.scheme);
         tile.request = getImage(this.map._requestManager.transformRequest(url, ResourceType.Tile), imageLoaded.bind(this));
 
         tile.neighboringTiles = this._getNeighboringTiles(tile.tileID);

package/src/source/raster_tile_source.test.ts

@@ -10,7 +10,8 @@ function createSource(options, transformCallback?) {
     source.onAdd({
         transform: {angle: 0, pitch: 0, showCollisionBoxes: false},
         _getMapId: () => 1,
-        _requestManager: new RequestManager(transformCallback)
+        _requestManager: new RequestManager(transformCallback),
+        getPixelRatio() { return 1; }
     } as any);
 
     source.on('error', (e) => {

package/src/source/raster_tile_source.ts

@@ -104,7 +104,7 @@ class RasterTileSource extends Evented implements Source {
     }
 
     loadTile(tile: Tile, callback: Callback<void>) {
-        const url = tile.tileID.canonical.url(this.tiles, this.scheme);
+        const url = tile.tileID.canonical.url(this.tiles, this.map.getPixelRatio(), this.scheme);
         tile.request = getImage(this.map._requestManager.transformRequest(url, ResourceType.Tile), (err, img) => {
             delete tile.request;
 

package/src/source/source_cache.test.ts

@@ -15,7 +15,7 @@ class SourceMock extends Evented {
     id: string;
     minzoom: number;
     maxzoom: number;
-    hasTile: (tileID: OverscaledTileID) => boolean
+    hasTile: (tileID: OverscaledTileID) => boolean;
     sourceOptions: any;
 
     constructor(id: string, sourceOptions: any, _dispatcher, eventedParent: Evented) {

package/src/source/tile.test.ts

@@ -1,4 +1,4 @@
-import {createSymbolBucket} from '../../test/util/create_symbol_layer_jest';
+import {createSymbolBucket} from '../../test/util/create_symbol_layer';
 import Tile from '../source/tile';
 import GeoJSONWrapper, {Feature} from '../source/geojson_wrapper';
 import {OverscaledTileID} from '../source/tile_id';

package/src/source/tile_id.test.ts

@@ -33,35 +33,33 @@ describe('CanonicalTileID', () => {
     });
 
     test('.url replaces {z}/{x}/{y}', () => {
-        expect(new CanonicalTileID(2, 1, 0).url(['{z}/{x}/{y}.json'])).toBe('2/1/0.json');
+        expect(new CanonicalTileID(2, 1, 0).url(['{z}/{x}/{y}.json'], 1)).toBe('2/1/0.json');
     });
 
     test('.url replaces {quadkey}', () => {
-        expect(new CanonicalTileID(1, 0, 0).url(['quadkey={quadkey}'])).toBe('quadkey=0');
-        expect(new CanonicalTileID(2, 0, 0).url(['quadkey={quadkey}'])).toBe('quadkey=00');
-        expect(new CanonicalTileID(2, 1, 1).url(['quadkey={quadkey}'])).toBe('quadkey=03');
-        expect(new CanonicalTileID(17, 22914, 52870).url(['quadkey={quadkey}'])).toBe('quadkey=02301322130000230');
+        expect(new CanonicalTileID(1, 0, 0).url(['quadkey={quadkey}'], 1)).toBe('quadkey=0');
+        expect(new CanonicalTileID(2, 0, 0).url(['quadkey={quadkey}'], 1)).toBe('quadkey=00');
+        expect(new CanonicalTileID(2, 1, 1).url(['quadkey={quadkey}'], 1)).toBe('quadkey=03');
+        expect(new CanonicalTileID(17, 22914, 52870).url(['quadkey={quadkey}'], 1)).toBe('quadkey=02301322130000230');
 
         // Test case confirmed by quadkeytools package
         // https://bitbucket.org/steele/quadkeytools/rollup/build/tsc/src/master/test/quadkey.js?fileviewer=file-view-default#quadkey.js-57
-        expect(new CanonicalTileID(6, 29, 3).url(['quadkey={quadkey}'])).toBe('quadkey=011123');
+        expect(new CanonicalTileID(6, 29, 3).url(['quadkey={quadkey}'], 1)).toBe('quadkey=011123');
 
     });
 
     test('.url replaces {bbox-epsg-3857}', () => {
-        expect(new CanonicalTileID(1, 0, 0).url(['bbox={bbox-epsg-3857}'])).toBe('bbox=-20037508.342789244,0,0,20037508.342789244');
+        expect(new CanonicalTileID(1, 0, 0).url(['bbox={bbox-epsg-3857}'], 1)).toBe('bbox=-20037508.342789244,0,0,20037508.342789244');
     });
 
     test('.url replaces {ratio}', () => {
-        devicePixelRatio = 2;
-        expect(new CanonicalTileID(1, 0, 0).url(['r={ratio}'])).toBe('r=@2x');
-        devicePixelRatio = 1;
-        expect(new CanonicalTileID(1, 0, 0).url(['r={ratio}'])).toBe('r=');
+        expect(new CanonicalTileID(1, 0, 0).url(['r={ratio}'], 2)).toBe('r=@2x');
+        expect(new CanonicalTileID(1, 0, 0).url(['r={ratio}'], 1)).toBe('r=');
     });
 
     //Tests that multiple values of the same placeholder are replaced.
     test('.url replaces {z}/{x}/{y}/{z}/{x}/{y}', () => {
-        expect(new CanonicalTileID(2, 1, 0).url(['{z}/{x}/{y}/{z}/{x}/{y}.json'])).toBe('2/1/0/2/1/0.json');
+        expect(new CanonicalTileID(2, 1, 0).url(['{z}/{x}/{y}/{z}/{x}/{y}.json'], 1)).toBe('2/1/0/2/1/0.json');
     });
 
 });

package/src/source/tile_id.ts

@@ -28,7 +28,7 @@ export class CanonicalTileID {
     }
 
     // given a list of urls, choose a url template and return a tile URL
-    url(urls: Array<string>, scheme?: string | null) {
+    url(urls: Array<string>, pixelRatio: number, scheme?: string | null) {
         const bbox = getTileBBox(this.x, this.y, this.z);
         const quadkey = getQuadkey(this.z, this.x, this.y);
 
@@ -37,7 +37,7 @@ export class CanonicalTileID {
             .replace(/{z}/g, String(this.z))
             .replace(/{x}/g, String(this.x))
             .replace(/{y}/g, String(scheme === 'tms' ? (Math.pow(2, this.z) - this.y - 1) : this.y))
-            .replace(/{ratio}/g, devicePixelRatio > 1 ? '@2x' : '')
+            .replace(/{ratio}/g, pixelRatio > 1 ? '@2x' : '')
             .replace(/{quadkey}/g, quadkey)
             .replace(/{bbox-epsg-3857}/g, bbox);
     }

package/src/source/vector_tile_source.test.ts

@@ -15,7 +15,8 @@ function createSource(options, transformCallback?) {
         transform: {showCollisionBoxes: false},
         _getMapId: () => 1,
         _requestManager: new RequestManager(transformCallback),
-        style: {sourceCaches: {id: {clearTiles: () => {}}}}
+        style: {sourceCaches: {id: {clearTiles: () => {}}}},
+        getPixelRatio() { return 1; }
     } as any as Map);
 
     source.on('error', (e) => {

package/src/source/vector_tile_source.ts

@@ -178,7 +178,7 @@ class VectorTileSource extends Evented implements Source {
     }
 
     loadTile(tile: Tile, callback: Callback<void>) {
-        const url = tile.tileID.canonical.url(this.tiles, this.scheme);
+        const url = tile.tileID.canonical.url(this.tiles, this.map.getPixelRatio(), this.scheme);
         const params = {
             request: this.map._requestManager.transformRequest(url, ResourceType.Tile),
             uid: tile.uid,
@@ -187,7 +187,7 @@ class VectorTileSource extends Evented implements Source {
             tileSize: this.tileSize * tile.tileID.overscaleFactor(),
             type: this.type,
             source: this.id,
-            pixelRatio: devicePixelRatio,
+            pixelRatio: this.map.getPixelRatio(),
             showCollisionBoxes: this.map.showCollisionBoxes,
             promoteId: this.promoteId
         };