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 blocks Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
// Breakpoints
reactiveUtils.watch(
() => view.widthBreakpoint,
(breakpoint) => {
switch (breakpoint) {
case "xsmall":
updateView(true);
break;
case "small":
case "medium":
case "large":
case "xlarge":
updateView(false);
break;
}
},
);
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 blocks Copy
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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4