topic Deactivate visibility of a html-element after activating the basemapgallery via Expand-button in ArcGIS JavaScript Maps SDK Questions

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

KaiBehncke — Thu, 01 Aug 2024 08:55:49 GMT

Daar users,

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

<div id="viewDiv"> </div> <span id="layerToggle"> <input type="checkbox" id="kanalLyr" checked> Kanal </span>

Furthermore I use an Expand to show the BaseMapGallery:

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?

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

AnneFitz — Thu, 01 Aug 2024 15:25:07 GMT

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"; })

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

KaiBehncke — Fri, 02 Aug 2024 10:20:26 GMT

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"); });