topic Re: Disable zoom widget on mobile device screen only in ArcGIS JavaScript Maps SDK Questions

Disable zoom widget on mobile device screen only

JaredPilbeam2 — Tue, 26 Sep 2023 14:09:36 GMT

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.

Re: Disable zoom widget on mobile device screen only

ReneRubalcava — Tue, 26 Sep 2023 14:46:47 GMT

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

Re: Disable zoom widget on mobile device screen only

JaredPilbeam2 — Tue, 26 Sep 2023 16:26:33 GMT

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" ];

Re: Disable zoom widget on mobile device screen only

ReneRubalcava — Tue, 26 Sep 2023 17:40:40 GMT

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