From 463e475fec953297ebf16fd0e24d77ea070e4b8a Mon Sep 17 00:00:00 2001
From: Damon Ulmi <damon_ulmi@hotmail.com>
Date: Tue, 3 Oct 2023 07:59:37 -0700
Subject: [PATCH] fix(layerStatus): 'loaded' handling refactored for groups

fixes #1337
---
 .../public/templates/layers/esri-dynamic.html |  33 +++---
 .../public/templates/layers/esri-feature.html |  33 +++---
 .../public/templates/layers/geocore.html      |  12 +-
 .../public/templates/layers/geojson.html      |  11 +-
 .../public/templates/layers/geopackage.html   |  18 +--
 .../public/templates/layers/image-static.html |  11 +-
 .../public/templates/layers/ogc-feature.html  |  11 +-
 .../public/templates/layers/vector-tiles.html |  35 +++---
 .../public/templates/layers/wfs.html          |  22 ++--
 .../public/templates/layers/wms.html          | 108 ++++++++++++------
 .../public/templates/layers/xyz.html          |  11 +-
 .../public/templates/package-swiper.html      |  13 +++
 .../raster/abstract-geoview-raster.ts         |  26 ++++-
 .../geoview-layers/raster/esri-dynamic.ts     |   3 +
 .../geoview-layers/raster/image-static.ts     |   4 +
 .../geoview-layers/raster/vector-tiles.ts     |   3 +
 .../geo/layer/geoview-layers/raster/wms.ts    |   3 +
 .../layer/geoview-layers/raster/xyz-tiles.ts  |   3 +
 .../vector/abstract-geoview-vector.ts         |  15 +++
 .../layer/geoview-layers/vector/geopackage.ts |  44 ++++++-
 packages/geoview-core/src/geo/layer/layer.ts  |  36 ------
 21 files changed, 288 insertions(+), 167 deletions(-)

diff --git a/packages/geoview-core/public/templates/layers/esri-dynamic.html b/packages/geoview-core/public/templates/layers/esri-dynamic.html
index baf5f405ea0..86556ee8757 100644
--- a/packages/geoview-core/public/templates/layers/esri-dynamic.html
+++ b/packages/geoview-core/public/templates/layers/esri-dynamic.html
@@ -762,37 +762,40 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
 
       window.setInterval(() => {
         const displayField1 = document.getElementById('HLYR1-state');
-        const geoviewLayers = cgpv.api.maps?.LYR1?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR1').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR1?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR1?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = cgpv.api.maps.LYR1.layer.registeredLayers[layerId].layerName.en;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField1.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField1.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField1.textContent = '(undefined)';
       }, 250)
 
       window.setInterval(() => {
         const displayField2 = document.getElementById('HLYR2-state');
-        const geoviewLayers = cgpv.api.maps?.LYR2?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR2').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR2?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR2?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = cgpv.api.maps.LYR2.layer.registeredLayers[layerId].layerName.en;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField2.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField2.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField2.textContent = '(undefined)';
       }, 250)
 
       window.setInterval(() => {
         const displayField3 = document.getElementById('HLYR3-state');
-        const geoviewLayers = cgpv.api.maps?.LYR3?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR3').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR3?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR3?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = cgpv.api.maps.LYR3.layer.registeredLayers[layerId].layerName.en;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField3.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField3.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';;
         } else displayField3.textContent = '(undefined)';
       }, 250)
 
diff --git a/packages/geoview-core/public/templates/layers/esri-feature.html b/packages/geoview-core/public/templates/layers/esri-feature.html
index 68f33c92faf..014f3bc1467 100644
--- a/packages/geoview-core/public/templates/layers/esri-feature.html
+++ b/packages/geoview-core/public/templates/layers/esri-feature.html
@@ -406,37 +406,40 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
 
       window.setInterval(() => {
         const displayField1 = document.getElementById('HLYR1-state');
-        const geoviewLayers = cgpv.api.maps?.LYR1?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR1').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR1?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR1?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = cgpv.api.maps.LYR1.layer.registeredLayers[layerId].layerName.en;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField1.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField1.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField1.textContent = '(undefined)';
       }, 250)
 
       window.setInterval(() => {
         const displayField2 = document.getElementById('HLYR2-state');
-        const geoviewLayers = cgpv.api.maps?.LYR2?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR2').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR2?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR2?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = cgpv.api.maps.LYR2.layer.registeredLayers[layerId].layerName.en;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField2.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField2.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField2.textContent = '(undefined)';
       }, 250)
 
       window.setInterval(() => {
         const displayField3 = document.getElementById('HLYR3-state');
-        const geoviewLayers = cgpv.api.maps?.LYR3?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR3').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR3?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR3?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = cgpv.api.maps.LYR3.layer.registeredLayers[layerId].layerName.en;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField3.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField3.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField3.textContent = '(undefined)';
       }, 250)
 
