Widget Placement in ArcGIS API for JavaScript 4

Blog Post created by GRehkemper-esristaff Employee on Dec 19, 2018

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!