Skip to content

Commit

Permalink
CLMS-2589 (bug): bookmarked hotspot filters load correctly now and la…
Browse files Browse the repository at this point in the history 
…yers are not destroyed in map
  • Loading branch information
@ujbolivar
ujbolivar committed May 9, 2024
1 parent 261b22e commit 66d41ba
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 73 deletions.
3 changes: 1 addition & 2 deletions src/components/MapViewer/BookmarkWidget.jsx
View file
Expand Up @@ -340,7 +340,7 @@ class BookmarkWidget extends React.Component {
);
}
}
this.map.layers.removeAll();
//this.map.layers.removeAll();
this.props.bookmarkHandler(true);
let layerOpacities = {};
for (let index = 0; index < selectLayers.length; index++) {
Expand All @@ -357,7 +357,6 @@ class BookmarkWidget extends React.Component {
'layerOpacities',
JSON.stringify(layerOpacities),
);
//this.props.mapLayersHandler(this.layers);
});
});
}
Expand Down
158 changes: 87 additions & 71 deletions src/components/MapViewer/MenuWidget.jsx
View file
Expand Up @@ -747,76 +747,90 @@ class MenuWidget extends React.Component {
this.loadVisibility();
this.handleRasterVectorLegend();
this.map.when(() => {
this.map.layers.on('change', (e) => {
if (this.props.bookmark && this.props.bookmark === false) {
return;
} else if (this.props.bookmark && this.props.bookmark === true) {
let layers = JSON.parse(sessionStorage.getItem('checkedLayers'));
for (const layer in this.layers) {
let node = document.getElementById(layer);
if (node) {
if (layers.includes(layer)) {
let visible;
if (
(this.layers['lcc_filter'] &&
node.id.includes('all_lcc') &&
this.layers['lcc_filter'].visible) ||
(this.layers['lc_filter'] &&
node.id.includes('all_present') &&
this.layers['lc_filter'].visible) ||
(this.layers['klc_filter'] &&
node.id.includes('cop_klc') &&
this.layers['klc_filter'].visible) ||
(this.layers['pa_filter'] &&
node.id.includes('protected_areas') &&
this.layers['pa_filter'].visible)
) {
visible = true;
} else {
visible = this.layers[node.id].visible;
}
node.checked = true;
this.toggleLayer(node);
if (!visible) {
this.eyeLayer(node);
//this.map.layers.on('change', (e) => {
this.props.view.watch('updating', (isUpdating) => {
if (!isUpdating) {
this.props.view.watch('stationary', (isStationary) => {
if (isStationary) {
if (this.props.bookmark && this.props.bookmark === false) {
return;
} else if (this.props.bookmark && this.props.bookmark === true) {
let layers = JSON.parse(
sessionStorage.getItem('checkedLayers'),
);
for (const layer in this.layers) {
let node = document.getElementById(layer);
if (node) {
if (layers.includes(layer)) {
let visible = false;
const layerKeys = {
lcc_filter: 'all_lcc',
lc_filter: 'all_present',
klc_filter: 'cop_klc',
pa_filter: 'protected_areas',
};

Object.keys(layerKeys).forEach((key) => {
if (
this.props.hotspotData?.filteredLayers.hasOwnProperty(
key,
) &&
node.id.includes(layerKeys[key]) &&
this.layers[key]?.visible
) {
visible = true;
} else {
visible = this.layers[node.id].visible;
}
});
node.checked = true;
this.toggleLayer(node);
if (!visible) {
this.eyeLayer(node);
}
} else if (node.checked) {
node.checked = false;
this.toggleLayer(node);
}
}
}
} else if (node.checked) {
node.checked = false;
this.toggleLayer(node);
}
}
}
let counter = layers.length - 1;
layers.forEach((layer, index) => {
let order = counter - index;
let activeLayers = document.querySelectorAll('.active-layer');
activeLayers.forEach((item) => {
if (
item.parentElement &&
layer === item.getAttribute('layer-id')
) {
item.parentElement.insertBefore(item, activeLayers[order]);
}
});
});
this.layersReorder();
this.saveLayerOrder();
let elementOpacities = document.querySelectorAll(
'.active-layer-opacity',
);
let layerOpacities = JSON.parse(
sessionStorage.getItem('layerOpacities'),
);
elementOpacities.forEach((element) => {
let parentElement = element.parentElement?.parentElement;
if (parentElement) {
let id = element.parentElement.parentElement.getAttribute(
'layer-id',
);
if (layerOpacities && layerOpacities[id]) {
element.dataset.opacity = layerOpacities[id] * 100;
} else {
element.dataset.opacity = 100;
let counter = layers.length - 1;
layers.forEach((layer, index) => {
let order = counter - index;
let activeLayers = document.querySelectorAll('.active-layer');
activeLayers.forEach((item) => {
if (
item.parentElement &&
layer === item.getAttribute('layer-id')
) {
item.parentElement.insertBefore(
item,
activeLayers[order],
);
}
});
});
this.layersReorder();
this.saveLayerOrder();
let elementOpacities = document.querySelectorAll(
'.active-layer-opacity',
);
let layerOpacities = JSON.parse(
sessionStorage.getItem('layerOpacities'),
);
elementOpacities.forEach((element) => {
let parentElement = element.parentElement?.parentElement;
if (parentElement) {
let id = element.parentElement.parentElement.getAttribute(
'layer-id',
);
if (layerOpacities && layerOpacities[id]) {
element.dataset.opacity = layerOpacities[id] * 100;
} else {
element.dataset.opacity = 100;
}
}
});
}
}
});
Expand Down Expand Up @@ -1968,8 +1982,10 @@ class MenuWidget extends React.Component {
) {
this.layers['pa_filter'].visible = true;
this.map.add(this.layers['pa_filter']);
} else {
this.map.add(this.layers[elem.id]);
} else if (this.layers['lc_filter'] !== undefined) {
this.map.add(this.layers['lc_filter']);
} else if (this.layers['lcc_filter'] !== undefined) {
this.map.add(this.layers['lcc_filter']);
}
} else {
this.layers[elem.id].visible = true; //layer id
Expand Down

0 comments on commit 66d41ba

Please sign in to comment.