diff --git a/packages/geoview-core/public/templates/layers/geocore.html b/packages/geoview-core/public/templates/layers/geocore.html
index a0e11af06f9..b79b468e397 100644
--- a/packages/geoview-core/public/templates/layers/geocore.html
+++ b/packages/geoview-core/public/templates/layers/geocore.html
@@ -200,14 +200,14 @@ <h4 id="HLYR1">1. Many GeoCore Layers</h4>
       
       window.setInterval(() => {
         const displayField1 = document.getElementById('HLYR1-state');
-        const geoviewLayers = cgpv.api.maps?.LYR1?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR1').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR1?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const layerName = cgpv.api.maps?.LYR1?.layer?.geoviewLayers[layerId].geoviewLayerName.en;
-            const stateValue = cgpv.api.maps?.LYR1?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerName}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = cgpv.api.maps.LYR1.layer.geoviewLayers[layerId.split('/')[0]].geoviewLayerName.en;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField1.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField1.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField1.textContent = '(undefined)';
       }, 250)
 
diff --git a/packages/geoview-core/public/templates/layers/geojson.html b/packages/geoview-core/public/templates/layers/geojson.html
index 57bb37857b5..e2dae44c41e 100644
--- a/packages/geoview-core/public/templates/layers/geojson.html
+++ b/packages/geoview-core/public/templates/layers/geojson.html
@@ -248,13 +248,14 @@ <h4 id="HLYR1">1. Many GeoJSON Layers</h4>
 
       window.setInterval(() => {
         const displayField1 = document.getElementById('HLYR1-state');
-        const geoviewLayers = cgpv.api.maps?.LYR1?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR1').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR1?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR1?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = cgpv.api.maps.LYR1.layer.registeredLayers[layerId].layerName.en;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField1.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField1.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField1.textContent = '(undefined)';
       }, 250)
 
