Latest Contributions by DirkVandervoort

The sample for building a widget is a fine start: Custom Recenter Widget | ArcGIS API for JavaScript 4.3 All the style information is inline, which is...well, inline. Now I want to add dijits to my widget: comboboxes, buttons, stuff. Styling is pretty intense and best handled someplace other than inline. Also, the css is available via CDN from dojo and ArcGIS. When I compile the TypeScript below and drop it into my map app, the styling is, well, primitive. (Sorry, no jsbin). Any clues on how to start building more complex and styled widgets that I can add to my map apps would be greatly appreciated. TIA THE RESULT: HTML:                 var styledStuff = new StyledStuff({                     title: "This is the styled stuff",                     subtitle: "And this is the sub styled stuff"                 });                 view.ui.add(styledStuff, "top-right");‍‍‍‍‍ TYPESCRIPT: /// <amd-dependency path="esri/core/tsSupport/declareExtendsHelper" name="__extends" /> /// <amd-dependency path="esri/core/tsSupport/decorateHelper" name="__decorate" /> import {subclass, declared, property} from "esri/core/accessorSupport/decorators"; import Widget = require("esri/widgets/Widget"); import Button = require("dijit/form/Button"); import ComboBox = require("dijit/form/ComboBox"); import Memory = require("dojo/store/Memory"); import on = require("dojo/on"); import dom = require("dojo/dom"); import req = require("dojo/require"); import { renderable, jsxFactory } from "esri/widgets/support/widget"; const CSS = {     base: "styledstuff" }; interface Style {   textShadow: string; } @subclass("esri.widgets.MapTitle") class StyledStuff extends declared(Widget) {     //--------------------------------------------------------------------     //     //  Properties     //     //--------------------------------------------------------------------     //----------------------------------     //  title     //----------------------------------     @property()     @renderable()     title: string;     //----------------------------------     //  subtitle     //----------------------------------     @property()     @renderable()     subtitle: string;     //----------------------------------     //  button     //----------------------------------     @property()     @renderable()     button: Button;     //-------------------------------------------------------------------     //     //  Public methods     //     //-------------------------------------------------------------------     render() {         const title = this._getTitle();         const subtitle = this._getSubtitle();         const button = this._getButton();         const comboBox = this._getComboBox();         return (            <div                 bind={this}                 class={CSS.base}>                 <p id="title" class="title">{title}</p>                 <p id="subtitle" class="subtitle">{subtitle}</p>                 <p><span><div id="progButtonNode"></div></span></p>                 <p><span><div id="progComboBoxNode"></div></span></p>             </div>         );     }     //-------------------------------------------------------------------     //     //  Private methods     //     //-------------------------------------------------------------------     private _getTitle() {         return this.title;     }     private _getSubtitle() {         return this.subtitle;     }     private _getButton() {         var myButton = new Button({             label: "Click this button, man!",             onClick: function(){                 alert("Please and thank you, man! ");             }         }, "progButtonNode");         return myButton;     }     private _getComboBox() {             var stateStore = new Memory({         data: [             {name:"Alabama", id:"AL"},             {name:"Alaska", id:"AK"},             {name:"American Samoa", id:"AS"},             {name:"Arizona", id:"AZ"},             {name:"Arkansas", id:"AR"},             {name:"Armed Forces Europe", id:"AE"},             {name:"Armed Forces Pacific", id:"AP"},             {name:"Armed Forces the Americas", id:"AA"},             {name:"California", id:"CA"},             {name:"Colorado", id:"CO"},             {name:"Connecticut", id:"CT"},             {name:"Delaware", id:"DE"}         ]     });     var comboBox = new ComboBox({         name: "state",         value: "California",         store: stateStore,         searchAttr: "name"     }, "progComboBoxNode").startup();         return comboBox;     } } export = StyledStuff;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more

   var searchWidget = new Search({      view: view    });    var expand = new Expand({      expandIconClass: "esri-icon-search",      view: view,      content: searchWidget    });    view.ui.add(expand, "manual");‍‍‍‍‍‍‍‍‍‍ By default the Expand gets placed in the upper-left corner, flush with the content of the container. I want to place the Expand someplace else (e.g., flush with the left side of the container, 300px from the top). I assume I can do it in a style, however I cannot create a class and set the location properties of the class.  I can a handle on the element. I can inspect it in the debugger. But I cannot change the location properties of the element. Any help please. A clue. Anything... ... View more

According to the API reference ScreenPoint | API Reference | ArcGIS API for JavaScript 4.3  In my custom widget I have a method that does something with a ScreenPoint. Below are two attempt at the method:     private _onPointerDown(evt:PointerEvent) {         const xx:Number = Number(evt.x);         const yy:Number = Number(evt.y);         const screenPoint:ScreenPoint = new ScreenPoint('esri.folder.className', xx, yy); // Errors at TSC with: Supplied parameters do not match any signature of call target.                                                     // but still transpiles successfully         // do something with the screenPoint     }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     private _onPointerDown(evt:PointerEvent) {         const xx:Number = Number(evt.x);         const yy:Number = Number(evt.y);         const screenPoint:ScreenPoint = new ScreenPoint(xx, yy); // Errors at TSC with: Supplied parameters do not match any signature of call target.                                                     // but still transpiles successfully         // do something with the screenPoint     }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ Both tsx files expose this problem 'Error'message: 'Supplied parameters do not match any signature of call target.' yet both compile to JavaScript the execute correctly. In the name of a clean build, how can I remove that problem from my build? TIA ... View more

I create a simple renderer with an extrusion and assign it to a feature layer: var symbol = new PolygonSymbol3D({    symbolLayers: [new ExtrudeSymbol3DLayer({       size: 50000, // meters in height extruded    })] }); var renderer = new SimpleRenderer({    symbol: symbol,    label: "Tract by ROW Acquisition Status",    visualVariables: [{       type: "color",       field: "Acquisition_Status",       stops: [          {             value: 'Not Acquired',             color: "green", // DISPLAYS AS ***RED*** IN THE WEB SCENE             label: "Not Acquired"          },{             value: 'Acquired',             color: "red", // DISPLAYS AS ***GREEN*** IN THE WEB SCENE             label: "Acquired"          }       ]}    ] });   Then when I view the results in a scene the colors are reversed; i.e., "Acquired" is green and "Not Acquired" is red, even though the code told the renderer to have "Acquired" to be red and "Not Acquired" to be green. WUWT? ... View more