Create a simple widget in the ArcGIS Server JavaScript API version 4

Widgets in the ArcGIS Server version 4 JavaScript API are handy little components that are pre-written, and provide handy functionality without requiring much coding.

On a recent project I was developing an application which made extensive use of out-of-the-box widgets, but I also needed to create my own custom functionality. I wanted my custom buttons and tools to look like the other widgets for consistency, but the instructions for creating a "proper" widget are intimidatingly complex, so I was looking for a simpler way to accomplish this.

It turns out to be quite a simple matter to insert a custom button into the DOM, and style it to match the other widgets:

screenshot

In this example the button is appended to the esri-ui-top-left section, which adds it below the existing zoom widget.

See the interactive demo at https://codepen.io/slead/pen/zyjOpm

Back to articles

CONTACT