diff --git a/packages/geoview-core/public/templates/layers/geopackage.html b/packages/geoview-core/public/templates/layers/geopackage.html
index a730ec5a8ca..9ee5986a427 100644
--- a/packages/geoview-core/public/templates/layers/geopackage.html
+++ b/packages/geoview-core/public/templates/layers/geopackage.html
@@ -232,25 +232,27 @@ <h4 id="HLYR2">2. Multiple GeoPackage Layers - one with multiple layers</h4>
 
       window.setInterval(() => {
         const displayField1 = document.getElementById('HLYR1-state');
-        const geoviewLayers = cgpv.api.maps?.LYR1?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR1').resultSets;
         if (geoviewLayers) {
           const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+            const layerName = cgpv.api.maps.LYR1.layer.registeredLayers[layerId].layerName.en;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField1.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField1.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField1.textContent = '(undefined)';
       }, 250)
 
       window.setInterval(() => {
         const displayField1 = document.getElementById('HLYR2-state');
-        const geoviewLayers = cgpv.api.maps?.LYR2?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR2').resultSets;
         if (geoviewLayers) {
           const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+            const layerName = cgpv.api.maps.LYR2.layer.registeredLayers[layerId].layerName.en;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField1.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField1.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField1.textContent = '(undefined)';
       }, 250)
 
diff --git a/packages/geoview-core/public/templates/layers/image-static.html b/packages/geoview-core/public/templates/layers/image-static.html
index 22cec22280c..4fe4fa7c884 100644
--- a/packages/geoview-core/public/templates/layers/image-static.html
+++ b/packages/geoview-core/public/templates/layers/image-static.html
@@ -159,13 +159,14 @@ <h4 id="HLYR1">1. Static Image Layers</h4>
 
       window.setInterval(() => {
         const displayField1 = document.getElementById('HLYR1-state');
-        const geoviewLayers = cgpv.api.maps?.LYR1?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR1').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR1?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR1?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = cgpv.api.maps.LYR1.layer.registeredLayers[layerId].layerName.en;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField1.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField1.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField1.textContent = '(undefined)';
       }, 250)
 
diff --git a/packages/geoview-core/public/templates/layers/ogc-feature.html b/packages/geoview-core/public/templates/layers/ogc-feature.html
index dd4f0725210..c9d7d4c5a4f 100644
--- a/packages/geoview-core/public/templates/layers/ogc-feature.html
+++ b/packages/geoview-core/public/templates/layers/ogc-feature.html
@@ -164,13 +164,14 @@ <h4 id="HLYR1">1. OGC Feature API Layers</h4>
 
       window.setInterval(() => {
         const displayField1 = document.getElementById('HLYR1-state');
-        const geoviewLayers = cgpv.api.maps?.LYR1?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR1').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR1?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR1?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = cgpv.api.maps.LYR1.layer.registeredLayers[layerId].layerName.en;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField1.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField1.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField1.textContent = '(undefined)';
       }, 250)
 
diff --git a/packages/geoview-core/public/templates/layers/vector-tiles.html b/packages/geoview-core/public/templates/layers/vector-tiles.html
index a5110f80839..07cb767f920 100644
--- a/packages/geoview-core/public/templates/layers/vector-tiles.html
+++ b/packages/geoview-core/public/templates/layers/vector-tiles.html
@@ -196,37 +196,42 @@ <h4 id="HLYR3">3. Vector Tiles olms library no GeoView</h4>
 
       window.setInterval(() => {
         const displayField1 = document.getElementById('HLYR1-state');
-        const geoviewLayers = cgpv.api.maps?.LYR1?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.maps?.LYR1?.layer?.registeredLayers;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR1?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR1?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = geoviewLayers[layerId].layerName?.en ? geoviewLayers[layerId].layerName?.en : layerId;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField1.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField1.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField1.textContent = '(undefined)';
       }, 250)
 
       window.setInterval(() => {
         const displayField2 = document.getElementById('HLYR2-state');
-        const geoviewLayers = cgpv.api.maps?.LYR2?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.maps?.LYR2?.layer?.registeredLayers;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR2?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR2?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = geoviewLayers[layerId].layerName?.en ? geoviewLayers[layerId].layerName?.en : layerId;
+            const {layerPhase} = geoviewLayers[layerId];
+            const {layerStatus} = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField2.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField2.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField2.textContent = '(undefined)';
       }, 250)
 
       window.setInterval(() => {
         const displayField3 = document.getElementById('HLYR3-state');
-        const geoviewLayers = cgpv.api.maps?.LYR3?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.maps?.LYR3?.layer?.registeredLayers;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR3?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR3?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = geoviewLayers[layerId].layerName?.en ? geoviewLayers[layerId].layerName?.en : layerId;
+            const {layerPhase} = geoviewLayers[layerId];
+            const {layerStatus} = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField3.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField3.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField3.textContent = '(undefined)';
       }, 250)
 
diff --git a/packages/geoview-core/public/templates/layers/wfs.html b/packages/geoview-core/public/templates/layers/wfs.html
index 9e15fbd64d1..9bcc2f0cd3d 100644
--- a/packages/geoview-core/public/templates/layers/wfs.html
+++ b/packages/geoview-core/public/templates/layers/wfs.html
@@ -225,25 +225,27 @@ <h4 id="HLYR2">2. WFS Layers using bbox strategy</h4>
 
       window.setInterval(() => {
         const displayField1 = document.getElementById('HLYR1-state');
-        const geoviewLayers = cgpv.api.maps?.LYR1?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR1').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR1?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR1?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = cgpv.api.maps.LYR1.layer.registeredLayers[layerId].layerName.en;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField1.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField1.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField1.textContent = '(undefined)';
       }, 250)
 
       window.setInterval(() => {
         const displayField2 = document.getElementById('HLYR2-state');
-        const geoviewLayers = cgpv.api.maps?.LYR2?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR2').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR2?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR2?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = cgpv.api.maps.LYR2.layer.registeredLayers[layerId].layerName.en;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField2.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField2.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField2.textContent = '(undefined)';
       }, 250)
 
diff --git a/packages/geoview-core/public/templates/layers/wms.html b/packages/geoview-core/public/templates/layers/wms.html
index 97dadcd3972..6f8d731ddcf 100644
--- a/packages/geoview-core/public/templates/layers/wms.html
+++ b/packages/geoview-core/public/templates/layers/wms.html
@@ -14,14 +14,23 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <link rel="stylesheet" href="css/style.css" />
     <style>
-      table.info, th.info, td.info, th.infoCol1, td.infoCol1 {
+      table.info,
+      th.info,
+      td.info,
+      th.infoCol1,
+      td.infoCol1 {
         border: 1px solid black;
       }
-      th.info, td.info, th.infoCol1, td.infoCol1 {
+      th.info,
+      td.info,
+      th.infoCol1,
+      td.infoCol1 {
         padding: 15px;
         width: 15%;
       }
-      th.info, th.infoCol1, td.infoCol1 {
+      th.info,
+      th.infoCol1,
+      td.infoCol1 {
         text-align: left;
         font-weight: bold;
         font-size: 15px;
@@ -66,7 +75,8 @@ <h1><strong>WMS Layers</strong></h1>
 
     <div class="map-title-holder">
       <h4 id="HLYR1">1. Many WMS Layers</h4>
-      &nbsp;<h5 id="HLYR1-state">(undefined)</h5>
+      &nbsp;
+      <h5 id="HLYR1-state">(undefined)</h5>
       <a class="ref-link" href="#top">Top</a>
     </div>
     <button class="test-refresh-WMS-btn">Test Refresh WMS</button>
@@ -179,7 +189,8 @@ <h4 id="HLYR1">1. Many WMS Layers</h4>
 
     <div class="map-title-holder">
       <h4 id="HLYR2">2. All Styles of a WMS Layer</h4>
-      &nbsp;<h5 id="HLYR2-state">(undefined)</h5>
+      &nbsp;
+      <h5 id="HLYR2-state">(undefined)</h5>
       <a class="ref-link" href="#top">Top</a>
     </div>
     <div
@@ -364,7 +375,8 @@ <h4 id="HLYR2">2. All Styles of a WMS Layer</h4>
 
     <div class="map-title-holder">
       <h4 id="HLYR3">3. All Styles of a WMS Layer</h4>
-      &nbsp;<h5 id="HLYR3-state">(undefined)</h5>
+      &nbsp;
+      <h5 id="HLYR3-state">(undefined)</h5>
       <a class="ref-link" href="#top">Top</a>
     </div>
     <div
@@ -422,7 +434,8 @@ <h4 id="HLYR3">3. All Styles of a WMS Layer</h4>
 
     <div class="map-title-holder">
       <h4 id="HLYR4">4. Automatic group creation from metadata information</h4>
-      &nbsp;<h5 id="HLYR4-state">(undefined)</h5>
+      &nbsp;
+      <h5 id="HLYR4-state">(undefined)</h5>
       <a class="ref-link" href="#top">Top</a>
     </div>
     <div
@@ -471,7 +484,7 @@ <h4 id="HLYR4">4. Automatic group creation from metadata information</h4>
     <p>This map has a wms layer added from configuration.</p>
     <button type="button" class="collapsible">Configuration Snippet</button>
     <pre id="LYR4CS" class="panel"></pre>
-   <hr />
+    <hr />
     <button type="button" class="collapsible">Code Snippet</button>
     <pre id="codeSnippet" class="panel"></pre>
 
@@ -503,12 +516,15 @@ <h4 id="HLYR4">4. Automatic group creation from metadata information</h4>
                   dropDownContent.appendChild(element);
                 });
                 dropDownContent.addEventListener('click', (e) => {
-                  cgpv.api.maps.LYR3.layer.geoviewLayers['wmsLYR3-Root'].setStyle(dropDownContent.value, 'wmsLYR3-Root/landcover_2015_19classes');
+                  cgpv.api.maps.LYR3.layer.geoviewLayers['wmsLYR3-Root'].setStyle(
+                    dropDownContent.value,
+                    'wmsLYR3-Root/landcover_2015_19classes'
+                  );
                 });
               }
               clearInterval(intervalId);
             }
-          }, 1000)
+          }, 1000);
 
           //LYR1 ===================================================================================================================
           const featureInfoLayerSet1 = cgpv.api.getFeatureInfoLayerSet('LYR1');
