[Maps] Delay vector tile layer syncing until spritesheet is loaded (#48955) (#50963)

Author: thomasneirynck

x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js

@@ -109,25 +109,38 @@ function getImageData(img) {
   return context.getImageData(0, 0, img.width, img.height);
 }
 
-export async function addSpritesheetToMap(json, imgUrl, mbMap) {
-
-  const image = new Image();
-  image.crossOrigin = 'Anonymous';
-  image.onload = (el) => {
-    const imgData = getImageData(el.currentTarget);
-    for (const imageId in json) {
-      if (!(json.hasOwnProperty(imageId) && !mbMap.hasImage(imageId))) {
-        continue;
-      }
-      const { width, height, x, y, sdf, pixelRatio } = json[imageId];
-      if (typeof width !== 'number' || typeof height !== 'number') {
-        continue;
-      }
+export async function loadSpriteSheetImageData(imgUrl) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.crossOrigin = 'Anonymous';
+    image.onload = (el) => {
+      const imgData = getImageData(el.currentTarget);
+      resolve(imgData);
+    };
+    image.onerror = (e) =>{
+      reject(e);
+    };
+    image.src = imgUrl;
+  });
+}
 
-      const data = new RGBAImage({ width, height });
-      RGBAImage.copy(imgData, data, { x, y }, { x: 0, y: 0 }, { width, height });
-      mbMap.addImage(imageId, data, { pixelRatio, sdf });
+export function addSpriteSheetToMapFromImageData(json, imgData, mbMap) {
+  for (const imageId in json) {
+    if (!(json.hasOwnProperty(imageId) && !mbMap.hasImage(imageId))) {
+      continue;
     }
-  };
-  image.src = imgUrl;
+    const { width, height, x, y, sdf, pixelRatio } = json[imageId];
+    if (typeof width !== 'number' || typeof height !== 'number') {
+      continue;
+    }
+
+    const data = new RGBAImage({ width, height });
+    RGBAImage.copy(imgData, data, { x, y }, { x: 0, y: 0 }, { width, height });
+    mbMap.addImage(imageId, data, { pixelRatio, sdf });
+  }
+}
+
+export async function addSpritesheetToMap(json, imgUrl, mbMap) {
+  const imgData = await loadSpriteSheetImageData(imgUrl);
+  addSpriteSheetToMapFromImageData(json, imgData, mbMap);
 }

x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js

@@ -8,7 +8,10 @@ import { TileLayer } from './tile_layer';
 import _ from 'lodash';
 import { SOURCE_DATA_ID_ORIGIN, LAYER_TYPE } from '../../common/constants';
 import { isRetina } from '../meta';
-import { addSpritesheetToMap } from '../connected_components/map/mb/utils';//todo move this implementation
+import {
+  addSpriteSheetToMapFromImageData,
+  loadSpriteSheetImageData
+} from '../connected_components/map/mb/utils';//todo move this implementation
 
 const MB_STYLE_TYPE_TO_OPACITY = {
   'fill': ['fill-opacity'],
@@ -45,7 +48,12 @@ export class VectorTileLayer extends TileLayer {
     startLoading(SOURCE_DATA_ID_ORIGIN, requestToken, dataFilters);
     try {
       const styleAndSprites = await this._source.getVectorStyleSheetAndSpriteMeta(isRetina());
-      stopLoading(SOURCE_DATA_ID_ORIGIN, requestToken, styleAndSprites, {});
+      const spriteSheetImageData = await loadSpriteSheetImageData(styleAndSprites.spriteMeta.png);
+      const data = {
+        ...styleAndSprites,
+        spriteSheetImageData
+      };
+      stopLoading(SOURCE_DATA_ID_ORIGIN, requestToken, data, {});
     } catch(error) {
       onLoadError(SOURCE_DATA_ID_ORIGIN, requestToken, error.message);
     }
@@ -76,6 +84,15 @@ export class VectorTileLayer extends TileLayer {
     return vectorStyleAndSprites.spriteMeta;
   }
 
+  _getSpriteImageData() {
+    const sourceDataRequest = this.getSourceDataRequest();
+    if (!sourceDataRequest) {
+      return null;
+    }
+    const vectorStyleAndSprites = sourceDataRequest.getData();
+    return vectorStyleAndSprites.spriteSheetImageData;
+  }
+
   getMbLayerIds() {
     const vectorStyle = this._getVectorStyle();
     if (!vectorStyle) {
@@ -118,8 +135,6 @@ export class VectorTileLayer extends TileLayer {
     }
 
     let initialBootstrapCompleted = false;
-
-    //sync sources
     const sourceIds = Object.keys(vectorStyle.sources);
     sourceIds.forEach(sourceId => {
       if (initialBootstrapCompleted) {
@@ -149,7 +164,12 @@ export class VectorTileLayer extends TileLayer {
           newJson[namespacedImageId] = spriteMeta.json[imageId];
         }
       }
-      addSpritesheetToMap(newJson, spriteMeta.png, mbMap);
+
+      const imageData = this._getSpriteImageData();
+      if (!imageData) {
+        return;
+      }
+      addSpriteSheetToMapFromImageData(newJson, imageData, mbMap);
 
       //sync layers
       vectorStyle.layers.forEach(layer => {