nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

close pane via BasemapToggle

jaykapalczynski

I have a basemap toggle in my pane....I want to close the pane when the toggle is clicked.
I can do this with buttons no problem...but the toggle is giving me a problem

<div data-dojo-type="dijit/TitlePane" id="Tools"
 data-dojo-props="title:'Tools', closable:false, open:false">
 <div data-dojo-type="dijit/layout/ContentPane" style="width:200; ">
  <div class="toolbar"><span id="BasemapToggle" ></span></div>
                <div class="toolbar"><input type="button" class="myButton" id="button2" value="Finished" /></div>
 </div>
</div>

   on(dom.byId("BasemapToggle"), "click", function () {
         // CLOSE THE PANE WHEN Clicked  
         dijit.byId("Tools").set('open',false); //Close
   })

   var toggle = new BasemapToggle({
      map: app.map,
      basemap: "satellite",
      className: "customToggle"
    }, "BasemapToggle");
    toggle.startup();

CLOSE THE BUTTONS LIKE THIS

on(dom.byId("button2"), "click", function () {
 dijit.byId("Tools").set('open',false); //Close
})

Find more posts tagged with

Accepted answers

JeffPace1

on(toggle, 'toggle'

because your variable that is the basemaptoggle is also called "toggle'

All comments

MattDriscoll

glad you got it working!

jaykapalczynski

thank you all for your help....things starting to make sense slowly.....Cheers

jaykapalczynski

GOT IT....Thanks....for all your time...I move the "on(toggle"
After the "var Toggle"

 
var toggle = new BasemapToggle({
      map: app.map,
      basemap: "satellite",
      className: "customToggle"
 }, "BasemapToggle");
 toggle.startup();

on(toggle, 'toggle', function(){
 dijit.byId("Tools").set('open',false); //Close
});

jaykapalczynski

sorry for being a pain here, not trying to be...this is driving me nuts....I tried that as well....

If I put the "on(toggle," in my JS page the map no longer draws etc...
I remove it everything is fine...

on(toggle, 'toggle', function(){
 var paneToClose = registry.byId('Tools');
 if (paneToClose. _showing) {
  paneToClose. toggle();
 }
});


var toggle = new BasemapToggle({
      map: app.map,
      basemap: "satellite",
      className: "customToggle"
    }, "BasemapToggle");
    toggle.startup();

JeffPace1

on(toggle, 'toggle'

because your variable that is the basemaptoggle is also called "toggle'

jaykapalczynski

trying this...not working...this is all the code I have for this

Tried - throws error
on(myBasemapWidget, 'toggle', function(){

on(BasemapToggle, 'toggle', function(){

<div class="toolbar" id="BasemapToggle" </div>

on(BasemapToggle, 'toggle', function(){
  alert("test");
 var paneToClose = registry.byId('Tools');
 if (paneToClose._showing) {
  paneToClose.toggle();
 }
});


var toggle = new BasemapToggle({
      map: app.map,
      basemap: "satellite",
      className: "customToggle"
    }, "BasemapToggle");
    toggle.startup();

JeffPace1

oh sorry, then yes a combination of what matt and i said is right

on(myBasemapWidget, 'toggle', function(){
var paneToClose = registry.byId('paneID');
if (paneToClose ._showing) {
paneToClose .toggle();
}
});

jaykapalczynski

Its not a button....this is coming from ESRI example

https://developers.arcgis.com/javascript/jssamples/widget_toggle.html

<div class="toolbar" id="BasemapToggle"  </div>

var toggle = new BasemapToggle({
      map: app.map,
      basemap: "satellite",
      className: "customToggle"
    }, "BasemapToggle");
    toggle.startup();

images.jpg

MattDriscoll

You should listen to the toggle event on the widget.

https://developers.arcgis.com/javascript/jsapi/basemaptoggle-amd.html#event-toggle

on(myBasemapWidget, 'toggle', function(){
   // do some stuff
});

JeffPace1

where are you placing or calling this code....confused on that

I would put it in your button click.

jaykapalczynski

where are you placing or calling this code....confused on that

JeffPace1

I have a basemap toggle in my pane....I want to close the pane when the toggle is clicked.
I can do this with buttons no problem...but the toggle is giving me a problem

<div data-dojo-type="dijit/TitlePane" id="Tools"
 data-dojo-props="title:'Tools', closable:false, open:false">
 <div data-dojo-type="dijit/layout/ContentPane" style="width:200; ">
  <div class="toolbar"><span id="BasemapToggle" ></span></div>
                <div class="toolbar"><input type="button" class="myButton" id="button2" value="Finished" /></div>
 </div>
</div>

   on(dom.byId("BasemapToggle"), "click", function () {
         // CLOSE THE PANE WHEN Clicked  
         dijit.byId("Tools").set('open',false); //Close
   })

   var toggle = new BasemapToggle({
      map: app.map,
      basemap: "satellite",
      className: "customToggle"
    }, "BasemapToggle");
    toggle.startup();

CLOSE THE BUTTONS LIKE THIS

on(dom.byId("button2"), "click", function () {
 dijit.byId("Tools").set('open',false); //Close
})

On my expandopane I do

 var summPane = registry.byId('Tools');
if (!summPane._showing) {
    summPane.toggle();
}

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.