@@ -537,7 +553,9 @@ <h4 id="HLYR4">4. Automatic group creation from metadata information</h4>
           // Test a refresh WMS from projection change
           var testRefreshBtn = document.getElementsByClassName('test-refresh-WMS-btn')[0];
           testRefreshBtn.addEventListener('click', function (e) {
-            cgpv.api.event.emit(cgpv.types.mapViewProjectionPayload(cgpv.api.eventNames.MAP.EVENT_MAP_VIEW_PROJECTION_CHANGE, 'LYR1', 3978));
+            cgpv.api.event.emit(
+              cgpv.types.mapViewProjectionPayload(cgpv.api.eventNames.MAP.EVENT_MAP_VIEW_PROJECTION_CHANGE, 'LYR1', 3978)
+            );
           });
 
           // LYR2 ===================================================================================================================
@@ -603,7 +621,9 @@ <h4 id="HLYR4">4. Automatic group creation from metadata information</h4>
           // Test a refresh WMS from projection change
           var testRefreshBtn = document.getElementsByClassName('test-refresh-WMS-btn')[0];
           testRefreshBtn.addEventListener('click', function (e) {
-            cgpv.api.event.emit(cgpv.types.mapViewProjectionPayload(cgpv.api.eventNames.MAP.EVENT_MAP_VIEW_PROJECTION_CHANGE, 'LYR1', 3978));
+            cgpv.api.event.emit(
+              cgpv.types.mapViewProjectionPayload(cgpv.api.eventNames.MAP.EVENT_MAP_VIEW_PROJECTION_CHANGE, 'LYR1', 3978)
+            );
           });
 
           // ========================================================================================================================
@@ -611,23 +631,31 @@ <h4 id="HLYR4">4. Automatic group creation from metadata information</h4>
           let i = 0;
           window.setInterval(() => {
             const layerConfig = cgpv.api.maps.LYR1.layer.registeredLayers['wmsLYR1-spatiotemporel/RADAR_1KM_RSNO'];
-            const temporalData = cgpv.api.maps.LYR1.layer.geoviewLayers['wmsLYR1-spatiotemporel'].layerTemporalDimension['wmsLYR1-spatiotemporel/RADAR_1KM_RSNO'];
+            const temporalData =
+              cgpv.api.maps.LYR1.layer.geoviewLayers['wmsLYR1-spatiotemporel'].layerTemporalDimension[
+                'wmsLYR1-spatiotemporel/RADAR_1KM_RSNO'
+              ];
             if (temporalData) {
-              cgpv.api.maps.LYR1.layer.geoviewLayers['wmsLYR1-spatiotemporel'].applyViewFilter(layerConfig, `time=date '${temporalData.range.range[i]}'`);
+              cgpv.api.maps.LYR1.layer.geoviewLayers['wmsLYR1-spatiotemporel'].applyViewFilter(
+                layerConfig,
+                `time=date '${temporalData.range.range[i]}'`
+              );
               if (++i === temporalData.range.range.length) i = 0;
             }
-          }, 2500)
+          }, 2500);
 
           let j = 0;
           window.setInterval(() => {
             const layerConfig = cgpv.api.maps.LYR1.layer.registeredLayers['wmsLYR1-msi/msi-94-or-more'];
             const temporalData = cgpv.api.maps.LYR1.layer.geoviewLayers['wmsLYR1-msi'].layerTemporalDimension['wmsLYR1-msi/msi-94-or-more'];
             if (temporalData) {
-              cgpv.api.maps.LYR1.layer.geoviewLayers['wmsLYR1-msi'].applyViewFilter(layerConfig, `time=date '${temporalData.range.range[j]}'`);
+              cgpv.api.maps.LYR1.layer.geoviewLayers['wmsLYR1-msi'].applyViewFilter(
+                layerConfig,
+                `time=date '${temporalData.range.range[j]}'`
+              );
               if (++j === temporalData.range.range.length) j = 0;
             }
-          }, 2500)
-
+          }, 2500);
         }
       });
 
