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 4, 2023
1 parent a4e8ff6 commit c7334bf
Show file tree
Hide file tree
Showing 87 changed files with 644 additions and 611 deletions.
24 changes: 12 additions & 12 deletions packages/geoview-core/public/templates/layers/esri-dynamic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -498,6 +498,8 @@ <h4 id="HLYR1">1. Many ESRI Dynamic Layers with legend settings in the config</h
<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">Get All Feature Info</button>
<pre style="height: 20pc; overflow-y: scroll" id="ResultSetId2" class="panel">Comming soon!</pre>
<hr />
<button type="button" class="collapsible">Configuration Snippet</button>
<pre id="LYR1CS" class="panel"></pre>
Expand Down Expand Up @@ -637,9 +639,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'`,
Expand Down Expand Up @@ -705,17 +707,16 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
const { layerSetId, resultSets } = payload;
createInfoTable('LYR1', 'ResultSetId1', resultSets);
},
'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 ===================================================================================================================
Expand All @@ -726,17 +727,16 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
const { layerSetId, resultSets } = payload;
createInfoTable('LYR2', 'ResultSetId2', resultSets);
},
'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 ===================================================================================================================
Expand All @@ -747,19 +747,19 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
const { layerSetId, resultSets } = payload;
createInfoTable('LYR3', 'ResultSetId3', resultSets);
},
'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;
Expand Down
59 changes: 37 additions & 22 deletions packages/geoview-core/public/templates/layers/esri-feature.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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'`,
Expand Down Expand Up @@ -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(() => {
Expand Down
6 changes: 3 additions & 3 deletions packages/geoview-core/public/templates/layers/geocore.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
}
});

Expand All @@ -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');
Expand All @@ -195,7 +195,7 @@ <h4 id="HLYR1">1. Many GeoCore Layers</h4>
const { resultSets } = payload;
displayLegend('LegendsId1', resultSets);
},
'LYR1/$LegendsLayerSet$'
'LYR1/LegendsLayerSet'
);

window.setInterval(() => {
Expand Down
18 changes: 12 additions & 6 deletions packages/geoview-core/public/templates/layers/geojson.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 });
}
});

Expand Down Expand Up @@ -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');
Expand All @@ -243,7 +249,7 @@ <h4 id="HLYR1">1. Many GeoJSON Layers</h4>
const { resultSets } = payload;
displayLegend('LegendsId1', resultSets);
},
'LYR1/$LegendsLayerSet$'
'LYR1/LegendsLayerSet'
);

window.setInterval(() => {
Expand Down
18 changes: 12 additions & 6 deletions packages/geoview-core/public/templates/layers/geopackage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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');
Expand All @@ -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(() => {
Expand Down
4 changes: 2 additions & 2 deletions packages/geoview-core/public/templates/layers/image-static.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
}
});

Expand All @@ -154,7 +154,7 @@ <h4 id="HLYR1">1. Static Image Layers</h4>
const { resultSets } = payload;
displayLegend('LegendsId1', resultSets);
},
'LYR1/$LegendsLayerSet$'
'LYR1/LegendsLayerSet'
);

window.setInterval(() => {
Expand Down
11 changes: 6 additions & 5 deletions packages/geoview-core/public/templates/layers/layerlib.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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) => {
Expand Down
Loading

0 comments on commit c7334bf

Please sign in to comment.