Use correct pixel ratio when creating image buffer from map.addImage() (#4645)

For images added using Mp.addImage - default to using pixel ratio : 1. When providing an Image HTMLElement, the pixel ratio can be adjusted by setting the img element's height and width accordingly. When providing an ArrayBuffer, we need to know the pixel ratio explicitly as already defined by the API.

Author: Asheem Mamoowala

src/symbol/sprite_atlas.js

@@ -21,7 +21,7 @@ class SpriteAtlas extends Evented {
         this.data = false;
         this.texture = 0; // WebGL ID
         this.filter = 0; // WebGL ID
-        this.pixelRatio = 1;
+        this.pixelRatio = browser.devicePixelRatio > 1 ? 2 : 1;
         this.dirty = true;
     }
 
@@ -52,11 +52,11 @@ class SpriteAtlas extends Evented {
             width = pixels.width;
             height = pixels.height;
             pixels = browser.getImageData(pixels);
-            pixelRatio = this.pixelRatio;
+            pixelRatio = 1;
         } else {
             width = options.width;
             height = options.height;
-            pixelRatio = options.pixelRatio || this.pixelRatio;
+            pixelRatio = options.pixelRatio || 1;
         }
 
         if (ArrayBuffer.isView(pixels)) {
@@ -81,7 +81,7 @@ class SpriteAtlas extends Evented {
             width: width / pixelRatio,
             height: height / pixelRatio,
             sdf: false,
-            pixelRatio: 1
+            pixelRatio: pixelRatio / this.pixelRatio
         };
         this.images[name] = image;
 
@@ -195,13 +195,9 @@ class SpriteAtlas extends Evented {
     }
 
     setSprite(sprite) {
-        if (sprite) {
-            this.pixelRatio = browser.devicePixelRatio > 1 ? 2 : 1;
-
-            if (this.canvas) {
-                this.canvas.width = this.width * this.pixelRatio;
-                this.canvas.height = this.height * this.pixelRatio;
-            }
+        if (sprite && this.canvas) {
+            this.canvas.width = this.width * this.pixelRatio;
+            this.canvas.height = this.height * this.pixelRatio;
         }
         this.sprite = sprite;
     }

test/integration/render-tests/runtime-styling/image-add-1x-image-1x-screen/expected.png

@@ -8,7 +8,7 @@
         [
           "addImage",
           "marker",
-          "./image/marker.png"
+          "./sprites/1x.png"
         ],
         [
           "addLayer",

test/integration/render-tests/runtime-styling/image-add/style.json renamed to test/integration/render-tests/runtime-styling/image-add-1x-image-1x-screen/style.json

@@ -0,0 +1,41 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64,
+      "pixelRatio": 2,
+      "operations": [
+        [
+          "addImage",
+          "marker",
+          "./sprites/1x.png"
+        ],
+        [
+          "addLayer",
+          {
+            "id": "geometry",
+            "type": "symbol",
+            "source": "geometry",
+            "layout": {
+              "icon-image": "marker"
+            }
+          }
+        ],
+        [
+          "wait"
+        ]
+      ]
+    }
+  },
+  "sources": {
+    "geometry": {
+      "type": "geojson",
+      "data": {
+        "type": "Point",
+        "coordinates": [0, 0]
+      }
+    }
+  },
+  "layers": []
+}

test/integration/render-tests/runtime-styling/image-add-1x-image-2x-screen/expected.png

@@ -0,0 +1,42 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64,
+      "pixelRatio": 1,
+      "operations": [
+        [
+          "addImage",
+          "marker",
+          "./sprites/2x.png",
+          2
+        ],
+        [
+          "addLayer",
+          {
+            "id": "geometry",
+            "type": "symbol",
+            "source": "geometry",
+            "layout": {
+              "icon-image": "marker"
+            }
+          }
+        ],
+        [
+          "wait"
+        ]
+      ]
+    }
+  },
+  "sources": {
+    "geometry": {
+      "type": "geojson",
+      "data": {
+        "type": "Point",
+        "coordinates": [0, 0]
+      }
+    }
+  },
+  "layers": []
+}

test/integration/render-tests/runtime-styling/image-add-1x-image-2x-screen/style.json

@@ -0,0 +1,42 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64,
+      "pixelRatio" :2,
+      "operations": [
+        [
+          "addImage",
+          "marker",
+          "./sprites/2x.png",
+          2
+        ],
+        [
+          "addLayer",
+          {
+            "id": "geometry",
+            "type": "symbol",
+            "source": "geometry",
+            "layout": {
+              "icon-image": "marker"
+            }
+          }
+        ],
+        [
+          "wait"
+        ]
+      ]
+    }
+  },
+  "sources": {
+    "geometry": {
+      "type": "geojson",
+      "data": {
+        "type": "Point",
+        "coordinates": [0, 0]
+      }
+    }
+  },
+  "layers": []
+}

test/integration/render-tests/runtime-styling/image-add-2x-image-1x-screen/expected.png

@@ -104,7 +104,8 @@ function applyOperations(map, operations, callback) {
 
     } else if (operation[0] === 'addImage') {
         const img = PNG.sync.read(fs.readFileSync(path.join(__dirname, './integration', operation[2])));
-        map.addImage(operation[1], img.data, {height: img.height, width: img.width, pixelRatio: 1});
+        const pixelRatio = operation.length > 3 ? operation[3] : 1;
+        map.addImage(operation[1], img.data, {height: img.height, width: img.width, pixelRatio: pixelRatio});
         applyOperations(map, operations.slice(1), callback);
 
     } else {