AnsweredAssumed Answered

TSC and 4x: Basemap Gallery in a Dijit Dialog?

Question asked by vandervoort on May 2, 2017
Latest reply on May 2, 2017 by vandervoort

Greetings fellow travelers!

 

I'm trying write a custom widget that puts a Basemap Gallery in a Dijit Dialog. My debugger tells me the Basemap Gallery is fully hydrated and available, yet my UI tells me otherwise: 

 

In HTML:

var basemapGalleryInADialog = new BasemapGalleryInADialog({
view:view
});
view.ui.add(basemapGalleryInADialog, "top-left");

 

The TypeScript widget class:

/// <amd-dependency path="esri/core/tsSupport/declareExtendsHelper" name="__extends" />
/// <amd-dependency path="esri/core/tsSupport/decorateHelper" name="__decorate" />

import {aliasOf, subclass, property, declared} from "esri/core/accessorSupport/decorators";
import {accessibleHandler, jsxFactory, renderable, vmEvent} from "esri/widgets/support/widget";

import Widget = require("esri/widgets/Widget");
import MapView = require("esri/views/MapView");
import SceneView = require("esri/views/SceneView");
import BasemapGallery = require("esri/widgets/BasemapGallery");

import Dialog = require("dijit/Dialog");

const CSS = {
base: "esri-home esri-widget-button esri-widget",
text: "esri-icon-font-fallback-text",
basemapIcon: "esri-icon esri-icon-basemap",
loadingIcon: "esri-icon-loading-indicator",
rotatingIcon: "esri-rotating",
disabled: "esri-disabled"
};

@subclass("esri.widgets.Widget")
class BasemapGalleryInADialog extends declared(Widget) {

//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
/**
* @constructor
* @alias module:esri/widgets/Widget
* @extends module:esri/widgets/Widget
* @param {Object} [properties] - See the [properties](#properties-summary) for a list of all the properties
* that may be passed into the constructor.
*/

constructor(params?: any) {
super();
}

//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
//----------------------------------
// view
//----------------------------------
/**
* A reference to the {@link module:esri/views/MapView} or {@link module:esri/views/SceneView}. Set this to link the widget to a specific view.
*
* @type {module:esri/views/MapView | module:esri/views/SceneView}
*
* @name view
* @instance
*/

@property()
@renderable()
view: MapView | SceneView = null;

//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
go() {
var basemapGallery = new BasemapGallery({
view: this.view
});

var myDialog = new Dialog({
title: "Basemap Gallery",
content: basemapGallery
});
myDialog.show();
}

render() {
return (
<div bind={this} class={CSS.base}role="button" tabIndex={0} onclick={this._go} onkeydown={this._go}>
<span aria-hidden="true" class={CSS.basemapIcon} title="Basemap Gallery" />
<span class={CSS.text}>Basemap Gallery</span>
</div>
);
}

//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
@accessibleHandler()
private _go() {
this.go();
}
}

export = BasemapGalleryInADialog;

I'm just messing around with the UX and I thought I'd open this pattern up for discussion, help, etc. TIA

Outcomes