Some functionalities of the map viewer are not available for touchscreens. Functionality will be limited.
{products}
{
this.toggleLayer(e.target);
}}
>
,
);
tmsLayerIndex++;
});
} else {
for (var i in dataset.Layer) {
if (dataset.Layer[i].Default_active === true) {
layer_default.push(
dataset.Layer[i].LayerId + '_' + inheritedIndexDataset + '_' + i,
);
}
if (dataset.HandlingLevel) {
this.layerGroups[dataset.DatasetId].push(dataset.Layer[i].LayerId);
}
layers.push(
this.metodProcessLayer(
dataset.Layer[i],
index,
inheritedIndexDataset,
dataset.ViewService,
dataset.TimeSeriesService,
checkIndex,
dataset.IsTimeSeries,
dataset.DatasetId,
dataset.DatasetTitle,
dataset.ProductId,
dataset.dataset_download_information,
),
);
index++;
}
}
if (!layer_default.length && dataset.Layer && dataset.Layer[0]) {
layer_default.push(
dataset.Layer[0].LayerId + '_' + inheritedIndexDataset + '_0',
);
}
if (dataset.DatasetURL) {
const originUrl = window.location.origin;
let datasetUrl = new URL(dataset.DatasetURL);
let datasetUrlPathname = datasetUrl.pathname;
let newUrl = new URL(datasetUrlPathname, originUrl);
dataset.DatasetURL = newUrl.toString();
}
return (
{layers}
);
}
/**
* Method to uncheck dataset checkbox if not all layers are checked
* @param {*} id parentId (id del dataset)
*/
updateCheckDataset(id) {
let datasetCheck = document.querySelector('#' + id);
if (!datasetCheck) return;
let layerChecks = Array.from(
document.querySelectorAll('[parentid="' + id + '"]'),
);
let trueChecks = layerChecks.filter((elem) => elem.checked).length;
datasetCheck.checked = trueChecks > 0;
let parentId = datasetCheck.getAttribute('parentid');
if (parentId) {
if (parentId.includes('map_family')) {
this.updateCheckFamily(parentId);
} else {
this.updateCheckProduct(parentId);
}
}
}
updateCheckFamily(id) {
let familyCheck = document.querySelector('#' + id);
if (!familyCheck) return;
let layerChecks = Array.from(
document.querySelectorAll('[parentid="' + id + '"]'),
);
let trueChecks = layerChecks.filter((elem) => elem.checked).length;
familyCheck.checked = trueChecks > 0;
let parentId = familyCheck.getAttribute('parentid');
if (parentId) {
this.updateCheckProduct(parentId);
}
}
/**
* Processes each layer (of each dataset)
* @param {*} layer
* @param {*} layerIndex
* @param {*} inheritedIndex
* @param {*} urlWMS
* @param {*} parentIndex
* @returns
*/
metodProcessLayer(
layer,
layerIndex,
inheritedIndex,
viewService,
featureInfoUrl,
parentIndex,
isTimeSeries,
DatasetId,
DatasetTitle,
ProductId,
dataset_download_information,
) {
//For Legend request
const legendRequest =
'request=GetLegendGraphic&version=1.0.0&format=image/png&layer=';
//For each layer
let inheritedIndexLayer = inheritedIndex + '_' + layerIndex;
let style = this.props.download ? { paddingLeft: '4rem' } : {};
//Add sublayers and popup enabled for layers
if (
!this.layers.hasOwnProperty(layer.LayerId + '_' + inheritedIndexLayer)
) {
if (viewService?.toLowerCase().endsWith('mapserver')) {
this.layers[
layer.LayerId + '_' + inheritedIndexLayer
] = new MapImageLayer({
url: viewService,
title: layer.Title,
DatasetId: DatasetId,
DatasetTitle: DatasetTitle,
ProductId: ProductId,
LayerTitle: layer.Title,
});
//iterate sublayers fetching all sublayer data
} else if (viewService?.toLowerCase().includes('wms')) {
viewService = viewService?.includes('?')
? viewService + '&'
: viewService + '?';
this.layers[layer.LayerId + '_' + inheritedIndexLayer] = new WMSLayer({
url: viewService,
featureInfoFormat: 'text/html',
featureInfoUrl: viewService,
title: '',
legendEnabled: true,
sublayers: [
{
name: layer.LayerId,
title: layer.Title,
popupEnabled: true,
queryable: true,
visible: true,
legendEnabled: true,
legendUrl: layer.StaticImageLegend
? layer.StaticImageLegend
: viewService + legendRequest + layer.LayerId,
featureInfoUrl: featureInfoUrl,
},
],
isTimeSeries: isTimeSeries,
fields: layer.Fields,
DatasetId: DatasetId,
DatasetTitle: DatasetTitle,
ProductId: ProductId,
ViewService: viewService,
});
} else if (viewService?.toLowerCase().includes('wmts')) {
this.layers[layer.LayerId + '_' + inheritedIndexLayer] = new WMTSLayer({
url: viewService?.includes('?')
? viewService + '&'
: viewService + '?',
spatialReference: this.view?.spatialReference,
//id: layer.LayerId,
title: '',
_wmtsTitle: layer.Title, // CLMS-1105
activeLayer: {
id: layer.LayerId,
title: layer.Title,
featureInfoUrl: featureInfoUrl,
},
isTimeSeries: isTimeSeries,
fields: layer.Fields,
DatasetId: DatasetId,
DatasetTitle: DatasetTitle,
ProductId: ProductId,
ViewService: viewService,
StaticImageLegend: layer.StaticImageLegend,
LayerTitle: layer.Title,
DatasetDownloadInformation: dataset_download_information || {},
customLayerParameters: {
SHOWLOGO: false,
},
});
} else {
this.layers[
layer.LayerId + '_' + inheritedIndexLayer
] = new FeatureLayer({
url:
viewService +
(viewService?.endsWith('/') ? '' : '/') +
layer.LayerId,
id: layer.LayerId,
title: layer.Title,
featureInfoUrl: featureInfoUrl,
popupEnabled: true,
isTimeSeries: isTimeSeries,
fields: layer.Fields,
DatasetId: DatasetId,
DatasetTitle: DatasetTitle,
ProductId: ProductId,
ViewService: viewService,
});
}
}
// const isCDSE = !!this.url && this.url.toLowerCase().includes('/ogc/');
// if (isCDSE) {
// this.layers[
// layer.LayerId + '_' + inheritedIndexLayer
// ].datasetDownloadInformation = dataset_download_information || {};
// this.layers[
// layer.LayerId + '_' + inheritedIndexLayer
// ].customLayerParameters = {
// SHOWLOGO: false,
// };
// }
return (
{
this.toggleLayer(e.target);
}}
>
);
}
/**
* adds a custom TMS layer to this.layers array
* @param {*} checkboxId Is the layers checkbox ID
*/
processTMSLayer(layer, checkboxId, dataset) {
let selectedUrl;
let zoom = this.view.get('zoom');
if (layer.LayerUrl && Object.keys(layer.LayerUrl).length > 0) {
selectedUrl =
zoom < 10 ? layer.LayerUrl['longZoom'] : layer.LayerUrl['shortZoom'];
} else {
selectedUrl = layer.LayerUrl;
}
const CustomTileLayer = BaseTileLayer.createSubclass({
properties: {
urlTemplate: null,
tms: false,
tint: {
value: null,
},
},
// generate the tile url for a given level, row and column
getTileUrl: function (level, row, col) {
if (!selectedUrl) return '';
return selectedUrl
.replace('{z}', level)
.replace('{x}', col)
.replace('{y}', row);
},
// This method fetches tiles for the specified level and size.
// Override this method to process the data returned from the server.
fetchTile: function (level, row, col, options) {
if (!selectedUrl) return Promise.resolve(null);
if (this.tms) {
var rowmax = 1 << level; // LEVEL 1 * (2 ** 1) = 1 * (2) = 2 ; LEVEL 2 * (2 ** 2) = 1 * (4) = 4 ; LEVEL 3 * (2 ** 3) = 1 * (8) = 8 . . .
row = zoom < 10 ? rowmax - row - 1 : row; // Invert Y axis
}
const url = this.getTileUrl(level, row, col);
// request for tiles based on the generated url
// the signal option ensures that obsolete requests are aborted
return esriRequest(url, {
responseType: 'image',
signal: options && options.signal,
}).then(
function (response) {
// when esri request resolves successfully
// get the image from the response
const image = response.data;
const width = this.tileInfo.size[0];
const height = this.tileInfo.size[0];
// create a canvas with 2D rendering context
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
//canvas
canvas.width = width;
canvas.height = height;
// Draw the blended image onto the canvas.
context.drawImage(image, 0, 0, width, height);
return canvas;
}.bind(this),
);
},
});
// *******************************************************
// end of Custom tile layer class code
// *******************************************************
let customTileLayer = this.getGlobalDynamicLandCoverUrl(
CustomTileLayer,
checkboxId,
layer,
dataset,
selectedUrl,
);
if (customTileLayer === null || customTileLayer === undefined) return;
if (this.layers[checkboxId] && this.activeLayersJSON[checkboxId]) {
if (customTileLayer.urlTemplate !== this.layers[checkboxId].urlTemplate) {
this.map.remove(this.layers[checkboxId]);
this.layers[checkboxId] = customTileLayer;
this.map.add(this.layers[checkboxId]);
}
} else {
this.layers[checkboxId] = customTileLayer;
}
}
createMyServicesComponent() {
let dropdowns = document.querySelectorAll('.map-menu-dropdown');
let i = dropdowns.length === 0 ? 0 : dropdowns.length - 1;
let componentId = `component_${i}`;
let dropdownId = `dropdown_${i}`;
// Create "My Services" component from the start and set its display to none
let myServicesStyle =
this.state.wmsUserServiceLayers.length > 0 ? {} : { display: 'none' };
return (
${title}
this.onDrop(e)}
onDragOver={(e) => this.onDragOver(e)}
onDragStart={(e) => this.onDragStart(e)}
>
);
}
/**
* Behavior for drag-and-drop of active layers
* when dropping a layer upon another
* @param {*} e
* @returns
*/
onDrop(e) {
let dst = e.target.closest('div.active-layer');
if (dst === this.draggingElement) return;
let id = dst.id.split('_').slice(-4).join('_');
//First, we decide how to insert the element in the DOM
let init_ord = this.draggingElement.getAttribute('layer-order');
let dst_ord = dst.getAttribute('layer-order');
if (init_ord > dst_ord) {
dst.parentElement.insertBefore(this.draggingElement, dst.nextSibling);
} else {
dst.parentElement.insertBefore(this.draggingElement, dst);
}
if (!this.state.draggedElements.includes(id)) {
this.setState({ draggedElements: [...this.state.draggedElements, id] });
}
this.layersReorder();
this.saveLayerOrder();
}
/**
* Reorders the layers depending on the state of active layers panel
* @returns
*/
layersReorder() {
let activeLayers = document.querySelectorAll('.active-layer');
let counter = activeLayers.length - 1;
let filterLayer;
activeLayers.forEach((item, index) => {
if (
this.props.hotspotData &&
this.props.hotspotData.filteredLayers &&
Object.keys(this.props.hotspotData.filteredLayers).length > 0
) {
Object.keys(this.props.hotspotData.activeLayers).forEach((key) => {
if (item.id.includes(key)) {
if (key.includes('all_lcc')) {
filterLayer = this.layers['lcc_filter'];
} else if (key.includes('all_present')) {
filterLayer = this.layers['lc_filter'];
}
}
this.map.reorder(filterLayer, index);
});
}
let order = counter - index;
item.setAttribute('layer-order', order);
if (filterLayer === undefined) {
this.layerReorder(this.layers[item.getAttribute('layer-id')], order);
} else {
this.layerReorder(filterLayer, order);
}
});
}
/**
* Saves the order of the active layers to sessionStorage
*/
saveLayerOrder() {
if (this.props.download) return;
let activeLayers = document.querySelectorAll('.active-layer');
let newLayerOrder = [];
for (let i = 0; i < activeLayers.length; i++) {
newLayerOrder.unshift(activeLayers[i].getAttribute('layer-id'));
}
sessionStorage.setItem('checkedLayers', JSON.stringify(newLayerOrder));
window.dispatchEvent(new Event('storage'));
}
/**
* Assigns an index to a layer
* (depending on its position on active layers panel)
* @param {*} layer
* @param {*} index
*/
layerReorder(layer, index) {
this.map.reorder(layer, index);
}
/**
* Needed to get the desired drag-and-drop behavior
* @param {*} e
*/
onDragOver(e) {
e.preventDefault();
}
/**
* Needed to get the desired drag-and-drop behavior
* @param {*} e
*/
onDragStart(e) {
this.draggingElement = e.target;
}
/**
* Method for granularity
*/
getGroup(elem) {
for (var i in this.layerGroups) {
if (
this.layerGroups[i].includes(elem.getAttribute('layerid')) &&
elem.closest("[datasetid='" + i + "']")
)
return i;
}
return null;
}
getGroupLayers(group) {
let layers;
if (group) {
layers = document
.querySelector('[datasetid="' + group + '"] input')
.getAttribute('defcheck')
.split(',');
} else {
layers = '';
}
return layers;
}
/**
* Method to show/hide time slider
* @param {*} e From the click event
* @param {*} id id from elem
*/
showTimeSlider(elem, fromDownload, hideCalendar) {
if (!elem) return;
if (!this.timeLayers) this.timeLayers = {};
if (!this.visibleLayers) this.visibleLayers = {};
if (!this.timeLayers[elem.id]) this.timeLayers[elem.id] = ['far', 'clock'];
if (!this.visibleLayers[elem.id]) {
this.visibleLayers[elem.id] = ['fas', 'eye'];
}
if (
sessionStorage.key('timeSliderTag') &&
sessionStorage.getItem('timeSliderTag') === 'true'
)
this.setSliderTag(false);
else this.setSliderTag(true);
let activeLayers = document.querySelectorAll('.active-layer');
let group = this.getGroup(elem);
let groupLayers = this.getGroupLayers(group);
if (this.timeLayers[elem.id][1] === 'clock') {
activeLayers.forEach((layer) => {
let layerId = layer.getAttribute('layer-id');
let order = this.activeLayersJSON[elem.id]?.props?.['layer-order'] || 0;
if (groupLayers && groupLayers.includes(layerId)) {
elem = document.getElementById(layerId);
}
if (elem && elem.id === layerId) {
this.timeLayers[elem.id] = ['fas', 'stop'];
if (
!this.visibleLayers[elem.id] ||
this.visibleLayers[elem.id][1] === 'eye-slash'
) {
if (this.layers[elem.id]) this.layers[elem.id].visible = true;
this.visibleLayers[elem.id] = ['fas', 'eye'];
}
document
.querySelectorAll(
'.active-layer[layer-id="' +
elem.id +
'"] .map-menu-icon:not(.active-layer-time)',
)
.forEach((item) => {
item.classList.add('locked');
});
if (document.querySelector('#products_label'))
document.querySelector('#products_label').classList.add('locked');
if (document.querySelector('#map_remove_layers')) {
const mapRemoveBtn = document.querySelector('#map_remove_layers');
if (mapRemoveBtn) mapRemoveBtn.classList.add('locked');
}
if (this.props.download && document.querySelector('#download_label'))
document.querySelector('#download_label').classList.add('locked');
this.activeLayersJSON[elem.id] = this.addActiveLayer(
elem,
order,
fromDownload,
hideCalendar,
);
} else {
const node = document.getElementById(layerId);
if (
node &&
node.parentElement &&
node.parentElement.dataset &&
node.parentElement.dataset.timeseries === 'true'
) {
if (!this.visibleLayers[layerId]) {
this.visibleLayers[layerId] = ['fas', 'eye'];
}
if (this.visibleLayers[layerId][1] === 'eye') {
if (this.layers[layerId]) this.layers[layerId].visible = false;
this.visibleLayers[layerId] = ['fas', 'eye-slash'];
}
const activeNode = document.querySelector(
'.active-layer[layer-id="' + layerId + '"]',
);
if (activeNode) activeNode.classList.add('locked');
}
this.activeLayersJSON[layerId] = this.addActiveLayer(
document.getElementById(layerId),
order,
fromDownload,
);
}
});
const op = document.querySelector('.opacity-panel');
if (op && op.style.display === 'block') {
this.closeOpacity();
}
} else {
activeLayers.forEach((layer) => {
let layerId = layer.getAttribute('layer-id');
let order = this.activeLayersJSON[elem.id]?.props?.['layer-order'] || 0;
if (groupLayers && groupLayers.includes(layerId)) {
elem = document.getElementById(layerId);
}
if (elem && elem.id === layerId) {
this.timeLayers[elem.id] = ['far', 'clock'];
this.activeLayersJSON[elem.id] = this.addActiveLayer(
elem,
order,
fromDownload,
);
document
.querySelectorAll(
'.active-layer[layer-id="' +
elem.id +
'"] .map-menu-icon:not(.active-layer-time)',
)
.forEach((item) => {
item.classList.remove('locked');
});
const productsLabel = document.querySelector('#products_label');
if (productsLabel) productsLabel.classList.remove('locked');
const removeBtn = document.querySelector('#map_remove_layers');
if (removeBtn) removeBtn.classList.remove('locked');
if (this.props.download) {
const dl = document.querySelector('#download_label');
if (dl) dl.classList.remove('locked');
const timeIcon = document.querySelector(
'.active-layer[layer-id="' +
elem.id +
'"] .map-menu-icon.active-layer-time',
);
if (timeIcon && timeIcon.dataset.download === 'true') {
const dlBtn = document.getElementById('download_label');
if (dlBtn) dlBtn.click();
}
} else {
const timeIcon = document.querySelector(
'.active-layer[layer-id="' +
elem.id +
'"] .map-menu-icon.active-layer-time',
);
if (timeIcon && timeIcon.dataset.download === 'true') {
const prBtn = document.getElementById('products_label');
if (prBtn) prBtn.click();
}
}
const ts = document.querySelector('.timeslider-container');
if (ts && document.contains(ts))
ReactDOM.unmountComponentAtNode(
document.querySelector('.esri-ui-bottom-right'),
);
const warn = document.querySelector('.drawRectanglePopup-block');
if (warn) warn.style.display = 'block';
} else {
if (!this.visibleLayers[layerId]) {
this.visibleLayers[layerId] = ['fas', 'eye'];
}
if (this.visibleLayers[layerId][1] === 'eye-slash') {
if (this.layers[layerId]) this.layers[layerId].visible = true;
this.visibleLayers[layerId] = ['fas', 'eye'];
this.activeLayersJSON[layerId] = this.addActiveLayer(
document.getElementById(layerId),
order,
fromDownload,
);
}
const activeNode = document.querySelector(
'.active-layer[layer-id="' + layerId + '"]',
);
if (activeNode) activeNode.classList.remove('locked');
}
});
}
this.setState({});
}
checkInfoWidget() {
let layers = [];
Object.keys(this.activeLayersJSON).forEach((key) => {
let layer = this.layers[key];
if (layer.visible) {
layers.push(layer);
}
});
if (layers.length === 0 && document.querySelector('.info-container')) {
if (
this.props.view.graphics.items.find((a) => {
return a.attributes ? a.attributes.id === 'pixel-info' : false;
})
) {
let marker = this.props.view.graphics.items.find((a) => {
return a.attributes && a.attributes.id === 'pixel-info';
});
this.props.view.graphics.remove(marker);
}
if (
this.props.mapViewer.activeWidget?.container.current.className ===
'info-container esri-component'
) {
this.props.mapViewer.activeWidget.setState({
showMapMenu: false,
pixelInfo: false,
popup: false,
});
this.props.mapViewer.setActiveWidget();
let rightPanels = document.querySelectorAll('.right-panel');
rightPanels.forEach((panel) => {
if (
panel.parentElement.className === 'info-container esri-component'
) {
panel.style.display = 'none';
}
});
document
.querySelector('.esri-icon-description')
.classList.remove('active-widget');
document
.querySelector('.esri-ui-top-right.esri-ui-corner')
.classList.remove('show-panel');
}
document.querySelector('.info-container').style.display = 'none';
} else if (layers.length > 0) {
document.querySelector('.info-container').style.display = 'flex';
}
}
getLayerTitle(layer) {
let title;
if (layer.url.toLowerCase().includes('wmts')) {
// CLMS-1105
title = layer._wmtsTitle;
} else {
if (layer.sublayers) {
title = layer.sublayers.items[0].title;
} else if (layer.activeLayer) {
title = layer.activeLayer.title;
} else {
title = layer.title;
}
}
return title;
}
/**
* Method to set layer opacity
* @param {*} elem From the input
* @param {*} e From the click event
*/
showOpacity(elem, e) {
let opacity = e.currentTarget.dataset.opacity;
document.querySelector('.opacity-slider input').value = opacity;
document.querySelector('.opacity-panel').style.display = 'block';
let left = e.currentTarget.offsetLeft + 48;
document.querySelector('.opacity-panel').style.left = left + 'px';
let top =
document.querySelector('.tabs').offsetHeight +
15 -
document.querySelector('.panels').scrollTop +
e.currentTarget.closest('.active-layer').offsetTop +
e.currentTarget.closest('.active-layer').offsetHeight / 2 -
document.querySelector('.opacity-panel').offsetHeight / 2;
document.querySelector('.opacity-panel').style.top = top + 'px';
document.querySelector('.opacity-slider input').dataset.layer = elem.id;
e.stopPropagation();
this.hideOnClickOutsideOpacity();
}
setOpacity() {
let layer = document.querySelector('.opacity-slider input').dataset.layer;
let value = document.querySelector('.opacity-panel input').value;
if (this.layers['lcc_filter'] && layer.includes('all_lcc')) {
this.layers['lcc_filter'].opacity = value / 100;
this.saveOpacity(this.layers['lcc_filter'], value / 100);
} else if (this.layers['lc_filter'] && layer.includes('all_present')) {
this.layers['lc_filter'].opacity = value / 100;
this.saveOpacity(this.layers['lc_filter'], value / 100);
} else if (this.layers['klc_filter'] && layer.includes('cop_klc')) {
this.layers['klc_filter'].opacity = value / 100;
this.saveOpacity(this.layers['klc_filter'], value / 100);
} else if (this.layers['pa_filter'] && layer.includes('protected_areas')) {
this.layers['pa_filter'].opacity = value / 100;
this.saveOpacity(this.layers['pa_filter'], value / 100);
}
this.layers[layer].opacity = value / 100;
this.saveOpacity(layer, value / 100);
if (
this.map.findLayerById(layer) &&
this.map.findLayerById(layer) !== null &&
(this.map.findLayerById(layer).opacity ||
this.map.findLayerById(layer).opacity === 0)
) {
this.map.findLayerById(layer).opacity = value / 100;
}
document.querySelector(
'.active-layer[layer-id="' + layer + '"] .active-layer-opacity',
).dataset.opacity = value;
// }
setTimeout(() => {
this.setLegendOpacity();
}, 100);
}
waitForDataFill(obj) {
while (obj.length === 0) {
new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
}
return obj;
}
setLegendOpacity() {
let collection = document.getElementsByClassName('esri-legend__symbol');
Array.prototype.forEach.call(collection, function (element) {
let img = {};
if (element.hasChildNodes()) {
img = element.childNodes[0];
} else {
img = element;
}
// Set Legend opacity back to 1;
if (img && Object.keys(img).length !== 0) {
img.setAttribute(
'style',
'opacity:1; -moz-opacity:1; filter:alpha(opacity=100)',
);
}
});
}
/**
* Saves the layer opacity to sessionStorage
* @param {*} layer The layer in question
* @param {*} value The opacity value retrieved from the input
*/
saveOpacity(layer, value) {
if (this.props.download) return;
// Resolve layer id from string or layer object
let layerId = typeof layer === 'string' ? layer : null;
if (!layerId && layer && typeof layer === 'object') {
let lid = null;
if (layer.id) {
lid = layer.id;
} else if (layer.LayerId) {
lid = layer.LayerId;
} else if (layer.layer && layer.layer.id) {
lid = layer.layer.id;
}
layerId = lid;
}
if (!layerId) return;
// Update sessionStorage
let layerOpacities = JSON.parse(sessionStorage.getItem('layerOpacities'));
if (layerOpacities === null) {
layerOpacities = {};
}
layerOpacities[layerId] = value;
sessionStorage.setItem('layerOpacities', JSON.stringify(layerOpacities));
// Persist basic layer information (metadata + current opacity + visibility)
try {
let layersInfo = JSON.parse(sessionStorage.getItem('layersInfo'));
if (layersInfo === null) layersInfo = {};
if (this.layers && this.layers[layerId]) {
const l = this.layers[layerId];
layersInfo[layerId] = {
id: layerId,
title: l.title || l.DatasetTitle || l.LayerTitle || '',
DatasetId: l.DatasetId || '',
ViewService: l.ViewService || l.url || '',
type: l.type || '',
opacity: value,
visible: !!l.visible,
};
sessionStorage.setItem('layersInfo', JSON.stringify(layersInfo));
}
} catch (e) {}
// Mirror into user-specific localStorage blob for persistence across sessions
try {
const userKey = this.userID ? 'user_' + this.userID : 'user_anonymous';
const existing = localStorage.getItem(userKey);
const storeObj = existing ? JSON.parse(existing) : {};
storeObj['layerOpacities'] = JSON.stringify(layerOpacities);
if (sessionStorage.getItem('layersInfo')) {
storeObj['layersInfo'] = sessionStorage.getItem('layersInfo');
}
localStorage.setItem(userKey, JSON.stringify(storeObj));
} catch (e) {}
// Save to localStorage for user service layers
const savedServices = JSON.parse(
localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
);
if (savedServices && Array.isArray(savedServices)) {
let servicesUpdated = false;
// Update opacity for matching layer in user services
savedServices.forEach((service) => {
if (service.LayerId === layerId) {
service.opacity = value;
servicesUpdated = true;
}
});
// Only save if we made changes
if (servicesUpdated) {
localStorage.setItem(
USER_SERVICES_KEY + '_' + this.userID,
JSON.stringify(savedServices),
);
}
}
}
/**
* Loads a previously configured layer opacity from sessionStorage and applies it to the map and input element
* @param {*} layer The layer in question
* @param {*} value The opacity value retrieved from the input
*/
loadOpacity() {
let layerOpacities =
JSON.parse(sessionStorage.getItem('layerOpacities')) || {};
// Load from localStorage for user service layers
const savedUserServices = JSON.parse(
localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
);
// Import opacity values from user services if not already in session storage
if (savedUserServices && Array.isArray(savedUserServices)) {
savedUserServices.forEach((service) => {
const layerId = service.LayerId;
const opacity = service.opacity;
// If this layer's opacity isn't in session storage yet, add it
if (
layerId &&
opacity !== undefined &&
layerOpacities[layerId] === undefined
) {
layerOpacities[layerId] = opacity;
}
});
}
//save layerOpacities to sessionStorage
sessionStorage.setItem('layerOpacities', JSON.stringify(layerOpacities));
// Apply opacity values to layers and UI
for (const layerId in layerOpacities) {
if (this.layers[layerId]) {
const value = layerOpacities[layerId];
// Set opacity on the map layer
this.layers[layerId].opacity = value;
// Update UI opacity slider
const node = document.querySelector(
`.active-layer[layer-id="${layerId}"] .active-layer-opacity`,
);
if (node) {
node.dataset.opacity = value * 100;
}
}
}
}
closeOpacity() {
document.querySelector('.opacity-panel').style.display = '';
document.querySelector('.opacity-panel input').dataset.layer = '';
}
closetouchScreenPopup() {
document.querySelector('.touchScreenPopup-panel').style.display = 'none';
}
/**
* Method to show/hide layer from "Active Layers"
* @param {*} e From the click event
* @param {*} id id from elem
*/
eyeLayer(elem) {
// Check if this is a user service layer
const isUserServiceLayer = this.state.wmsUserServiceLayers.some(
(layer) => layer.LayerId === elem.id,
);
this.url = this.layers[elem.id]?.url;
const isCDSE =
!!this.url &&
['/ogc/', '/cdse/'].some((s) => this.url.toLowerCase().includes(s));
// Only call findCheckedDataset for non-service layers (this method looks for parent datasets)
if (!isUserServiceLayer) {
this.findCheckedDataset(elem);
}
if (
!this.visibleLayers[elem.id] ||
this.visibleLayers[elem.id][1] === 'eye'
) {
this.layers[elem.id].visible = false;
this.visibleLayers[elem.id] = ['fas', 'eye-slash'];
if (this.layers['lcc_filter'] && elem.id.includes('all_lcc')) {
this.map.remove(this.layers['lcc_filter']);
this.layers['lcc_filter'].visible = false;
} else if (this.layers['lc_filter'] && elem.id.includes('all_present')) {
this.map.remove(this.layers['lc_filter']);
this.layers['lc_filter'].visible = false;
} else if (this.layers['klc_filter'] && elem.id.includes('cop_klc')) {
this.map.remove(this.layers['klc_filter']);
this.layers['klc_filter'].visible = false;
} else if (
this.layers['pa_filter'] &&
elem.id.includes('protected_areas')
) {
this.map.remove(this.layers['pa_filter']);
this.layers['pa_filter'].visible = false;
}
} else {
if (this.layers['lcc_filter'] && elem.id.includes('all_lcc')) {
this.map.add(this.layers['lcc_filter']);
this.layers['lcc_filter'].visible = true;
} else if (this.layers['lc_filter'] && elem.id.includes('all_present')) {
this.map.add(this.layers['lc_filter']);
this.layers['lc_filter'].visible = true;
} else if (this.layers['klc_filter'] && elem.id.includes('cop_klc')) {
this.map.add(this.layers['klc_filter']);
this.layers['klc_filter'].visible = true;
} else if (
this.layers['pa_filter'] &&
elem.id.includes('protected_areas')
) {
this.map.add(this.layers['pa_filter']);
this.layers['pa_filter'].visible = true;
} else {
this.map.add(this.layers[elem.id]);
this.layers[elem.id].visible = true;
}
this.visibleLayers[elem.id] = ['fas', 'eye'];
}
if (
!isCDSE &&
!isUserServiceLayer &&
this.productId &&
this.productId.includes('333e4100b79045daa0ff16466ac83b7f')
) {
// global dynamic land cover
if (this.visibleLayers[elem.id][1] === 'eye-slash') {
this.map.findLayerById(elem.id).visible = false;
} else {
let layerOpacities = JSON.parse(
sessionStorage.getItem('layerOpacities'),
);
if (
layerOpacities &&
layerOpacities !== null &&
(layerOpacities[elem.id] || layerOpacities[elem.id] === 0)
) {
this.map.findLayerById(elem.id).opacity = layerOpacities[elem.id];
}
}
}
this.saveVisibility();
this.activeLayersJSON[elem.id] = this.addActiveLayer(elem, 0);
this.layersReorder();
this.saveLayerOrder();
this.checkInfoWidget();
this.toggleCustomLegendItem(this.layers[elem.id]);
this.setState({});
}
componentDidUpdate(prevProps, prevState) {
if (this.props.download) return;
if (prevProps.userServiceUrl !== this.props.userServiceUrl) {
const {
userServiceUrl,
userServiceType,
userServiceSelection,
} = this.props;
if (
userServiceUrl &&
typeof userServiceUrl === 'string' &&
userServiceUrl !== ''
) {
this.handleNewMapServiceLayer(
userServiceUrl,
userServiceType,
userServiceSelection,
);
}
}
if (
prevProps.userServiceFile !== this.props.userServiceFile &&
this.props.userServiceType === 'FILE' &&
this.props.userServiceFile
) {
this.handleUploadedShapefile(this.props.userServiceFile);
}
if (prevState.wmsUserServiceLayers !== this.state.wmsUserServiceLayers) {
this.createUserServices(this.state.wmsUserServiceLayers);
setTimeout(() => {
const checkedLayers =
JSON.parse(sessionStorage.getItem('checkedLayers')) || [];
// For each valid layer that was previously checked, make it visible
this.state.wmsUserServiceLayers.forEach((layer) => {
if (checkedLayers.includes(layer.LayerId)) {
const node = document.getElementById(layer.LayerId);
if (node) {
node.checked = true;
node.dataset.preserveCheckedLayerState = 'true';
this.toggleLayer(node);
delete node.dataset.preserveCheckedLayerState;
}
}
});
}, 0);
}
let url = new URL(window.location.href);
let product = url.searchParams.get('product');
let dataset = url.searchParams.get('dataset');
if (
this.state.wmsUserServiceLayers.length > 0 &&
prevState.wmsUserServiceLayers.length === 0
) {
// Close other tabs and open "My Services" tab
let dropdownsMapMenu = document.querySelectorAll('.map-menu-dropdown');
let i = dropdownsMapMenu.length - 1;
// let j = 0;
let dropdownId = 'dropdown_' + i;
// let myServicesId = 'component_' + i;
// let mapMenuServiceDropdownId = 'product_' + i + '_' + j;
if (!(product || dataset)) {
dropdownsMapMenu.forEach((dropdown) => {
if (dropdown.id !== dropdownId) {
dropdown
.querySelector('.ccl-expandable__button')
.setAttribute('aria-expanded', 'false');
}
});
}
document.getElementById(dropdownId).setAttribute('aria-expanded', 'true');
}
if (sessionStorage.getItem('snowAndIce') === 'true') {
//grab all checkedLayers from sessionstorage store them in checkedLayeers
let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
if (checkedLayers === null) return;
}
const latestLayer = JSON.parse(sessionStorage.getItem('TMSLayerObj'));
if (latestLayer && BaseTileLayer) {
if (this.view && this.view.ready && this.view.stationary) {
const { layer, checkboxId, dataset } = latestLayer;
this.processTMSLayer(checkboxId, layer, dataset);
}
} else if (latestLayer) {
// If we have a layer but BaseTileLayer isn't loaded yet, wait for it
this.loader().then(() => {
if (this.view && this.view.ready && this.view.stationary) {
const { layer, checkboxId, dataset } = latestLayer;
this.processTMSLayer(checkboxId, layer, dataset);
}
});
}
this.setLegendOpacity();
this.loadOpacity();
if (
prevProps.hotspotData !== this.props.hotspotData ||
!this._visibilityInitialized
) {
this.loadVisibility();
this._visibilityInitialized = true;
}
}
/**
* Saves the layer visibility (eye icon state) to sessionStorage
*/
saveVisibility() {
if (this.props.download) return;
// Get services from localStorage - it's an array of objects
const savedServices = JSON.parse(
localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
);
if (savedServices && Array.isArray(savedServices)) {
let servicesUpdated = false;
// Update visibility state for each service in the array
savedServices.forEach((service) => {
const layerId = service.LayerId;
if (layerId && this.visibleLayers[layerId]) {
// Update visibility based on eye icon state
service.visibility =
this.visibleLayers[layerId][1] === 'eye' ? true : false;
servicesUpdated = true;
}
});
// Only save if we made changes
if (servicesUpdated) {
localStorage.setItem(
USER_SERVICES_KEY + '_' + this.userID,
JSON.stringify(savedServices),
);
}
}
sessionStorage.setItem('visibleLayers', JSON.stringify(this.visibleLayers));
}
/**
* Loads the layer visibility (eye icon state) from sessionStorage
*/
loadVisibility() {
if (this.props.download) return;
let hasChanges = false;
// Load visibility settings from sessionStorage
let vl = JSON.parse(sessionStorage.getItem('visibleLayers'));
if (vl) {
this.visibleLayers = vl;
} else {
this.visibleLayers = {};
}
// Load visibility settings from saved user services in localStorage
const savedUserServices = JSON.parse(
localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
);
if (savedUserServices && Array.isArray(savedUserServices)) {
savedUserServices.forEach((service) => {
const layerId = service.LayerId;
// Check if visibility is explicitly defined (could be true, false, or undefined)
if (
layerId &&
this.visibleLayers[layerId] === undefined &&
service.visibility !== undefined
) {
// Set visible icon based on saved visibility boolean value
this.visibleLayers[layerId] =
service.visibility === true ? ['fas', 'eye'] : ['fas', 'eye-slash'];
hasChanges = true;
}
});
}
//add this.visibleLayers to session storage
sessionStorage.setItem('visibleLayers', JSON.stringify(this.visibleLayers));
for (const key in this.visibleLayers) {
if (this.layers[key]) {
// Set layer visibility based on eye/eye-slash
const shouldBeVisible = this.visibleLayers[key][1] === 'eye';
this.layers[key].visible = shouldBeVisible;
// Update the active layer UI if it exists
let elem = document.getElementById(key);
if (elem && this.activeLayersJSON[key]) {
// Get the current order of the active layer
let order = this.activeLayersJSON[key].props['layer-order'];
// Force recreate the active layer component with the correct visibility state
this.activeLayersJSON[key] = this.addActiveLayer(elem, order);
// Update related UI
this.layersReorder();
this.checkInfoWidget();
this.toggleCustomLegendItem(this.layers[key]);
hasChanges = true;
}
}
}
// Only update state once if there were changes
if (hasChanges) {
this.setState({});
}
}
/**
* Method to delete layer from "Active Layers" and uncheck dataset and products
* @param {*} e From the click event
* @param {*} id id from elem
*/
deleteCrossEvent(elem) {
elem.checked = false;
this.toggleLayer(elem);
delete this.activeLayersJSON[elem.id];
// }
this.setState({});
}
/**
* Method to remove all active layers
*/
removeAllLayers() {
let activeLayers = document.querySelectorAll('.active-layer');
activeLayers.forEach((layer) => {
let layerId = layer.getAttribute('layer-id');
let elem = document.getElementById(layerId);
this.deleteCrossEvent(elem);
if (
this.state.wmsUserServiceLayers ||
this.state.wmsUserServiceLayers.length > 0
) {
this.setState({ wmsUserServiceLayers: [] });
}
});
}
/**
* Method to save checked layers
*/
saveCheckedLayer(layer) {
if (this.props.download) return;
// Update sessionStorage as before
let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
if (checkedLayers === null) {
checkedLayers = [layer];
sessionStorage.setItem('checkedLayers', JSON.stringify(checkedLayers));
} else {
if (!checkedLayers.includes(layer)) {
checkedLayers.unshift(layer);
}
sessionStorage.setItem('checkedLayers', JSON.stringify(checkedLayers));
}
window.dispatchEvent(new Event('storage'));
// Also update localStorage for user service layers
const savedServices = JSON.parse(
localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
);
if (savedServices && Array.isArray(savedServices)) {
let servicesUpdated = false;
// Update checked state for matching layer in user services
savedServices.forEach((service) => {
if (service.LayerId === layer) {
service.checked = true;
servicesUpdated = true;
}
});
// Only save if we made changes
if (servicesUpdated) {
localStorage.setItem(
USER_SERVICES_KEY + '_' + this.userID,
JSON.stringify(savedServices),
);
}
}
}
/**
* Method to delete checked layers from sessionStorage
* @param {String} layer the layer id
*/
deleteCheckedLayer(layer) {
let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
if (checkedLayers) {
for (var i = 0; i < checkedLayers.length; i++) {
if (checkedLayers[i] === layer) {
checkedLayers.splice(i, 1);
}
}
sessionStorage.setItem('checkedLayers', JSON.stringify(checkedLayers));
window.dispatchEvent(new Event('storage'));
}
// delete layer opacity
let layerOpacities = JSON.parse(sessionStorage.getItem('layerOpacities'));
if (layerOpacities) {
if (layerOpacities[layer]) {
delete layerOpacities[layer];
sessionStorage.setItem(
'layerOpacities',
JSON.stringify(layerOpacities),
);
}
}
// delete layer visibility
let visibleLayers = JSON.parse(sessionStorage.getItem('visibleLayers'));
if (visibleLayers) {
if (visibleLayers[layer]) {
delete visibleLayers[layer];
sessionStorage.setItem('visibleLayers', JSON.stringify(visibleLayers));
}
}
// Also update localStorage for user service layers
const savedServices = JSON.parse(
localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
);
if (savedServices && Array.isArray(savedServices)) {
let servicesUpdated = false;
// Update checked state for matching layer in user services
savedServices.forEach((service) => {
if (service.LayerId === layer) {
service.checked = false;
servicesUpdated = true;
}
});
// Only save if we made changes
if (servicesUpdated) {
localStorage.setItem(
USER_SERVICES_KEY + '_' + this.userID,
JSON.stringify(savedServices),
);
}
}
}
deleteFilteredLayer(layer) {
if (
!(
layer.includes('all_lcc') ||
layer.includes('all_present') ||
layer.includes('cop_klc') ||
layer.includes('protected_areas')
)
)
return;
let filterLayer;
//let temp;
let updatedHotspotData = this.props.hotspotData;
let updatedFilteredLayers = this.props.hotspotData['filteredLayers'];
if (this.layers['lcc_filter'] && layer.includes('all_lcc')) {
this.layers['lcc_filter'].visible = false;
filterLayer = this.props.map.findLayerById('lcc_filter');
if (filterLayer !== undefined) {
filterLayer.clear();
filterLayer.destroy();
this.props.map.remove(filterLayer);
}
delete updatedFilteredLayers['lcc_filter'];
delete this.layers['lcc_filter'];
} else if (this.layers['lc_filter'] && layer.includes('all_present_lc')) {
this.layers['lc_filter'].visible = false;
filterLayer = this.props.map.findLayerById('lc_filter');
if (filterLayer !== undefined) {
filterLayer.clear();
filterLayer.destroy();
this.props.map.remove(filterLayer);
}
delete updatedFilteredLayers['lc_filter'];
delete this.layers['lc_filter'];
} else if (
this.layers['klc_filter'] !== undefined &&
layer.includes('cop_klc')
) {
this.layers['klc_filter'].visible = false;
this.layers[layer].visible = false;
filterLayer = this.props.map.findLayerById('klc_filter');
if (filterLayer !== undefined) {
// temp = filterLayer;
filterLayer.clear();
filterLayer.destroy();
this.props.map.remove(filterLayer);
}
delete updatedFilteredLayers['klc_filter'];
//delete this.layers['klc_filter'];
} else if (
this.layers['pa_filter'] !== undefined &&
layer.includes('protected_areas')
) {
this.layers['pa_filter'].visible = false;
this.layers[layer].visible = false;
filterLayer = this.props.map.findLayerById('pa_filter');
if (filterLayer !== undefined) {
// temp = filterLayer;
filterLayer.clear();
filterLayer.destroy();
this.props.map.remove(filterLayer);
}
delete updatedFilteredLayers['pa_filter'];
}
this.props.mapLayersHandler(this.layers);
updatedHotspotData['filteredLayers'] = updatedFilteredLayers;
this.props.hotspotDataHandler(updatedHotspotData);
}
/**
* Method to load previously expanded dropdowns according to sessionStorage
*/
expandDropdowns() {
if (this.props.download) return;
let expandedDropdowns = null;
const userKey = this.userID ? 'user_' + this.userID : 'user_anonymous';
const existing = localStorage.getItem(userKey);
if (existing) {
try {
const storeObj = JSON.parse(existing) || {};
const stored = storeObj ? storeObj.expandedDropdowns : null;
if (Array.isArray(stored)) {
expandedDropdowns = stored;
} else if (typeof stored === 'string') {
const parsed = JSON.parse(stored);
if (Array.isArray(parsed)) expandedDropdowns = parsed;
}
} catch (e) {}
}
if (!Array.isArray(expandedDropdowns)) {
try {
const fromSession = sessionStorage.getItem('expandedDropdowns');
if (fromSession) {
const parsed = JSON.parse(fromSession);
if (Array.isArray(parsed)) expandedDropdowns = parsed;
}
} catch (e) {}
}
if (Array.isArray(expandedDropdowns)) {
expandedDropdowns.forEach((id) => {
let dd = document.getElementById(id);
if (dd) {
dd.setAttribute('aria-expanded', 'true');
}
});
}
}
/**
* Method to load previously checked layers
*/
loadLayers() {
let layers = JSON.parse(sessionStorage.getItem('checkedLayers'));
if (layers && !this.props.download) {
for (var i = layers.length - 1; i >= 0; i--) {
let layer = layers[i];
let node = document.getElementById(layer);
const restoreLayerState = this.state.wmsUserServiceLayers.some(
(serviceLayer) => serviceLayer.LayerId === layer,
);
if (node) {
if (!node.checked) {
// dont uncheck layers already checked from URL param
// click event fires toggleLayer()
//node.dispatchEvent(event);
node.checked = true;
if (restoreLayerState) {
node.dataset.preserveCheckedLayerState = 'true';
}
this.toggleLayer(node);
if (restoreLayerState) {
delete node.dataset.preserveCheckedLayerState;
}
}
// set scroll position
let dropdown = node.closest('.map-menu-dropdown');
let productDropdown = node.closest('.map-menu-product-dropdown');
let scrollPosition = productDropdown
? productDropdown.offsetTop
: dropdown.offsetTop;
let panelsElem = document.querySelector('.panels');
if (panelsElem) {
panelsElem.scrollTop = scrollPosition;
}
}
}
}
}
/**
* Method to change between tabs
*/
toggleTab(e) {
if (!e.currentTarget.classList.contains('tab-selected')) {
var tabsel = document.querySelector('.tab-selected');
var tab = e.currentTarget;
var panelsel = document.querySelector('.panel-selected');
var panel = document.getElementById(tab.getAttribute('aria-controls'));
tabsel.className = 'tab';
tabsel.setAttribute('aria-selected', 'false');
panelsel.className = 'panel';
panelsel.setAttribute('aria-hidden', 'false');
tab.className = 'tab tab-selected';
tab.setAttribute('aria-selected', 'true');
panel.className = 'panel panel-selected';
panel.setAttribute('aria-hidden', 'true');
if (tab.id === 'active_label') {
this.layersReorder();
}
if (tab.id === 'products_label') {
document.querySelector('.search-panel').removeAttribute('style');
} else {
document
.querySelector('.search-panel')
.setAttribute('style', 'display: none;');
}
if (document.querySelector('.opacity-panel').style.display === 'block') {
this.closeOpacity();
}
this.restorePanelScroll();
}
}
renderHotspot() {
var hotspotLayers = [];
Object.keys(this.activeLayersJSON).forEach((key) => {
let layer = this.layers[key];
if (
/* layer.visible && */
key.includes('all_present_lc_a_pol') ||
key.includes('all_present_lc_b_pol') ||
key.includes('all_lcc_a_pol') ||
key.includes('all_lcc_b_pol')
) {
hotspotLayers.push(layer);
}
});
if (
hotspotLayers.length === 0 &&
document.querySelector('.hotspot-container')
) {
if (
this.props.mapViewer.activeWidget &&
this.props.mapViewer.activeWidget.container.current.classList.contains(
'hotspot-container',
)
) {
this.props.mapViewer.closeActiveWidget();
}
document.querySelector('.hotspot-container').style.display = 'none';
} else if (this.props.view && hotspotLayers.length > 0) {
document.querySelector('.hotspot-container').style.display = 'flex';
if (
sessionStorage.checkedLayers.includes('all_present_lc_a_pol') ||
sessionStorage.checkedLayers.includes('all_present_lc_b_pol')
)
document.querySelector('.presentLandCoverContainer').style.display =
'block';
else
document.querySelector('.presentLandCoverContainer').style.display =
'none';
if (
sessionStorage.checkedLayers.includes('all_lcc_a_pol') ||
sessionStorage.checkedLayers.includes('all_lcc_b_pol')
)
document.querySelector('.landCoverChangeContainer').style.display =
'block';
else {
document.querySelector('.landCoverChangeContainer').style.display =
'none';
}
document.querySelector('#applyFilterButton').disabled = true;
let klcSelect = document.querySelector('#select-klc-area');
let LcTimeSelect = document.querySelector('#select-klc-lcTime');
let LccTimeSelect = document.querySelector('#select-klc-lccTime');
klcSelect.value = 'default';
LcTimeSelect.value = 'default';
LccTimeSelect.value = 'default';
}
}
renderTimeslider(elem, layer, fromDownload, hideCalendar) {
if (this.props.view && layer) {
let elemId;
if (elem.id.includes('.')) {
elemId = elem.id.replaceAll('.', '\\.');
} else {
elemId = elem.id;
}
let activeLayer = document.querySelector('#active_' + elemId);
let time = { elem: activeLayer };
if (this.props.download) {
let dataset = document.querySelector('.map-dataset-checkbox input');
time.dataset = dataset;
}
if (activeLayer.hasAttribute('time-start')) {
time.start = parseInt(activeLayer.getAttribute('time-start'));
time.end = parseInt(activeLayer.getAttribute('time-end'));
}
let isLoggedIn = document.querySelector('.map-menu-icon-login.logged');
let byoc = null;
try {
const d =
layer?.DatasetDownloadInformation ||
layer?.datasetDownloadInformation ||
{};
byoc = d && d.items && d.items[0] ? d.items[0].byoc_collection : null;
} catch (e) {}
ReactDOM.render(
{elem.title}
{elem.parentElement.dataset.timeseries === 'true' && (
{
e.isTrusted
? this.showTimeSlider(elem)
: this.showTimeSlider(elem, true);
}}
onKeyDown={(e) => {
e.isTrusted
? this.showTimeSlider(elem)
: this.showTimeSlider(elem, true);
}}
tabIndex="0"
role="button"
data-download={fromDownload ? true : false}
>
this.toggleTab(e)}
onKeyDown={(e) => this.toggleTab(e)}
tabIndex="0"
style={this.props.download ? { width: '33.333%' } : {}}
>
Products and datasets
this.toggleTab(e)}
onKeyDown={(e) => this.toggleTab(e)}
tabIndex="0"
style={this.props.download ? { width: '33.333%' } : {}}
>
Active layers
{this.props.download && (
this.toggleTab(e)}
onKeyDown={(e) => this.toggleTab(e)}
tabIndex="0"
style={this.props.download ? { width: '33.333%' } : {}}
>
Download
)}
this.storePanelScroll()}
>
this.closeNoServiceModal()}
onOpen={() => this.showNoServiceModal()}
className="map-download-modal"
>
)}
this.openClearButton()}
onKeyDown={(e) => {
if (e.code === 'Enter') {
this.menuSearch();
}
}}
/>
Filters
{
this.clearFilters();
this.menuSearch();
}}
onKeyDown={(e) => {
if (
!e.altKey &&
e.code !== 'Tab' &&
!e.ctrlKey &&
e.code !== 'Delete' &&
!e.shiftKey &&
!e.code.startsWith('F')
) {
this.clearFilters();
this.menuSearch();
}
}}
>
Clear filters
this.closeFilters()}
onKeyDown={(e) => {
if (
!e.altKey &&
e.code !== 'Tab' &&
!e.ctrlKey &&
e.code !== 'Delete' &&
!e.shiftKey &&
!e.code.startsWith('F')
) {
this.closeFilters();
}
}}
>
Component
Product groups
Product sub-group
No data available
{this.metodprocessJSON()}
{this.props.download && this.props.view && (
)}
{this.state.noServiceModal && (
// CLMS-1588 show modal if download and dataset has no dataset to show
<>
this.closeNoServiceModal(e)}
onKeyDown={(e) => this.closeNoServiceModal(e)}
aria-label="Close"
tabIndex="0"
role="button"
>
This dataset can be downloaded, although it cannot be visualized on the map.
this.closeOpacity()}
onKeyDown={() => this.closeOpacity()}
tabIndex="0"
>
Opacity
this.setOpacity()}
/>
0 %
100 %
this.closetouchScreenPopup()}
onKeyDown={() => this.closetouchScreenPopup()}
tabIndex="0"
>
{