);
});
return children;
}
/**
* Shows use cases brief information of selected region
* @param {String} selectedRegion
* @returns useCasesDOM
*/
showBrief(selectedRegion) {
let regionFeatures = [];
if (mapViewer.state.useCaseLevel === 2) {
for (let feature in this.features) {
if (this.features[feature].attributes.Region === selectedRegion) {
regionFeatures.push(this.features[feature].attributes);
}
}
let count = [...new Set(regionFeatures.map((item) => item.Use_case_id))]
.length;
return (
{count}
use cases
{this.getDataBrief(regionFeatures)}
);
} else if (mapViewer.state.useCaseLevel === 3) {
layerSpatial.definitionExpression !== null
? (layerSpatial.definitionExpression += ` AND Latitude = ${mapViewer.state.selectedUseCases[0].attributes.Latitude} AND Longitude = ${mapViewer.state.selectedUseCases[0].attributes.Longitude}`)
: (layerSpatial.definitionExpression = `Latitude = ${mapViewer.state.selectedUseCases[0].attributes.Latitude} AND Longitude = ${mapViewer.state.selectedUseCases[0].attributes.Longitude}`);
for (let feature in mapViewer.state.selectedUseCases) {
regionFeatures.push(
mapViewer.state.selectedUseCases[feature].attributes,
);
}
let count = [...new Set(regionFeatures.map((item) => item.Use_case_id))]
.length;
return (
<>
{count}
use cases
{this.getDataBrief(regionFeatures)}
);
}
}
/**
* Transfrom raw data to ordered data by environmental topics
*/
proccessDataSummary() {
let topicProducts = this.getDifferentTopicUsed(this.features);
for (let topicProduct in topicProducts) {
processedData[topicProducts[topicProduct]] = [];
}
for (let feature in this.features) {
let topics = this.features[feature].attributes.Use_case_topics.split(';');
for (let topic in topics) {
processedData[topics[topic]].push(this.features[feature].attributes);
}
}
}
/**
* Creates lateral menu ordered by specified environmental topic
* @param {Object} data
* @param {String} topic_name
* @returns lateralMenuDOM
*/
getDataSummary(data, topic_name) {
let children = this.getDataBrief(data);
return (
{topic_name}
{children}
);
}
/**
* Method to toggle dropdown content
* @param {Event} e
*/
toggleDropdownContent(e) {
let aria = e.target.getAttribute('aria-expanded');
e.target.setAttribute('aria-expanded', aria === 'true' ? 'false' : 'true');
// dropdown expanded
if (aria === 'false') {
//save for reload
mapViewer.state.activeDropdowns.push(e.target.getAttribute('id'));
//scroll position
document.querySelector('.use-cases-products-list').scrollTo({
top:
e.currentTarget.offsetTop -
document.querySelector('.use-cases-products-list').offsetTop,
behavior: 'smooth',
});
} else {
if (
//remove for reload
mapViewer.state.activeDropdowns.includes(e.target.getAttribute('id'))
) {
const index = mapViewer.state.activeDropdowns.indexOf(
e.target.getAttribute('id'),
);
if (index > -1) {
// only splice array when item is found
mapViewer.state.activeDropdowns.splice(index, 1);
}
}
}
}
/**
* Returns lateral menu
* @returns lateralMenuDOM
*/
setDOMSummary() {
this.proccessDataSummary();
let DOMElements = [];
for (let topic_name in processedData)
DOMElements.push(
this.getDataSummary(processedData[topic_name], topic_name),
);
return <>{DOMElements};
}
getCountryNames(countries) {
let url =
this.props.layerHighlight.url +
'/0/query?where=CNTR_ID+in+%28' +
countries +
'%29&text=&objectIds=&time=&timeRelation=esriTimeRelationOverlaps&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&distance=&units=esriSRUnit_Foot&relationParam=&outFields=CNTR_ID%2C+NAME_ENGL&returnGeometry=false&returnTrueCurves=false&maxAllowableOffset=&geometryPrecision=&outSR=&havingClause=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&historicMoment=&returnDistinctValues=false&resultOffset=&resultRecordCount=&returnExtentOnly=false&sqlFormat=none&datumTransformation=¶meterValues=&rangeValues=&quantizationParameters=&featureEncoding=esriDefault&f=pjson';
return fetch(url);
}
/**
* Returns all different Environmental Topic names
* @param {Array} features
* @returns allTopicNames
*/
getDifferentTopicUsed(features) {
let topicProducts = [];
for (let feature in features) {
let topics = features[feature].attributes.Use_case_topics.split(';');
for (let topic in topics) {
if (!topicProducts.includes(topics[topic])) {
topicProducts.push(topics[topic]);
}
}
}
return topicProducts.sort();
}
/**
* Shows summarized information of a whole set of use cases.
*/
showSummary() {
if (view !== undefined && this.features === undefined && this.loadOnce) {
this.loadOnce = false;
(async () => {
let features = await layerSpatial
.queryFeatures()
.then((featureSet) => featureSet.features);
let countryCodes = features
.map((a) => {
return a.attributes;
})
.map((b) => {
return "'" + b.Spatial_coverage + "'";
})
.filter((v, i, a) => a.indexOf(v) === i);
this.getCountryNames(countryCodes)
.then((response) => response.json())
.then((data) => {
features = layerControl.orderFeatures(features, data.features);
this.features = features;
mapViewer.setState((prevState) => ({
useCaseLevel: 1,
region: '',
selectedUseCase: '',
previousState: prevState.useCaseLevel,
}));
});
})();
} else if (this.features !== undefined) {
if (mapViewer.state.useCaseLevel !== 1) {
mapViewer.setState((prevState) => ({
useCaseLevel: 1,
region: '',
selectedUseCase: '',
previousState: prevState.useCaseLevel,
}));
} else {
return (
<>