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

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/style.json → test/integration/render-tests/runtime-styling/image-add-1x-image-1x-screen/style.json

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

test/integration/render-tests/runtime-styling/image-add-1x-image-2x-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-2x-image-1x-screen/style.json

@@ -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-2x-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/suite_implementation.js

@@ -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 {