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

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#widthBreakpoint

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

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