1149-getAllFeatureInfo

Canadian-Geospatial-Platform · Oct 4, 2023 · c628d5a · c628d5a
1 parent a4e8ff6
commit c628d5a
Show file tree

Hide file tree

Showing 88 changed files with 1,082 additions and 624 deletions.
diff --git a/packages/geoview-core/public/templates/layers/esri-dynamic.html b/packages/geoview-core/public/templates/layers/esri-dynamic.html
diff --git a/packages/geoview-core/public/templates/layers/esri-feature.html b/packages/geoview-core/public/templates/layers/esri-feature.html
@@ -140,7 +140,9 @@ <h4 id="HLYR1">1. Many Esri Feature Layers</h4>
     <button class="collapsible">Get Legend</button>
     <pre style="height: 20pc; overflow-y: scroll" id="LegendsId1-table-pre" class="panel"></pre>
     <button type="button" class="collapsible">Get Feature Info</button>
-    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId1" class="panel">Click on feature on the map</pre>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId1-at_long_lat" class="panel">Click on feature on the map</pre>
+    <button type="button" class="collapsible" id="AllFeatureInfo1">Get All Feature Info</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId1-all" class="panel"></pre>
     <hr />
     <p>This map has a wms layer added from configuration.</p>
     <button type="button" class="collapsible">Configuration Snippet</button>
@@ -201,6 +203,8 @@ <h4 id="HLYR2">2. Date filtering using time zone changed and non ISO date format
     <pre style="height: 20pc; overflow-y: scroll" id="LegendsId2-table-pre" class="panel"></pre>
     <button type="button" class="collapsible" >Get Feature Info</button>
     <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId2" class="panel">Click on feature on the map</pre>
+    <button type="button" class="collapsible" id="AllFeatureInfo2">Get All Feature Info</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId2-all" class="panel"></pre>
     <hr />
     <button type="button" class="collapsible">Configuration Snippet</button>
     <pre id="LYR2CS" class="panel"></pre>
@@ -259,6 +263,8 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
     <pre style="height: 20pc; overflow-y: scroll" id="LegendsId3-table-pre" class="panel"></pre>
     <button type="button" class="collapsible" >Get Feature Info</button>
     <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId3" class="panel">Click on feature on the map</pre>
+    <button type="button" class="collapsible" id="AllFeatureInfo3">Get All Feature Info</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId3-all" class="panel"></pre>
     <hr />
     <button type="button" class="collapsible">Configuration Snippet</button>
     <pre id="LYR3CS" class="panel"></pre>
@@ -281,9 +287,9 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
           createTableOfFilter('LYR1');
           createTableOfFilter('LYR2');
           createTableOfFilter('LYR3');