@@ -635,46 +663,52 @@ <h4 id="HLYR4">4. Automatic group creation from metadata information</h4>
       // Display layer state
       window.setInterval(() => {
         const displayField1 = document.getElementById('HLYR1-state');
-        const geoviewLayers = cgpv.api.maps?.LYR1?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR1').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR1?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR1?.layer?.geoviewLayers[layerId].layerPhase;
-            const numberOfErrors = cgpv.api.maps?.LYR1?.layer?.geoviewLayers[layerId].countErrorStatus();
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            const numberOfErrors = cgpv.api.maps?.LYR1?.layer?.geoviewLayers[layerId.split('/')[0]].countErrorStatus();
             let errorIndicator = '';
             if (numberOfErrors) errorIndicator = numberOfErrors === 1 ? ' (1 error)' : ` (${numberOfErrors} errors)`;
-            return `${outputValue}${layerId}: ${stateValue}${errorIndicator}, `;
+            return `${outputValue}${
+              layerId.split('/')[layerId.split('/').length - 1]
+            } - status: ${layerStatus}, phase: ${layerPhase}${errorIndicator}, `;
           }, '(');
-          displayField1.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField1.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField1.textContent = '(undefined)';
-      }, 250)
+      }, 250);
 
       window.setInterval(() => {
         const displayField2 = document.getElementById('HLYR2-state');
-        const geoviewLayers = cgpv.api.maps?.LYR2?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR2').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR2?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR2?.layer?.geoviewLayers[layerId].layerPhase;
-            const numberOfErrors = cgpv.api.maps?.LYR2?.layer?.geoviewLayers[layerId].countErrorStatus();
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            const numberOfErrors = cgpv.api.maps?.LYR2?.layer?.geoviewLayers[layerId.split('/')[0]].countErrorStatus();
             let errorIndicator = '';
             if (numberOfErrors) errorIndicator = numberOfErrors === 1 ? ' (1 error)' : ` (${numberOfErrors} errors)`;
-            return `${outputValue}${layerId}: ${stateValue}${errorIndicator}, `;
+            return `${outputValue}${
+              layerId.split('/')[layerId.split('/').length - 1]
+            } - status: ${layerStatus}, phase: ${layerPhase}${errorIndicator}, `;
           }, '(');
-          displayField2.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField2.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField2.textContent = '(undefined)';
       }, 250);
 
       window.setInterval(() => {
         const displayField3 = document.getElementById('HLYR3-state');
-        const geoviewLayers = cgpv.api.maps?.LYR3?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR3').resultSets;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR3?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR3?.layer?.geoviewLayers[layerId].layerPhase;
-            const numberOfErrors = cgpv.api.maps?.LYR3?.layer?.geoviewLayers[layerId].countErrorStatus();
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            const numberOfErrors = cgpv.api.maps?.LYR3?.layer?.geoviewLayers[layerId.split('/')[0]].countErrorStatus();
             let errorIndicator = '';
             if (numberOfErrors) errorIndicator = numberOfErrors === 1 ? ' (1 error)' : ` (${numberOfErrors} errors)`;
-            return `${outputValue}${layerId}: ${stateValue}${errorIndicator}, `;
+            return `${outputValue}${
+              layerId.split('/')[layerId.split('/').length - 1]
+            } - status: ${layerStatus}, phase: ${layerPhase}${errorIndicator}, `;
           }, '(');
-          displayField3.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField3.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField3.textContent = '(undefined)';
       }, 250);
 
diff --git a/packages/geoview-core/public/templates/layers/xyz.html b/packages/geoview-core/public/templates/layers/xyz.html
index 18a7bb5ee25..41967bbe61e 100644
--- a/packages/geoview-core/public/templates/layers/xyz.html
+++ b/packages/geoview-core/public/templates/layers/xyz.html
@@ -121,13 +121,14 @@ <h4 id="HLYR1">1. XYZ Tiles Layers</h4>
 
       window.setInterval(() => {
         const displayField1 = document.getElementById('HLYR1-state');
-        const geoviewLayers = cgpv.api.maps?.LYR1?.layer?.geoviewLayers;
+        const geoviewLayers = cgpv.api.maps?.LYR1?.layer?.registeredLayers;
         if (geoviewLayers) {
-          const output = Object.keys(cgpv.api.maps?.LYR1?.layer?.geoviewLayers).reduce((outputValue, layerId) => {
-            const stateValue = cgpv.api.maps?.LYR1?.layer?.geoviewLayers[layerId].layerPhase;
-            return `${outputValue}${layerId}: ${stateValue}, `;
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const layerName = geoviewLayers[layerId].layerName?.en ? geoviewLayers[layerId].layerName?.en : layerId;
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
           }, '(');
-          displayField1.textContent = output ? `${output.slice(0, -2)})` : '(undefined)';
+          displayField1.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
         } else displayField1.textContent = '(undefined)';
       }, 250)
 
