AnsweredAssumed Answered

Widget.destroy() is destroying too much

Question asked by gsalvador0 on Aug 21, 2017
Latest reply on Aug 21, 2017 by jgrayson-esristaff

Howdy all!

 

I have been practicing with the BasemapGallery widget. I wanted to make a button that destroys or creates the widget, so i could "hide" and "show" the widget. The BasemapGallery is pretty big, screen space wise, so I just want a way to get it out of the way when it isn't needed.  I did this by creating a <div> element, then assigning the "hide" button and the widget to it. In my code, all the button does is destroy the widget (I'll figure out how to bring it back later). However, when I click the button, both the widget and the button get destroyed. Why is my basemapGallery.destroy() command so bloodthirsty? Below is the code I have:

 

//initialization of the basemapGallery widget
var basemapDom = domConstruct.toDom("<div id='divContainer'></div>");
var basemapGallery = new BasemapGallery({
view: view,
container: basemapDom
});
//BasemapGallery hide button is being defined
watchUtils.whenDefinedOnce(basemapGallery, "viewModel", function (evt) {
//trying to create a div element and place the button and widgit inside of it

var buttonDom = domConstruct.create("button",
{ class: 'basemapGallery', type: 'button', innerHTML: 'Basemaps'},
basemapDom, "first");
on(buttonDom, 'click', function () {
basemapGallery.destroy();
});
});

view.ui.add(basemapDom, {
position: "top-right"
});

Thanks for taking a look at this

Outcomes