-          cgpv.api.event.emit({ handlerName: 'LYR1/$LegendsLayerSet$', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
-          cgpv.api.event.emit({ handlerName: 'LYR2/$LegendsLayerSet$', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
-          cgpv.api.event.emit({ handlerName: 'LYR3/$LegendsLayerSet$', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
+          cgpv.api.event.emit({ handlerName: 'LYR1/LegendsLayerSet', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
+          cgpv.api.event.emit({ handlerName: 'LYR2/LegendsLayerSet', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
+          cgpv.api.event.emit({ handlerName: 'LYR3/LegendsLayerSet', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
 
           const field2 = cgpv.api.maps.LYR2.layer.geoviewLayers['historical-flood'].layerTemporalDimension['historical-flood/0'].field;
           const LYR2_FILTERS = [`${field2} >= date '01/01/2018 05:00:00' and ${field2} <= date '12/31/2019 19:00:00-05:00'`,
@@ -342,66 +348,75 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
       });
 
       // LYR1 ===================================================================================================================
-      const featureInfoLayerSet1 = cgpv.api.getFeatureInfoLayerSet('LYR1');
+      const getAllFeatureInfo1 = document.getElementById('AllFeatureInfo1');
+      getAllFeatureInfo1.addEventListener('click', function (e) {
+            cgpv.api.event.emit({ event: 'map/get_all_features', handlerName: 'LYR1' });
+          });
+
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_FEATURE_INFO.ALL_QUERIES_DONE,
         (payload) => {
-          const { layerSetId, resultSets } = payload;
-          createInfoTable('LYR1', 'ResultSetId1', resultSets);
+          const { layerSetId, resultSets, queryType } = payload;
+          createInfoTable('LYR1', 'ResultSetId1', resultSets, queryType);
         },
-        'LYR1/$FeatureInfoLayerSet$'
+        'LYR1/FeatureInfoLayerSet'
       );
 
-      const LegendsLayerSet1 = cgpv.api.getLegendsLayerSet('LYR1');
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_LEGENDS.LEGENDS_LAYERSET_UPDATED,
         (payload) => {
           const { resultSets } = payload;
           displayLegend('LegendsId1', resultSets);
         },
-        'LYR1/$LegendsLayerSet$'
+        'LYR1/LegendsLayerSet'
       );
 
       // LYR2 ===================================================================================================================
-      const featureInfoLayerSet2 = cgpv.api.getFeatureInfoLayerSet('LYR2');
+      const getAllFeatureInfo2 = document.getElementById('AllFeatureInfo2');
+      getAllFeatureInfo2.addEventListener('click', function (e) {
+            cgpv.api.event.emit({ event: 'map/get_all_features', handlerName: 'LYR2' });
+          });
+
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_FEATURE_INFO.ALL_QUERIES_DONE,
         (payload) => {
-          const { layerSetId, resultSets } = payload;
-          createInfoTable('LYR2', 'ResultSetId2', resultSets);
+          const { layerSetId, resultSets, queryType } = payload;
+          createInfoTable('LYR2', 'ResultSetId2', resultSets, queryType);
         },
-        'LYR2/$FeatureInfoLayerSet$'
+        'LYR2/FeatureInfoLayerSet'
       );
 
-      const LegendsLayerSet2 = cgpv.api.getLegendsLayerSet('LYR2');
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_LEGENDS.LEGENDS_LAYERSET_UPDATED,
         (payload) => {
           const { resultSets } = payload;
           displayLegend('LegendsId2', resultSets);
         },
-        'LYR2/$LegendsLayerSet$'
+        'LYR2/LegendsLayerSet'
       );
 
       // LYR3 ===================================================================================================================
-      const featureInfoLayerSet3 = cgpv.api.getFeatureInfoLayerSet('LYR3');
+      const getAllFeatureInfo3 = document.getElementById('AllFeatureInfo3');
+      getAllFeatureInfo3.addEventListener('click', function (e) {
+            cgpv.api.event.emit({ event: 'map/get_all_features', handlerName: 'LYR3' });
+          });
+
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_FEATURE_INFO.ALL_QUERIES_DONE,
         (payload) => {
-          const { layerSetId, resultSets } = payload;
-          createInfoTable('LYR3', 'ResultSetId3', resultSets);
+          const { layerSetId, resultSets, queryType } = payload;
+          createInfoTable('LYR3', 'ResultSetId3', resultSets, queryType);
         },
-        'LYR3/$FeatureInfoLayerSet$'
+        'LYR3/FeatureInfoLayerSet'
       );
 
-      const LegendsLayerSet3 = cgpv.api.getLegendsLayerSet('LYR3');
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_LEGENDS.LEGENDS_LAYERSET_UPDATED,
         (payload) => {
           const { resultSets } = payload;
           displayLegend('LegendsId3', resultSets);
         },
-        'LYR3/$LegendsLayerSet$'
+        'LYR3/LegendsLayerSet'
       );
 
       window.setInterval(() => {

diff --git a/packages/geoview-core/public/templates/layers/geocore.html b/packages/geoview-core/public/templates/layers/geocore.html
@@ -173,7 +173,7 @@ <h4 id="HLYR1">1. Many GeoCore Layers</h4>
           createConfigSnippet();
 
           createTableOfFilter('LYR1');
-          cgpv.api.event.emit({ handlerName: 'LYR1/$LegendsLayerSet$', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
+          cgpv.api.event.emit({ handlerName: 'LYR1/LegendsLayerSet', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
         }
       });
 
@@ -185,7 +185,7 @@ <h4 id="HLYR1">1. Many GeoCore Layers</h4>
           const { layerSetId, resultSets } = payload;
           createInfoTable('LYR1', 'ResultSetId1', resultSets);
         },
-        'LYR1/$FeatureInfoLayerSet$'
+        'LYR1/FeatureInfoLayerSet'
       );
 
       const LegendsLayerSet1 = cgpv.api.getLegendsLayerSet('LYR1');
@@ -195,7 +195,7 @@ <h4 id="HLYR1">1. Many GeoCore Layers</h4>
           const { resultSets } = payload;
           displayLegend('LegendsId1', resultSets);
         },
-        'LYR1/$LegendsLayerSet$'
+        'LYR1/LegendsLayerSet'
       );
 
       window.setInterval(() => {

diff --git a/packages/geoview-core/public/templates/layers/geojson.html b/packages/geoview-core/public/templates/layers/geojson.html
@@ -141,6 +141,8 @@ <h4 id="HLYR1">1. Many GeoJSON Layers</h4>
     </pre>
     <button type="button" class="collapsible">Get Feature Info</button>
     <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId1" class="panel">Click on feature on the map</pre>
+    <button type="button" class="collapsible" id="AllFeatureInfo1">Get All Feature Info</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId1-all" class="panel"></pre>
     <hr />
     <p>This map has a wms layer added from configuration.</p>
     <button type="button" class="collapsible">Configuration Snippet</button>
@@ -162,7 +164,7 @@ <h4 id="HLYR1">1. Many GeoJSON Layers</h4>
           createConfigSnippet();
 
           createTableOfFilter('LYR1');
-          cgpv.api.event.emit({ handlerName: 'LYR1/$LegendsLayerSet$', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
+          cgpv.api.event.emit({ handlerName: 'LYR1/LegendsLayerSet', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
         }
       });
 
@@ -226,14 +228,18 @@ <h4 id="HLYR1">1. Many GeoJSON Layers</h4>
       });
 
       // LYR1 ===================================================================================================================
-      const featureInfoLayerSet = cgpv.api.getFeatureInfoLayerSet('LYR1');
+      const getAllFeatureInfo1 = document.getElementById('AllFeatureInfo1');
+      getAllFeatureInfo1.addEventListener('click', function (e) {
+            cgpv.api.event.emit({ event: 'map/get_all_features', handlerName: 'LYR1' });
+          });
+
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_FEATURE_INFO.ALL_QUERIES_DONE,
         (payload) => {
-          const { layerSetId, resultSets } = payload;
-          createInfoTable('LYR1', 'ResultSetId1', resultSets);
+          const { layerSetId, resultSets, queryType } = payload;
+          createInfoTable('LYR1', 'ResultSetId1', resultSets, queryType);
         },
-        'LYR1/$FeatureInfoLayerSet$'
+        'LYR1/FeatureInfoLayerSet'
       );
 
       const LegendLayerSet = cgpv.api.getLegendsLayerSet('LYR1');
@@ -243,7 +249,7 @@ <h4 id="HLYR1">1. Many GeoJSON Layers</h4>
           const { resultSets } = payload;
           displayLegend('LegendsId1', resultSets);
         },
-        'LYR1/$LegendsLayerSet$'
+        'LYR1/LegendsLayerSet'
       );
 
       window.setInterval(() => {

diff --git a/packages/geoview-core/public/templates/layers/geopackage.html b/packages/geoview-core/public/templates/layers/geopackage.html
@@ -124,6 +124,8 @@ <h4 id="HLYR1">1. GeoPackage Layers</h4>
     <pre style="height: 20pc; overflow-y: scroll" id="LegendsId1-table-pre" class="panel"></pre>
     <button type="button" class="collapsible">Get Feature Info</button>
     <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId1" class="panel">Click on feature on the map</pre>
+    <button type="button" class="collapsible" id="AllFeatureInfo1">Get All Feature Info</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId1-all" class="panel"></pre>
     <hr />
 
     <div class="map-title-holder">
@@ -205,19 +207,23 @@ <h4 id="HLYR2">2. Multiple GeoPackage Layers - one with multiple layers</h4>
           createConfigSnippet();
 
           createTableOfFilter('LYR1');
-          cgpv.api.event.emit({ handlerName: 'LYR1/$LegendsLayerSet$', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
+          cgpv.api.event.emit({ handlerName: 'LYR1/LegendsLayerSet', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
         }
       });
 
       // LYR1 ===================================================================================================================
-      const featureInfoLayerSet1 = cgpv.api.getFeatureInfoLayerSet('LYR1');
+      const getAllFeatureInfo1 = document.getElementById('AllFeatureInfo1');
+      getAllFeatureInfo1.addEventListener('click', function (e) {
+            cgpv.api.event.emit({ event: 'map/get_all_features', handlerName: 'LYR1' });
+          });
+
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_FEATURE_INFO.ALL_QUERIES_DONE,
         (payload) => {
-          const { layerSetId, resultSets } = payload;
-          createInfoTable('LYR1', 'ResultSetId1', resultSets);
+          const { layerSetId, resultSets, queryType } = payload;
+          createInfoTable('LYR1', 'ResultSetId1', resultSets, queryType);
         },
-        'LYR1/$FeatureInfoLayerSet$'
+        'LYR1/FeatureInfoLayerSet'
       );
 
       const LegendsLayerSet1 = cgpv.api.getLegendsLayerSet('LYR1');
@@ -227,7 +233,7 @@ <h4 id="HLYR2">2. Multiple GeoPackage Layers - one with multiple layers</h4>
           const { resultSets } = payload;
           displayLegend('LegendsId1', resultSets);
         },
-        'LYR1/$LegendsLayerSet$'
+        'LYR1/LegendsLayerSet'
       );
 
       window.setInterval(() => {

diff --git a/packages/geoview-core/public/templates/layers/image-static.html b/packages/geoview-core/public/templates/layers/image-static.html
@@ -142,7 +142,7 @@ <h4 id="HLYR1">1. Static Image Layers</h4>
           createCodeSnippet();
           createConfigSnippet();
 
-          cgpv.api.event.emit({ handlerName: 'LYR1/$LegendsLayerSet$', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
+          cgpv.api.event.emit({ handlerName: 'LYR1/LegendsLayerSet', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
         }
       });
 
@@ -154,7 +154,7 @@ <h4 id="HLYR1">1. Static Image Layers</h4>
           const { resultSets } = payload;
           displayLegend('LegendsId1', resultSets);
         },
-        'LYR1/$LegendsLayerSet$'
+        'LYR1/LegendsLayerSet'
       );
 
       window.setInterval(() => {

diff --git a/packages/geoview-core/public/templates/layers/layerlib.js b/packages/geoview-core/public/templates/layers/layerlib.js
@@ -17,17 +17,17 @@ const addBoundsPolygon = (mapId, bbox) => {
   });
 };
 
-const createInfoTable = (mapId, resultSetsId, resultSets) => {
-  const infoTable = document.getElementById(resultSetsId);
+const createInfoTable = (mapId, resultSetsId, resultSets, queryType) => {
+  const infoTable = document.getElementById(`${resultSetsId}-${queryType}`);
   infoTable.textContent = '';
-  const oldContent = document.getElementById(`layer${mapId.slice(-1)}-info`);
+  const oldContent = document.getElementById(`layer${mapId.slice(-1)}-${queryType}-info`);
   if (oldContent) oldContent.remove();
   const content = document.createElement('div');
-  content.id = `layer${mapId.slice(-1)}-info`;
+  content.id = `layer${mapId.slice(-1)}-${queryType}-info`;
   infoTable.appendChild(content);
   Object.keys(resultSets).forEach((layerPath) => {
     const activeResultSet = resultSets[layerPath];
-    const layerData = activeResultSet.data;
+    const layerData = activeResultSet.data[queryType];
 
     // Header of the layer
     const infoH1 = document.createElement('h1');
@@ -173,6 +173,7 @@ const createTableOfFilter = (mapId) => {
   tableElement.style.width = '100%';
   tableElement.border = '1px solid black';
   mapButtonsDiv.appendChild(tableElement);
+  if (!cgpv.api.maps?.[mapId]?.layer?.geoviewLayers) return;
   Object.keys(cgpv.api.maps[mapId].layer.geoviewLayers).forEach((geoviewLayerId) => {
     const geoviewLayer = cgpv.api.maps[mapId].layer.geoviewLayers[geoviewLayerId];
     Object.keys(cgpv.api.maps[mapId].layer.registeredLayers).forEach((layerPath) => {

diff --git a/packages/geoview-core/public/templates/layers/ogc-feature.html b/packages/geoview-core/public/templates/layers/ogc-feature.html
@@ -116,6 +116,8 @@ <h4 id="HLYR1">1. OGC Feature API Layers</h4>
     <pre style="height: 20pc; overflow-y: scroll" id="LegendsId1-table-pre" class="panel"></pre>
     <button type="button" class="collapsible">Get Feature Info</button>
     <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId1" class="panel">Click on feature on the map</pre>
+    <button type="button" class="collapsible" id="AllFeatureInfo1">Get All Feature Info</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId1-all" class="panel"></pre>
     <hr />
     <p>This map has a wms layer added from configuration.</p>
     <button type="button" class="collapsible">Configuration Snippet</button>
@@ -137,29 +139,32 @@ <h4 id="HLYR1">1. OGC Feature API Layers</h4>
           createConfigSnippet();
 
           createTableOfFilter('LYR1');
-          cgpv.api.event.emit({ handlerName: 'LYR1/$LegendsLayerSet$', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
+          cgpv.api.event.emit({ handlerName: 'LYR1/LegendsLayerSet', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
         }
       });
 
       // LYR1 ===================================================================================================================
-      const featureInfoLayerSet1 = cgpv.api.getFeatureInfoLayerSet('LYR1');
+      const getAllFeatureInfo1 = document.getElementById('AllFeatureInfo1');
+      getAllFeatureInfo1.addEventListener('click', function (e) {
+            cgpv.api.event.emit({ event: 'map/get_all_features', handlerName: 'LYR1' });
+          });
+
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_FEATURE_INFO.ALL_QUERIES_DONE,
         (payload) => {
-          const { layerSetId, resultSets } = payload;
-          createInfoTable('LYR1', 'ResultSetId1', resultSets);
+          const { layerSetId, resultSets, queryType } = payload;
+          createInfoTable('LYR1', 'ResultSetId1', resultSets, queryType);
         },
-        'LYR1/$FeatureInfoLayerSet$'
+        'LYR1/FeatureInfoLayerSet'
       );
 
-      const LegendsLayerSet1 = cgpv.api.getLegendsLayerSet('LYR1');
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_LEGENDS.LEGENDS_LAYERSET_UPDATED,
         (payload) => {
           const { resultSets } = payload;
           displayLegend('LegendsId1', resultSets);
         },
-        'LYR1/$LegendsLayerSet$'
+        'LYR1/LegendsLayerSet'
       );
 
       window.setInterval(() => {