diff --git a/packages/geoview-core/public/templates/package-swiper.html b/packages/geoview-core/public/templates/package-swiper.html
index c9832455c3e..f4bcbedfe49 100644
--- a/packages/geoview-core/public/templates/package-swiper.html
+++ b/packages/geoview-core/public/templates/package-swiper.html
@@ -61,6 +61,8 @@ <h4 id="HUC2">2. Horizontal Configuration</h4>
 
     <div class="map-title-holder">
       <h4 id="HUC3">3. Layers type Configuration</h4>
+      &nbsp;
+      <h5 id="HUC3-state">(undefined)</h5>
       <a class="ref-link" href="#top">Top</a>
     </div>
     <div id="mapWM3" class="llwp-map" data-lang="en" data-config-url="./configs/package-swiper3-config.json"></div>
@@ -77,6 +79,17 @@ <h4 id="HUC3">3. Layers type Configuration</h4>
         createConfigSnippet();
         createCodeSnippet();
       });
+      window.setInterval(() => {
+        const displayField1 = document.getElementById('HUC3-state');
+        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('mapWM3').resultSets;
+        if (geoviewLayers) {
+          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
+            const { layerPhase, layerStatus } = geoviewLayers[layerId];
+            return `${outputValue}${layerId.split('/')[layerId.split('/').length - 1]} - status: ${layerStatus}, phase: ${layerPhase}, `;
+          }, '(');
+          displayField1.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
+        } else displayField1.textContent = '(undefined)';
+      }, 250);
     </script>
   </body>
 </html>
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/raster/abstract-geoview-raster.ts b/packages/geoview-core/src/geo/layer/geoview-layers/raster/abstract-geoview-raster.ts
index 9d441507cc3..bb9488b0cb0 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/raster/abstract-geoview-raster.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/raster/abstract-geoview-raster.ts
@@ -4,6 +4,7 @@ import Feature from 'ol/Feature';
 import { Geometry } from 'ol/geom';
 
 import { AbstractGeoViewLayer } from '../abstract-geoview-layers';
+import { Layer, LayerSetPayload, TypeLayerEntryConfig, api } from '@/app';
 
 /** *****************************************************************************************************************************
  * AbstractGeoViewRaster types
@@ -19,7 +20,7 @@ export type TypeBaseRasterLayer = BaseLayer; // TypeRasterLayerGroup | TypeRaste
  * instanciate GeoView raster layers. In addition to the components of the parent class, there is an attribute named
  * gvLayers where the raster elements of the class will be kept.
  *
- * The gvLayers attribute has a hierarchical structure. Its data type is TypetBaseRasterLayer. Subclasses of this type
+ * The gvLayers attribute has a hierarchical structure. Its data type is TypeBaseRasterLayer. Subclasses of this type
  * are TypeRasterLayerGroup and TypeRasterLayer. The TypeRasterLayerGroup is a collection of TypetBaseRasterLayer. It is
  * important to note that a TypetBaseRasterLayer attribute can polymorphically refer to a TypeRasterLayerGroup or a
  * TypeRasterLayer. Here, we must not confuse instantiation and declaration of a polymorphic attribute.
@@ -28,4 +29,25 @@ export type TypeBaseRasterLayer = BaseLayer; // TypeRasterLayerGroup | TypeRaste
  * features are placed.
  */
 // ******************************************************************************************************************************
-export abstract class AbstractGeoViewRaster extends AbstractGeoViewLayer {}
+export abstract class AbstractGeoViewRaster extends AbstractGeoViewLayer {
+  /** ***************************************************************************************************************************
+   * This method adds listeners for openlayers loadend events, indicating that the layer is visible on the map
+   *
+   * @param {TypeLayerEntryConfig} layerEntryConfig The config of the layer to add the listener to.
+   * @param {'tile' | 'image'} layerType The type of raster layer)
+   */
+  addLoadendListener(layerEntryConfig: TypeLayerEntryConfig, layerType: 'tile' | 'image'): void {
+    let loadErrorHandler: () => void;
+    const loadEndHandler = () => {
+      api.event.emit(LayerSetPayload.createLayerSetChangeLayerStatusPayload(this.mapId, layerEntryConfig, 'loaded'));
+      layerEntryConfig.gvLayer!.get('source').un(`${layerType}loaderror`, loadErrorHandler);
+    };
+    loadErrorHandler = () => {
+      api.event.emit(LayerSetPayload.createLayerSetChangeLayerStatusPayload(this.mapId, layerEntryConfig, 'error'));
+      layerEntryConfig.gvLayer!.get('source').un(`${layerType}loadend`, loadEndHandler);
+    };
+
+    layerEntryConfig.gvLayer!.get('source').once(`${layerType}loadend`, loadEndHandler);
+    layerEntryConfig.gvLayer!.get('source').once(`${layerType}loaderror`, loadErrorHandler);
+  }
+}
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/raster/esri-dynamic.ts b/packages/geoview-core/src/geo/layer/geoview-layers/raster/esri-dynamic.ts
index 114a8c3919e..22645ed77c9 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/raster/esri-dynamic.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/raster/esri-dynamic.ts
@@ -298,8 +298,11 @@ export class EsriDynamic extends AbstractGeoViewRaster {
       layerEntryConfig.gvLayer = new ImageLayer(imageLayerOptions);
       this.applyViewFilter(layerEntryConfig, layerEntryConfig.layerFilter ? layerEntryConfig.layerFilter : '');
 
+      super.addLoadendListener(layerEntryConfig, 'image');
+
       resolve(layerEntryConfig.gvLayer);
     });
