diff --git a/packages/geoview-core/src/geo/layer/layer.ts b/packages/geoview-core/src/geo/layer/layer.ts index b62ec3d0af8..484e0d0a502 100644 --- a/packages/geoview-core/src/geo/layer/layer.ts +++ b/packages/geoview-core/src/geo/layer/layer.ts @@ -1,4 +1,6 @@ /* eslint-disable no-underscore-dangle */ +import { EventTypes } from 'ol/Observable'; + import { GeoCore, layerConfigIsGeoCore } from './other/geocore'; import { Vector } from './vector/vector'; @@ -205,10 +207,10 @@ export class Layer { // trigger the layer added event when layer is loaded on to the map const funcEvent = () => { // eslint-disable-next-line no-console - console.log(`Layer ${geoviewLayer.geoviewLayerId}, type: ${geoviewLayer.type} has been loaded`); + console.log(`Layer ${geoviewLayer.geoviewLayerId}, type: ${geoviewLayer.type} has been loaded on map ${this.mapId}`); api.event.emit(geoviewLayerPayload(EVENT_NAMES.LAYER.EVENT_LAYER_ADDED, this.mapId, geoviewLayer)); }; - geoviewLayer.gvLayers?.once('change', () => funcEvent()); + geoviewLayer.gvLayers?.once(['change', 'prerender'] as unknown as EventTypes, () => funcEvent()); api.map(this.mapId).map.addLayer(geoviewLayer.gvLayers!); this.geoviewLayers[geoviewLayer.geoviewLayerId] = geoviewLayer; diff --git a/packages/geoview-core/src/geo/map/map.ts b/packages/geoview-core/src/geo/map/map.ts index fc3e17919ba..1f21c2d4c96 100644 --- a/packages/geoview-core/src/geo/map/map.ts +++ b/packages/geoview-core/src/geo/map/map.ts @@ -30,6 +30,7 @@ import { ModalApi } from '../../ui'; import { mapPayload } from '../../api/events/payloads/map-payload'; import { mapComponentPayload } from '../../api/events/payloads/map-component-payload'; import { mapConfigPayload } from '../../api/events/payloads/map-config-payload'; +import { payloadIsAGeoViewLayer } from '../../api/events/payloads/geoview-layer-payload'; import { generateId } from '../../core/utils/utilities'; import { TypeListOfGeoviewLayerConfig, TypeDisplayLanguage, TypeViewSettings } from './map-schema-types'; import { TypeMapFeaturesConfig, TypeHTMLElement } from '../../core/types/global-types'; @@ -105,6 +106,9 @@ export class MapViewer { // GeoView renderer geoviewRenderer: GeoviewRenderer; + // number of configured layers to load + nbConfigLayers!: number; + /** * Add the map instance to the maps array in the api * @@ -155,6 +159,18 @@ export class MapViewer { this.mapId = cgpMap.get('mapId'); this.map = cgpMap; + // extract the number of layers to load and listen to added layers event to decrease the number of expected layer + this.nbConfigLayers = this.mapFeaturesConfig.map.listOfGeoviewLayerConfig?.length || 0; + api.event.on( + EVENT_NAMES.LAYER.EVENT_LAYER_ADDED, + (payload) => { + if (payloadIsAGeoViewLayer(payload)) { + this.nbConfigLayers--; + } + }, + this.mapId + ); + // initialize layers and load the layers passed in from map config if any this.layer = new Layer(this.mapId, this.mapFeaturesConfig.map.listOfGeoviewLayerConfig); @@ -291,7 +307,13 @@ export class MapViewer { * Function called when the map has been rendered and ready to be customized */ mapReady = (): void => { - api.event.emit(mapPayload(EVENT_NAMES.MAP.EVENT_MAP_LOADED, this.mapId, this.map)); + const layerInterval = setInterval(() => { + console.log(this.nbConfigLayers + ' ' + this.mapId) + if (this.nbConfigLayers <= 0) { + api.event.emit(mapPayload(EVENT_NAMES.MAP.EVENT_MAP_LOADED, this.mapId, this.map)); + clearInterval(layerInterval); + } + }, 500); }; /**