diff --git a/src/Models/ThemeConfig/PointRenderingConfig.ts b/src/Models/ThemeConfig/PointRenderingConfig.ts index 8821adec7..4f83499c5 100644 --- a/src/Models/ThemeConfig/PointRenderingConfig.ts +++ b/src/Models/ThemeConfig/PointRenderingConfig.ts @@ -312,7 +312,7 @@ export default class PointRenderingConfig extends WithContextLoader { if (cssLabel) { label.SetStyle(cssLabel) } else if (labelOnly) { - return label.SetStyle("transform: translate(-50%, -50%);") + return label?.SetStyle("transform: translate(-50%, -50%);") } return new Combine([label]).SetClass("flex flex-col items-center") }) diff --git a/src/UI/Map/ShowDataLayer.ts b/src/UI/Map/ShowDataLayer.ts index 33a00123a..e8824f417 100644 --- a/src/UI/Map/ShowDataLayer.ts +++ b/src/UI/Map/ShowDataLayer.ts @@ -235,17 +235,26 @@ class LineRenderingLayer { map.on("styledata", () => self.update(features.features)) } - private addSymbolLayer(sourceId: string, url: string = "./assets/png/oneway.png"){ + private async addSymbolLayer(sourceId: string, url: string = "./assets/png/oneway.png") { const map = this._map const imgId = url.replaceAll(/[/.-]/g, "_") - map.loadImage(url, (err, image) => { - if (err) { - console.error("Could not add symbol layer to line due to", err); - return - } - map.addImage(imgId, image); - map.addLayer({ - 'id': "symbol-layer"+imgId, + + if (map.getImage(imgId) === undefined) { + await new Promise((resolve, reject) => { + map.loadImage(url, (err, image) => { + if (err) { + console.error("Could not add symbol layer to line due to", err) + reject(err) + return + } + map.addImage(imgId, image) + resolve() + }) + }) + } + + map.addLayer({ + "id": "symbol-layer_" + this._layername + "-" + imgId, 'type': 'symbol', 'source': sourceId, 'layout': { @@ -259,7 +268,7 @@ class LineRenderingLayer { 'visibility': 'visible' } }); - }); + } public destruct(): void {