+
     return promisedVectorLayer;
   }
 
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/raster/image-static.ts b/packages/geoview-core/src/geo/layer/geoview-layers/raster/image-static.ts
index 31df154464c..efcb1664ffc 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/raster/image-static.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/raster/image-static.ts
@@ -280,8 +280,12 @@ export class ImageStatic extends AbstractGeoViewRaster {
           layerEntryConfig.initialSettings?.visible === 'yes' || layerEntryConfig.initialSettings?.visible === 'always';
 
       layerEntryConfig.gvLayer = new ImageLayer(staticImageOptions);
+
+      super.addLoadendListener(layerEntryConfig, 'image');
+
       resolve(layerEntryConfig.gvLayer);
     });
+
     return promisedVectorLayer;
   }
 
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/raster/vector-tiles.ts b/packages/geoview-core/src/geo/layer/geoview-layers/raster/vector-tiles.ts
index 4b5cd852045..984a390f91e 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/raster/vector-tiles.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/raster/vector-tiles.ts
@@ -215,6 +215,9 @@ export class VectorTiles extends AbstractGeoViewRaster {
           layerEntryConfig.initialSettings?.visible === 'yes' || layerEntryConfig.initialSettings?.visible === 'always';
 
       layerEntryConfig.gvLayer = new VectorTileLayer(tileLayerOptions);
+
+      super.addLoadendListener(layerEntryConfig, 'tile');
+
       resolve(layerEntryConfig.gvLayer);
     });
     return promisedVectorLayer;
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts b/packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts
index a67510ba575..38445f998ee 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts
@@ -582,6 +582,9 @@ export class WMS extends AbstractGeoViewRaster {
 
           layerEntryConfig.gvLayer = new ImageLayer(imageLayerOptions);
           this.applyViewFilter(layerEntryConfig, layerEntryConfig.layerFilter ? layerEntryConfig.layerFilter : '');
+
+          super.addLoadendListener(layerEntryConfig, 'image');
+
           resolve(layerEntryConfig.gvLayer);
         } else {
           const trans = i18n.getFixedT(api.maps[this.mapId].displayLanguage);
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/raster/xyz-tiles.ts b/packages/geoview-core/src/geo/layer/geoview-layers/raster/xyz-tiles.ts
index 3bdad950279..f3e4079b0e9 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/raster/xyz-tiles.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/raster/xyz-tiles.ts
@@ -214,6 +214,9 @@ export class XYZTiles extends AbstractGeoViewRaster {
           layerEntryConfig.initialSettings?.visible === 'yes' || layerEntryConfig.initialSettings?.visible === 'always';
 
       layerEntryConfig.gvLayer = new TileLayer(tileLayerOptions);
+
+      super.addLoadendListener(layerEntryConfig, 'tile');
+
       resolve(layerEntryConfig.gvLayer);
     });
     return promisedVectorLayer;
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/vector/abstract-geoview-vector.ts b/packages/geoview-core/src/geo/layer/geoview-layers/vector/abstract-geoview-vector.ts
index c7d10a4181a..3e27891df14 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/vector/abstract-geoview-vector.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/vector/abstract-geoview-vector.ts
@@ -169,6 +169,20 @@ export abstract class AbstractGeoViewVector extends AbstractGeoViewLayer {
     };
 
     vectorSource = new VectorSource(sourceOptions);
+
+    let featuresLoadErrorHandler: () => void;
+    const featuresLoadEndHandler = () => {
+      api.event.emit(LayerSetPayload.createLayerSetChangeLayerStatusPayload(this.mapId, layerEntryConfig, 'loaded'));
+      vectorSource.un('featuresloaderror', featuresLoadErrorHandler);
+    };
+    featuresLoadErrorHandler = () => {
+      api.event.emit(LayerSetPayload.createLayerSetChangeLayerStatusPayload(this.mapId, layerEntryConfig, 'error'));
+      vectorSource.un('featuresloadend', featuresLoadEndHandler);
+    };
+
+    vectorSource.once('featuresloadend', featuresLoadEndHandler);
+    vectorSource.once('featuresloaderror', featuresLoadErrorHandler);
+
     return vectorSource;
   }
 
@@ -227,6 +241,7 @@ export abstract class AbstractGeoViewVector extends AbstractGeoViewLayer {
     };
 
     layerEntryConfig.gvLayer = new VectorLayer(layerOptions);
+
     if (layerEntryConfig.initialSettings?.extent !== undefined) this.setExtent(layerEntryConfig.initialSettings?.extent, layerEntryConfig);
     if (layerEntryConfig.initialSettings?.maxZoom !== undefined)
       this.setMaxZoom(layerEntryConfig.initialSettings?.maxZoom, layerEntryConfig);
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/vector/geopackage.ts b/packages/geoview-core/src/geo/layer/geoview-layers/vector/geopackage.ts
index 76e166885ed..0c6854daa50 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/vector/geopackage.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/vector/geopackage.ts
@@ -370,11 +370,10 @@ export class GeoPackage extends AbstractGeoViewVector {
               }
             }
 
