1149-getAllFeatureInfo

Canadian-Geospatial-Platform · Oct 5, 2023 · b7add23 · b7add23
1 parent 2d2af6b
commit b7add23
Show file tree

Hide file tree

Showing 87 changed files with 679 additions and 642 deletions.
diff --git a/packages/geoview-core/public/templates/layers/esri-dynamic.html b/packages/geoview-core/public/templates/layers/esri-dynamic.html
@@ -497,7 +497,9 @@ <h4 id="HLYR1">1. Many ESRI Dynamic Layers with legend settings in the config</h
     <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">Get All Feature Info</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId1-all" class="panel">Comming soon!</pre>
     <hr />
     <button type="button" class="collapsible">Configuration Snippet</button>
     <pre id="LYR1CS" class="panel"></pre>
@@ -556,7 +558,9 @@ <h4 id="HLYR2">2. Date filtering using time zone changed and non ISO date format
     <button class="collapsible">Get Legend</button>
     <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>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId2-at_long_lat" class="panel">Click on feature on the map</pre>
+    <button type="button" class="collapsible">Get All Feature Info</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId2-all" class="panel">Comming soon!</pre>
     <hr />
     <button type="button" class="collapsible">Configuration Snippet</button>
     <pre id="LYR2CS" class="panel"></pre>
@@ -614,7 +618,9 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
     <button class="collapsible">Get Legend</button>
     <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>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId3-at_long_lat" class="panel">Click on feature on the map</pre>
+    <button type="button" class="collapsible">Get All Feature Info</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId3-all" class="panel">Comming soon!</pre>
     <hr />
     <button type="button" class="collapsible">Configuration Snippet</button>
     <pre id="LYR3CS" class="panel"></pre>
@@ -637,9 +643,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'`,
@@ -702,64 +708,62 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
       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');
       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');
       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'
       );
 
+      // Interval ===============================================================================================================
       window.setInterval(() => {
         const displayField1 = document.getElementById('HLYR1-state');
         const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR1').resultSets;

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>
@@ -200,7 +202,9 @@ <h4 id="HLYR2">2. Date filtering using time zone changed and non ISO date format
     <button class="collapsible">Get Legend</button>
     <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>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId2-at_long_lat" 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>
@@ -258,7 +262,9 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
     <button class="collapsible">Get Legend</button>
     <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>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId3-at_long_lat" 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
@@ -151,7 +151,7 @@ <h4 id="HLYR1">1. Many GeoCore 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>
     <hr />
     <p>This map has a wms layer added from configuration.</p>
     <button type="button" class="collapsible">Configuration Snippet</button>
@@ -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 });
         }
       });
 
@@ -182,10 +182,10 @@ <h4 id="HLYR1">1. Many GeoCore Layers</h4>
       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');
@@ -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
@@ -140,7 +140,9 @@ <h4 id="HLYR1">1. Many GeoJSON Layers</h4>
       <label> Added Layer ID : </label> <label id="new-layer-id-label"></label>
     </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>
@@ -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(() => {