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