Responsive apps using CSS

This sample watches the MapView's widthBreakpoint property and based on the view size, sets how the Legend widget displays in the view. For example, if the view is set to a very small size, i.e. xsmall, the Legend widget does not display. Rather, it shows the Expand widget.

Use dark colors for code blocksCopy
              
1
2
3
4
5
6
7
8
9
10
11
12
13
14
view.watch("widthBreakpoint", (breakpoint) => {
  switch (breakpoint) {
    case "xsmall":
      updateView(true);
      break;
    case "small":
    case "medium":
    case "large":
    case "xlarge":
      updateView(false);
      break;
    default:
  }
});

Listening for breakpoints is helpful as it removes the need for multiple @media queries.

In addition to listening to breakpoints, the sample also makes use of CSS view-size classes. If the view's width is less than small, the UI's zoom in and zoom out buttons do not display.

Use dark colors for code blocksCopy
   
1
2
3
.esri-view-width-less-than-small .esri-zoom .esri-widget--button {
  display: none;
}

To test this application, open the sample and resize the window larger and smaller. You should notice that when you get to a mobile-specific view size the Legend widget disappears and is replaced with the Expand widget. In addition, the zoom in and zoom out buttons no longer display.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.