Support adding SDF images at runtime (#5181)

src/symbol/sprite_atlas.js

@@ -116,7 +116,7 @@ class SpriteAtlas extends Evented {
         return rect;
     }
 
-    addImage(name: string, pixels: HTMLImageElement | $ArrayBufferView, options: { width: number, height: number, pixelRatio?: number }) {
+    addImage(name: string, pixels: HTMLImageElement | $ArrayBufferView, options: { width: number, height: number, pixelRatio?: number, sdf?: boolean }) {
         let width, height, pixelRatio;
         if (pixels instanceof HTMLImageElement) {
             width = pixels.width;
@@ -151,7 +151,7 @@ class SpriteAtlas extends Evented {
             width,
             height,
             pixelRatio,
-            sdf: false
+            sdf: options.sdf || false
         };
 
         this.copy(pixels, width, rect, {x: 0, y: 0, width, height}, false);

src/ui/map.js

@@ -1147,11 +1147,12 @@ class Map extends Camera {
      * @param {number} [options.width] The pixel width of the `ArrayBufferView` image
      * @param {number} [options.height] The pixel height of the `ArrayBufferView` image
      * @param {number} [options.pixelRatio] The ratio of pixels in the `ArrayBufferView` image to physical pixels on the screen
+     * @param {boolean} [options.sdf] Whether the image should be interpreted as an SDF image
      */
     addImage(
         name: string,
         image: HTMLImageElement | $ArrayBufferView,
-        options?: {width: number, height: number, pixelRatio: number}
+        options?: {width: number, height: number, pixelRatio: number, sdf: boolean}
     ) {
         this.style.spriteAtlas.addImage(name, image, (options: any));
     }

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

@@ -10,7 +10,9 @@
           "addImage",
           "marker",
           "./sprites/1.5x.png",
-          1.5
+          {
+            "pixelRatio": 1.5
+          }
         ],
         [
           "addLayer",

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

@@ -10,7 +10,9 @@
           "addImage",
           "marker",
           "./sprites/1.5x.png",
-          1.5
+          {
+            "pixelRatio": 1.5
+          }
         ],
         [
           "addLayer",

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

@@ -10,7 +10,9 @@
           "addImage",
           "marker",
           "./sprites/2x.png",
-          2
+          {
+            "pixelRatio": 2
+          }
         ],
         [
           "addLayer",

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

@@ -10,7 +10,9 @@
           "addImage",
           "marker",
           "./sprites/2x.png",
-          2
+          {
+            "pixelRatio": 2
+          }
         ],
         [
           "addLayer",

test/integration/render-tests/runtime-styling/image-add-nonsdf/style.json

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

test/integration/render-tests/runtime-styling/image-add-sdf/style.json

@@ -0,0 +1,47 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64,
+      "operations": [
+        [
+          "addImage",
+          "line.sdf",
+          "./image/line.sdf.png",
+          {
+            "sdf": true
+          }
+        ],
+        [
+          "addLayer",
+          {
+            "id": "geometry",
+            "type": "symbol",
+            "source": "geometry",
+            "layout": {
+              "icon-image": "line.sdf"
+            },
+            "paint": {
+              "icon-color": "red"
+            }
+          }
+        ],
+        [
+          "wait"
+        ]
+      ]
+    }
+  },
+  "sources": {
+    "geometry": {
+      "type": "geojson",
+      "data": {
+        "type": "Point",
+        "coordinates": [0, 0]
+      }
+    }
+  },
+  "layers": []
+}
+

test/suite_implementation.js

@@ -6,6 +6,7 @@ const PNG = require('pngjs').PNG;
 const Map = require('../src/ui/map');
 const window = require('../src/util/window');
 const browser = require('../src/util/browser');
+const util = require('../src/util/util');
 const rtlTextPlugin = require('../src/source/rtl_text_plugin');
 const rtlText = require('@mapbox/mapbox-gl-rtl-text');
 const fs = require('fs');
@@ -107,8 +108,8 @@ function applyOperations(map, operations, callback) {
 
     } else if (operation[0] === 'addImage') {
         const img = PNG.sync.read(fs.readFileSync(path.join(__dirname, './integration', operation[2])));
-        const pixelRatio = operation.length > 3 ? operation[3] : 1;
-        map.addImage(operation[1], img.data, {height: img.height, width: img.width, pixelRatio: pixelRatio});
+        const options = util.extend({}, {height: img.height, width: img.width, pixelRatio: 1}, operation.length > 3 ? operation[3] : {});
+        map.addImage(operation[1], img.data, options);
         applyOperations(map, operations.slice(1), callback);
 
     } else {