-            var format = new FormatWKB();
+            const format = new FormatWKB();
 
             // Turn each table's geometries into a vector source
             for (let i = 0; i < tables.length; i++) {
-              const vectorSource = new VectorSource(sourceOptions);
               const table = tables[i];
               const tableName = table.table_name;
               const tableDataProjection = `EPSG:${table.srs_id}`;
@@ -397,12 +396,38 @@ export class GeoPackage extends AbstractGeoViewVector {
                 features.push(formattedFeature[0]);
               }
 
-              vectorSource.addFeatures(features);
+              const vectorSource = new VectorSource({
+                ...sourceOptions,
+                loader(extent, resolution, projection, success, failure) {
+                  if (features !== undefined) {
+                    vectorSource.addFeatures(features);
+                    success!(features);
+                  } else failure!();
+                },
+              });
+
               layersInfo.push({
                 name: tableName as string,
                 source: vectorSource,
                 properties,
               });
+
+              let featuresLoadErrorHandler: () => void;
+              const featuresLoadEndHandler = () => {
+                api.event.emit(
+                  LayerSetPayload.createLayerSetChangeLayerStatusPayload(this.mapId, Layer.getLayerPath(layerEntryConfig), 'loaded')
+                );
+                vectorSource.un('featuresloaderror', featuresLoadErrorHandler);
+              };
+              featuresLoadErrorHandler = () => {
+                api.event.emit(
+                  LayerSetPayload.createLayerSetChangeLayerStatusPayload(this.mapId, Layer.getLayerPath(layerEntryConfig), 'error')
+                );
+                vectorSource.un('featuresloadend', featuresLoadEndHandler);
+              };
+
+              vectorSource.once('featuresloadend', featuresLoadEndHandler);
+              vectorSource.once('featuresloaderror', featuresLoadErrorHandler);
             }
 
             db.close();
@@ -575,6 +600,19 @@ export class GeoPackage extends AbstractGeoViewVector {
         this.processFeatureInfoConfig(properties as TypeJsonObject, layerEntryConfig as TypeVectorLayerEntryConfig);
       }
 
+      let loadErrorHandler: () => void;
+      const loadEndHandler = () => {
+        api.event.emit(LayerSetPayload.createLayerSetChangeLayerStatusPayload(this.mapId, layerEntryConfig, 'loaded'));
+        source.un('featuresloaderror', loadErrorHandler);
+      };
+      loadErrorHandler = () => {
+        api.event.emit(LayerSetPayload.createLayerSetChangeLayerStatusPayload(this.mapId, layerEntryConfig, 'error'));
+        source.un('featuresloadend', loadEndHandler);
+      };
+
+      source.once('featuresloadend', loadEndHandler);
+      source.once('featuresloaderror', loadErrorHandler);
+
       const vectorLayer = this.createVectorLayer(layerEntryConfig as TypeVectorLayerEntryConfig, source);
       api.event.emit(LayerSetPayload.createLayerSetChangeLayerStatusPayload(this.mapId, Layer.getLayerPath(layerEntryConfig), 'processed'));
 
diff --git a/packages/geoview-core/src/geo/layer/layer.ts b/packages/geoview-core/src/geo/layer/layer.ts
index d94000600fa..204c9dcde92 100644
--- a/packages/geoview-core/src/geo/layer/layer.ts
+++ b/packages/geoview-core/src/geo/layer/layer.ts
@@ -15,7 +15,6 @@ import {
   payloadIsALayerConfig,
   GeoViewLayerPayload,
   payloadIsRemoveGeoViewLayer,
-  LayerSetPayload,
   PayloadBaseClass,
 } from '@/api/events/payloads';
 import { AbstractGeoViewLayer } from './geoview-layers/abstract-geoview-layers';
@@ -319,41 +318,6 @@ export class Layer {
           api.event.emit(GeoViewLayerPayload.createGeoviewLayerAddedPayload(`${this.mapId}/${geoviewLayer.geoviewLayerId}`, geoviewLayer));
         }
       });
-      if (geoviewLayer.gvLayers!.get('source')) {
-        geoviewLayer.gvLayers!.get('source').on('featuresloadend', () => {
-          if (geoviewLayer.getLayerConfig()) {
-            api.event.emit(
-              LayerSetPayload.createLayerSetChangeLayerStatusPayload(
-                this.mapId,
-                Layer.getLayerPath(geoviewLayer.getLayerConfig()!),
-                'loaded'
-              )
-            );
-          }
-        });
-        geoviewLayer.gvLayers!.get('source').on('imageloadend', () => {
-          if (geoviewLayer.getLayerConfig()) {
-            api.event.emit(
-              LayerSetPayload.createLayerSetChangeLayerStatusPayload(
-                this.mapId,
-                Layer.getLayerPath(geoviewLayer.getLayerConfig()!),
-                'loaded'
-              )
-            );
-          }
-        });
-        geoviewLayer.gvLayers!.get('source').on('tileloadend', () => {
-          if (geoviewLayer.getLayerConfig()) {
-            api.event.emit(
-              LayerSetPayload.createLayerSetChangeLayerStatusPayload(
-                this.mapId,
-                Layer.getLayerPath(geoviewLayer.getLayerConfig()!),
-                'loaded'
-              )
-            );
-          }
-        });
-      }
       api.maps[this.mapId].map.addLayer(geoviewLayer.gvLayers!);
     }
   }