Skip to content

Commit

Permalink
1149-getAllFeatureInfo
Browse files Browse the repository at this point in the history
  • Loading branch information
@ychoquet
ychoquet committed Oct 7, 2023
1 parent 79f6686 commit b7629bc
Show file tree
Hide file tree
Showing 91 changed files with 884 additions and 1,149 deletions.
2 changes: 1 addition & 1 deletion docs/app/event/LegendsLayerSet/LegendsLayerSet-event-managment.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ The `layerPath` parameter is used to link the legend to the layer entry configur

The class can be instantiated using the constructor or the create method. At creation time, the constructor instantiates a `LayerSet` object which will send a `LAYER_SET.REQUEST_LAYER_INVENTORY` event using a `mapId/LayerSetId` handler in order to get the list of all the layerPaths existing on the map. Throughout its existence, the `LegendsLayerSet` instance listens, through its `LayerSet` property, to the `LAYER_SET.LAYER_REGISTRATION` events that are emitted when a layer is created/destroyed on the map or in response to the inventory request to update its `ResultSet` property. It also listens to the `GET_LEGENDS.LEGEND_INFO` event. This listener receives the legend information returned by the layer's `getLegend` call and store it in the `LayerSet`. If all the registered layers have their legend information, a `GET_LEGENDS.LEGENDS_LAYERSET_UPDATED` event is triggered with a `mapId/LayerSetId` handler.

When created, the `LegendsLayerSet` is in a idle state. To start it, the instance listens to a `GET_LEGENDS.TRIGGER` event. This event is only listen once and when it is received, a `LAYER_SET.UPDATED` listener is attached to the instance to wait for `LayerSet` modifications. Then, a `GET_LEGENDS.QUERY_LEGEND` event will be emited to all undefined legend of the `LayerSet` to obtain the legends.
When the `LegendsLayerSet` is created, a `LAYER_SET.UPDATED` listener is attached to the instance to wait for `LayerSet` modifications. Then, a `GET_LEGENDS.QUERY_LEGEND` event will be emited to all undefined legend of the `LayerSet` to obtain the legends.

The `LAYER_SET.UPDATED` listener will catch layer add/remove applied to the map. If a layer is added, a `GET_LEGENDS.QUERY_LEGEND` event will be emited for it and when all the registered layers have received their legend information, a `GET_LEGENDS.LEGENDS_LAYERSET_UPDATED` event is emited using the `mapId/LayerSetId` as handler. The `GET_LEGENDS.LEGENDS_LAYERSET_UPDATED` event is also emited when a layer is removed from the map to signal that a legend has been removed.

Expand Down
29 changes: 29 additions & 0 deletions packages/geoview-core/public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,3 +152,32 @@ td {
text-align: center;
font-size: smaller;
}

table.info, th.info, td.info, th.infoCol1, td.infoCol1 {
border: 1px solid black;
}
th.info, td.info, th.infoCol1, td.infoCol1 {
padding: 15px;
width: 15%;
}
th.info, th.infoCol1, td.infoCol1 {
text-align: left;
font-weight: bold;
font-size: 15px;
}

table.state {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td.state, th.state {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

table.state {
display: flex;
}
91 changes: 29 additions & 62 deletions packages/geoview-core/public/templates/layers/esri-dynamic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,9 @@ <h1><strong>ESRI Dynamic Layers</strong></h1>

<div class="map-title-holder">
<h4 id="HLYR1">1. Many ESRI Dynamic Layers with legend settings in the config</h4>
&nbsp;<h5 id="HLYR1-state">(undefined)</h5>
<a class="ref-link" href="#top">Top</a>
</div>
<div id="HLYR1-state" class="map-title-holder"></div>
<div
id="LYR1"
class="llwp-map"
Expand Down Expand Up @@ -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>
Expand All @@ -507,9 +509,9 @@ <h4 id="HLYR1">1. Many ESRI Dynamic Layers with legend settings in the config</h

<div class="map-title-holder">
<h4 id="HLYR2">2. Date filtering using time zone changed and non ISO date format</h4>
&nbsp;<h5 id="HLYR2-state">(undefined)</h5>
<a class="ref-link" href="#top">Top</a>
</div>
<div id="HLYR2-state" class="map-title-holder"></div>
<div
id="LYR2"
class="llwp-map"
Expand Down Expand Up @@ -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>
Expand All @@ -566,9 +570,9 @@ <h4 id="HLYR2">2. Date filtering using time zone changed and non ISO date format

<div class="map-title-holder">
<h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
&nbsp;<h5 id="HLYR3-state">(undefined)</h5>
<a class="ref-link" href="#top">Top</a>
</div>
<div id="HLYR3-state" class="map-title-holder"></div>
<div
id="LYR3"
class="llwp-map"
Expand Down Expand Up @@ -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>
Expand All @@ -637,9 +643,6 @@ <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 });

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'`,
Expand Down Expand Up @@ -702,102 +705,66 @@ <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'
);

listenToLegendLayerSetChanges('HLYR1-state', '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'
);

listenToLegendLayerSetChanges('HLYR2-state', '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'
);

window.setInterval(() => {
const displayField1 = document.getElementById('HLYR1-state');
const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR1').resultSets;
if (geoviewLayers) {
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 !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
} else displayField1.textContent = '(undefined)';
}, 250)

window.setInterval(() => {
const displayField2 = document.getElementById('HLYR2-state');
const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR2').resultSets;
if (geoviewLayers) {
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 !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
} else displayField2.textContent = '(undefined)';
}, 250)

window.setInterval(() => {
const displayField3 = document.getElementById('HLYR3-state');
const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR3').resultSets;
if (geoviewLayers) {
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 !== '(' ? `${output.slice(0, -2)})` : '(undefined)';;
} else displayField3.textContent = '(undefined)';
}, 250)
listenToLegendLayerSetChanges('HLYR3-state', 'LYR3/LegendsLayerSet');

</script>
</body>
Expand Down
Loading

0 comments on commit b7629bc

Please sign in to comment.