Deactivate visibility of a html-element after activating the basemapgallery via Expand-button

Question

Daar users, in my application I have a map-div and a "layer-selection-span":

Kanal Furthermore I use an Expand to show the BaseMapGallery: var basemapGallery = new BasemapGallery({ view: view, source: initBasemap, container: document.createElement("div") }); var bgExpand = new Expand({ view: view, expandTooltip: "Basiskarten", content: basemapGallery }); view.ui.add(bgExpand,{ position: 'bottom-left', }); I try to find a solution that the span id="layerToggle" is not visible anymore, if I open the BasemapGallery (and that it is visible, if I close the BaseMapGallery). I tried things like: bgExpand.addEventListener("click",event=>{ .... }); or:bgExpand.on("click", function(event){....}); ...but without success. Can anybody help please? How can I start a function after clicking on the Expand-Button? collision.png Bud_0-1735852674116.png

AnneFitz · Accepted Answer

Hi - you can watch the expanded property on the Expand widget to know whether it is expanded/collapsed and then update the visibility of your layerToggle. Here's an example: https://codepen.io/annefitz/pen/gONmeMR?editors=100

bgExpand.watch("expanded", () => {
   document.getElementById("layerToggle").style.display = bgExpand.expanded ? "none" : "block";
})

KaiBehncke · Accepted Answer

Thank you very much, Anne, good solution  !

Another solution for the described problem is:

reactiveUtils.watch(
    () => [bgExpand.expanded], ([bgExpand]) => {
       if (bgExpand==true) (document.getElementById("layerToggle").style.visibility="hidden");
       if (bgExpand==false)(document.getElementById("layerToggle").style.visibility="visible");
    });