Merge pull request #1263 from swissgeol/GSNGM-1137_upload_kml_fix

Fix: render after KML upload
swisstopo · Apr 29, 2024 · 38d839f · 38d839f
2 parents 601c0bc + 74ed3eb
commit 38d839f
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/ui/src/cesiumutils.ts b/ui/src/cesiumutils.ts
@@ -550,3 +550,11 @@ export async function parseKml(viewer: Viewer, data: File | string, dataSource:
 
   return name;
 }
+
+// workaround to rerender map after dataSources update in requestRenderMode
+export async function renderWithDelay(viewer: Viewer) {
+  await new Promise<void>(resolve => setTimeout(() => {
+    viewer.scene.requestRender();
+    resolve();
+  }, 1000));
+}
diff --git a/ui/src/elements/dashboard/ngm-dashboard.ts b/ui/src/elements/dashboard/ngm-dashboard.ts
@@ -32,7 +32,7 @@ import './ngm-project-topic-overview';
 import {isProject, isProjectOwnerOrEditor} from './helpers';
 import {LayerConfig} from '../../layertree';
 import EarthquakeVisualizer from '../../earthquakeVisualization/earthquakeVisualizer';
-import {parseKml} from '../../cesiumutils';
+import {parseKml, renderWithDelay} from '../../cesiumutils';
 
 type TextualAttribute = string | TranslatedText;
 
@@ -250,6 +250,7 @@ export class NgmDashboard extends LitElementI18n {
             topicKml: true
           };
           await this.viewer.dataSources.add(uploadedLayer);
+          await renderWithDelay(this.viewer);
         }
         const promise = Promise.resolve(uploadedLayer);
         assetsData.push({

diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts
@@ -47,7 +47,7 @@ import {getLayerLabel} from '../swisstopoImagery';
 
 import DashboardStore from '../store/dashboard';
 import {getAssets} from '../api-ion';
-import {parseKml} from '../cesiumutils';
+import {parseKml, renderWithDelay} from '../cesiumutils';
 
 type SearchLayer = {
   label: string
@@ -752,7 +752,7 @@ export class SideBar extends LitElementI18n {
     // name used as id for datasource
     dataSource.name = `${name}_${Date.now()}`;
     await this.viewer.dataSources.add(dataSource);
-    this.viewer.scene.requestRender();
+    await renderWithDelay(this.viewer);
     // done like this to have correct rerender of component
     const promise = Promise.resolve(dataSource);
     const config: LayerConfig = {

diff --git a/ui/src/toolbox/GeometryController.ts b/ui/src/toolbox/GeometryController.ts
@@ -25,7 +25,7 @@ import {
   VerticalOrigin
 } from 'cesium';
 import type {AreasCounter, GeometryTypes, NgmGeometry} from './interfaces';
-import {extendKmlWithProperties, getValueOrUndefined} from '../cesiumutils';
+import {extendKmlWithProperties, getValueOrUndefined, renderWithDelay} from '../cesiumutils';
 import NavToolsStore from '../store/navTools';
 import {
   flyToGeom,
@@ -248,6 +248,7 @@ export class GeometryController {
       entities = entities.slice(0, 10);
     }
     let atLeastOneValid = false;
+    const addedEntities: Entity[] = [];
     entities.forEach(ent => {
       const exists = this.geometriesDataSource!.entities.getById(ent.id);
       if (!exists) {
@@ -256,12 +257,15 @@ export class GeometryController {
         atLeastOneValid = true;
         showBannerError(this.toastPlaceholder, i18next.t('tbx_kml_area_existing_warning'));
       }
+      const newEnt = exists || this.geometriesDataSource!.entities.getById(ent.id);
+      if (newEnt) addedEntities.push(newEnt);
     });
+    await renderWithDelay(this.viewer!);
 
     if (!atLeastOneValid) {
       showBannerError(this.toastPlaceholder, i18next.t('tbx_unsupported_kml_warning'));
     } else {
-      this.viewer!.zoomTo(entities);
+      this.viewer!.zoomTo(addedEntities);
     }
   }