Skip to content

Commit

Permalink
[Maps] Delay vector tile layer syncing until spritesheet is loaded (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
thomasneirynck authored Dec 10, 2019
1 parent 9778fa4 commit 5247eeb
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 24 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
30 changes: 25 additions & 5 deletions x-pack/legacy/plugins/maps/public/layers/vector_tile_layer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 => {
Expand Down

0 comments on commit 5247eeb

Please sign in to comment.