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.

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.

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.