Widget Placement in ArcGIS API for JavaScript 4

[GavinRehkemper]

Someone asked me recently: "how do I push the address search widget up above the zoom buttons?"

They were adding a Search widget to their application like this:

var searchWidget = new Search({
  view: view
});
view.ui.add(searchWidget, "top-left");‍‍‍‍‍‍‍‍

and they were getting a map that looks like:

I did a bit of searching, and found out that the JavaScript API has an option for this - in the second parameter of "view.ui.add()", instead of passing a string like "top-left", pass an object - and in that object you can control the "index" of where to place the component relative to other components:

view.ui.add(searchWidget, {
  position: "top-left",
  index: 0
});‍‍‍‍‍‍‍‍

So you'll get something that looks a little cleaner:

Full example is here - happy coding!

[LeoLiu1]

easy peasy, this is very helpful.