diff --git a/elements/layercontrol/src/main.js b/elements/layercontrol/src/main.js index b3418c4d7..c907c1fe8 100644 --- a/elements/layercontrol/src/main.js +++ b/elements/layercontrol/src/main.js @@ -60,6 +60,7 @@ export class EOxLayerControl extends LitElement { unstyled: { type: Boolean }, styleOverride: { type: String }, toolsAsList: { type: Boolean }, + isGloballyExclusive: { type: Boolean }, }; /** @@ -144,6 +145,13 @@ export class EOxLayerControl extends LitElement { * @type {Boolean} */ this.toolsAsList = false; + + /** + * Enable global exclusivity for layers that are not restricted to a group + * + * @type {Boolean} + */ + this.isGloballyExclusive = false; } /** diff --git a/elements/layercontrol/src/methods/layer/input-click.js b/elements/layercontrol/src/methods/layer/input-click.js index bcc3e9d4c..61dc0adf6 100644 --- a/elements/layercontrol/src/methods/layer/input-click.js +++ b/elements/layercontrol/src/methods/layer/input-click.js @@ -7,6 +7,8 @@ const inputClickMethod = (evt, EOxLayerControlLayer) => { const layer = EOxLayerControlLayer.layer; // The layer instance associated with the control. + console.log(layer); + // Set the visibility of the layer based on the input's checked state. layer.setVisible(evt.target.checked); @@ -31,6 +33,43 @@ const inputClickMethod = (evt, EOxLayerControlLayer) => { }); } + //console.log(document.querySelector("eox-layercontrol").isGloballyExclusive); + + // Handle globally exclusive layers + let layerControl = document.querySelector("eox-layercontrol"); + + if ( + evt.target.checked && + layer.get("layerControlExclusive") && + layerControl.isGloballyExclusive + ) { + console.log("Globally exclusive layer"); + // *:has(> .layers > ul) { /* styles to apply to the tag */ } + + // Find all exclusive layers across all groups + const allLayers = layerControl.shadowRoot.querySelectorAll( + "eox-layercontrol-layer", + ); + + const allExclusiveLayers = Array.from(allLayers).filter((layer) => + layer.layer.get("layerControlExclusive"), + ); + + console.log("allExclusiveLayers", allExclusiveLayers); + + /*allExclusiveLayers.forEach((exclusiveLayerElement) => { + const exclusiveLayer = exclusiveLayerElement.layer; + + console.log("exclusiveLayer", exclusiveLayer); + + // Ensure we don't hide the currently checked layer + if (exclusiveLayer !== layer) { + exclusiveLayer.setVisible(false); + exclusiveLayerElement.closest("eox-layercontrol-layer").requestUpdate(); + } + });*/ + } + // Dispatch a 'changed' event to signal a change in the layer's state. EOxLayerControlLayer.dispatchEvent( new CustomEvent("changed", { bubbles: true, detail: layer }), diff --git a/elements/layercontrol/src/methods/layercontrol/first-update.js b/elements/layercontrol/src/methods/layercontrol/first-update.js index 4660a9774..3b6a2c22b 100644 --- a/elements/layercontrol/src/methods/layercontrol/first-update.js +++ b/elements/layercontrol/src/methods/layercontrol/first-update.js @@ -16,6 +16,20 @@ const firstUpdatedMethod = (EOxLayerControl) => { EOxLayerControl.map = foundElement.map; } + window.setTimeout(() => { + const radioButtons = EOxLayerControl.shadowRoot + .querySelector("eox-layercontrol-layer-list") + .querySelectorAll("input[type='radio']"); + + radioButtons.forEach((radioButton, index) => { + if (index === 0) { + radioButton.checked = true; + } else { + radioButton.checked = false; + } + }); + }, 30); + return foundElement; }; diff --git a/elements/layercontrol/stories/globally-exclusive-layers.js b/elements/layercontrol/stories/globally-exclusive-layers.js new file mode 100644 index 000000000..72f22f535 --- /dev/null +++ b/elements/layercontrol/stories/globally-exclusive-layers.js @@ -0,0 +1,81 @@ +import { html } from "lit"; +import { + /*STORIES_MAIN_MAP_LAYERS,*/ + STORIES_MAP_STYLE, + STORIES_LAYER_SENTINEL_HUB, + STORIES_LAYER_REGION, + STORIES_LAYER_S2, + STORIES_LAYER_OSM, +} from "../src/enums"; + +const STORIES_MAIN_MAP_LAYERS = [ + { + type: "Group", + properties: { + id: "group3", + title: "Wind Layers", + layerControlExpand: true, + layerControlExclusive: true, + description: "# Hello world", + }, + layers: [ + { + ...STORIES_LAYER_SENTINEL_HUB.wind, + layerControlGloballyExclusive: true, + }, + ], + }, + { + type: "Group", + properties: { + id: "group2", + title: "Data Layers", + layerControlExpand: true, + layerControlExclusive: true, + description: "# Hello world", + }, + layers: [ + //{ ...STORIES_LAYER_SENTINEL_HUB.wind, layerControlExclusive: true }, + { ...STORIES_LAYER_SENTINEL_HUB.no2, layerControlExclusive: true }, + STORIES_LAYER_REGION, + ], + }, + { + type: "Group", + properties: { + id: "group1", + title: "Background Layers", + //layerControlExclusive: true, + }, + layers: [ + { ...STORIES_LAYER_S2, layerControlExclusive: true }, + STORIES_LAYER_OSM, + ], + }, +]; + +export const GloballyExclusiveLayers = { + args: { + idProperty: "id", + titleProperty: "title", + unstyled: false, + }, + render: (args) => html` +
+ + +
+ `, +}; + +export default GloballyExclusiveLayers; diff --git a/elements/layercontrol/stories/index.js b/elements/layercontrol/stories/index.js index 3ec1d2af6..f1be5e061 100644 --- a/elements/layercontrol/stories/index.js +++ b/elements/layercontrol/stories/index.js @@ -18,3 +18,4 @@ export { default as addExternalLayerStory } from "./add-external-layer"; export { default as layerZoomStateStory } from "./layer-zoom-state"; export { default as unstyledStory } from "./unstyled"; export { default as toolsAsListStory } from "./tools-as-list"; +export { default as globallyExclusiveLayersStory } from "./globally-exclusive-layers"; diff --git a/elements/layercontrol/stories/layercontrol.stories.js b/elements/layercontrol/stories/layercontrol.stories.js index 63a07c6fb..305fafef3 100644 --- a/elements/layercontrol/stories/layercontrol.stories.js +++ b/elements/layercontrol/stories/layercontrol.stories.js @@ -13,6 +13,7 @@ import { layerZoomStateStory, toolsAsListStory, layerLegendStory, + globallyExclusiveLayersStory, } from "."; export default { @@ -110,3 +111,8 @@ export const Unstyled = unstyledStory; * Tools rendered as list instead of tabs */ export const ToolsAsList = toolsAsListStory; + +/** + * Select a single radio button out of all available ones, not just on the same level. + */ +export const GloballyExclusiveLayers = globallyExclusiveLayersStory;