Disable zoom widget on mobile device screen only

[JaredPilbeam2]

This works to remove it completely with v. 4.27.

const view = new MapView({
  container: "viewDiv",
  map: map,
  // Exclude the zoom widget from the default UI
  ui: {
    components: ["attribution"]
  }
});

The sample code doesn't mention how to disable the zoom widget on mobile device only. Is that possible? It's not so practical and takes up too much room.

[ReneRubalcava · Accepted solution]

You can watch for changes to the widthBreakpoint or heightBreakpoint of the View.

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#widthBreakpoin...

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#heightBreakpoi...

Then you can add/remove widgets as needed.

watch(
	() => view.widthBreakpoint,
	(breakpoint) => {
		switch (breakpoint) {
			case "xsmall":
			case "small":
				view.ui.remove("zoom");
				break;
			default:
				if (!view.ui.find("zoom")) {
					view.ui.add("zoom", "top-left");
				}
		}
	}
);

Here's a demo:

https://codepen.io/odoe/pen/OJrZVVW?editors=0011

[JaredPilbeam2]

Is the search widget not included? I've put "search" and "Search"  in the ui.compenents and they cause an error.

ui.components = [
  "attribution",
  "zoom",
  "search"
];

[ReneRubalcava]

Search can't be added by string, I think it's just "zoom", and "attribution"