Build a user interface (UI) with Calcite Design System. This tutorial will provide an overview of Calcite Components, which can be replicated and scaled to solve complex problems. You will:
Learn how to execute a query to access attributes from a feature service . Add a calcite-notice
to dynamically populate the number of records found in the query. Dynamically add calcite-card
's to display individual records from the query.Create a calcite-button
that links to a record's location in Map Viewer . This tutorial leverages vanilla JavaScript, but these concepts and methods of interaction are applicable across frameworks . For a tutorial that includes a map , visit Create a mapping app .
Prerequisites ArcGIS developer account
You need a free
ArcGIS developer account or an account associated with an ArcGIS Online organization to access the services used in this tutorial.
Steps Create a new pen Go to CodePen to create a new pen for your application. Construct the HTML In CodePen > HTML , add HTML to create a page with a <body>
tag. Also, add a <main>
section.
More info The <!DOCTYPE html>
tag is not required in CodePen. If you are using a different editor or running the page on a local server, be sure to add this tag to the top of your HTML page.
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< html lang = "en" >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< title > Calcite Components: Filter recent earthquakes </ title >
</ head >
< style >
</ style >
< body >
< main >
</ main >
</ body >
< script >
</ script >
</ html >
To access Calcite Design System web components, add references to Calcite Components in the <head>
element.
Expand
Use dark colors for code blocks
Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" />
< title > Calcite Components: Filter recent earthquakes </ title >
< script src = "https://js.arcgis.com/calcite-components/1.8.0/calcite.esm.js" type = "module" > </ script >
< link rel = "stylesheet" href = "https://js.arcgis.com/calcite-components/1.8.0/calcite.css" />
</ head >
Next, you will organize the contents of the application. In the main
section, add a calcite-shell
and calcite-panel
with attributes of heading
and heading-level
to contain the earthquake results.
More info The heading
and heading-level
attributes arrange page hierarchy throughout your application to support a larger audience. Since this is the first header on the page, set the heading-level
value to "1".
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
< calcite-shell >
<!-- Panel to display records -->
< calcite-panel heading = "Earthquake results" heading-level = "1" description = "Search by location to display results" >
</ calcite-panel >
</ calcite-shell >
Showcase the records You will continue building HTML content, which the user will have the ability to adjust. The content will change as the user interacts with the application.
In the calcite-panel
, add a calcite-filter
, which will be used to query the earthquakes feature service .
Expand
Use dark colors for code blocks
Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!-- Filter records -->
< calcite-filter placeholder = "Try searching Alaska" > </ calcite-filter >
Next, add two calcite-notice
elements, each accompanied with an unique id
attribute. The first will provide guidance on the app's initial state and be set as open
. The second will supply on-demand feedback to the user.
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
< html lang = "en" >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" />
< title > Calcite Components: Filter recent earthquakes </ title >
< script src = "https://js.arcgis.com/calcite-components/1.8.0/calcite.esm.js" type = "module" > </ script >
< link rel = "stylesheet" href = "https://js.arcgis.com/calcite-components/1.8.0/calcite.css" />
</ head >
< body >
< main >
< calcite-shell >
<!-- Panel to display records -->
< calcite-panel heading = "Earthquake results" heading-level = "1" description = "Search by location to display results" >
<!-- Filter records -->
< calcite-filter placeholder = "Try searching Alaska" > </ calcite-filter >
<!-- Provide details of the app's initial state -->
< calcite-notice id = "initial-note" open icon = "information" >
< div slot = "title" > Try searching a place of interest </ div >
< div slot = "message" > Results will display when text is entered. </ div >
</ div >
</ calcite-notice >
<!-- An open property will be added to display the number of filtered records -->
< calcite-notice id = "note" >
</ calcite-notice >
</ calcite-panel >
</ calcite-shell >
</ main >
</ body >
< script >
</ script >
</ html >
In the second calcite-notice
, add a div
and place it in the title
slot, which will be used later to populate the number of earthquake results using the id
attribute.
Expand
Use dark colors for code blocks
Add line. Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!-- An open property will be added to display the number of filtered records -->
< calcite-notice id = "note" >
< div id = "number-records" slot = "title" >
<!-- Content is automatically generated -->
</ div >
</ calcite-notice >
Next, add a div
with a class
attribute to hold the earthquake results. Also, place calcite-pagination
in the panel's footer
slot, and add a page-size
attribute to specify the number of items to display per page.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!-- Container with Cards -->
< div class = "card-container" >
<!-- Content is automatically generated -->
</ div >
<!-- Pagination -->
< calcite-pagination slot = "footer" page-size = "12" style = "visibility:hidden" > </ calcite-pagination >
Query the data You will add JavaScript functionality to query an earthquakes feature service via a search term entered by a user.
First, create constant variables referencing the calcite-filter
, calcite-pagination
, both calcite-notice
's, and the card-container
CSS class to reference the elements later on.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
const filterElement = document .querySelector( "calcite-filter" );
const paginationElement = document .querySelector( "calcite-pagination" );
const initialNoticeElement = document .getElementById( "initial-note" );
const noticeElement = document .getElementById( "note" );
const cardContainer = document .querySelector( ".card-container" );
Next, query the earthquakes service using the Fetch API . When successful, parse the response with Response.json()
, and the map()
method to capture the features.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
/* Fetch the earthquakes feature service */
fetch( "https://services9.arcgis.com/RHVPKKiFTONKtxq3/ArcGIS/rest/services/USGS_Seismic_Data_v1/FeatureServer/0/query?where=1%3D1&outFields=*&f=json" )
.then( ( response ) => response.json())
.then( ( {features} ) => features.map( ( {attributes} ) => attributes))
Filter the results Next, with the response parsed, you will filter and display the user-defined results.
Filter results using a named function expression , init Filter
. Set the calcite-filter
component's items
property using the constant variable defined in the step above.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
/* Fetch the earthquakes feature service */
fetch( "https://services9.arcgis.com/RHVPKKiFTONKtxq3/ArcGIS/rest/services/USGS_Seismic_Data_v1/FeatureServer/0/query?where=1%3D1&outFields=*&f=json" )
.then( ( response ) => response.json())
.then( ( {features} ) => features.map( ( {attributes} ) => attributes))
.then( ( attributes ) => initFilter(attributes));
/* Filter the results to display */
const initFilter = ( items ) => {
filterElement.items = items;
};
In init Filter
, add a listener for the calcite Filter Change
event to watch for changes to the filter's value
. Then, go back to the first page by changing pagination's start Item
and total Items
properties. Lastly, create a conditional to add cards when the filter's value
is not falsey.
More info The filter's [`filteredItems`](xref://site.self/filter/#component-api-properties-filteredItems) property contains all of the items when there is no [`value`](xref://site.self/filter/#component-api-properties-value). To create search functionality, you need to only add cards when the user has entered a query term.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
/* Filter the results to display */
const initFilter = ( items ) => {
filterElement.items = items;
document .addEventListener( "calciteFilterChange" , () => {
paginationElement.startItem = 1 ;
paginationElement.totalItems = 0 ;
// When a Filter value is present
// Create Cards, update Pagination, and number of responses
if (filterElement.value) {
// If additional pages are populated, display Pagination
if (paginationElement.totalItems > paginationElement.pageSize) {
paginationElement.style.visibility = "visible" ;
}
});
};
When there is no text present in the calcite-filter
, set the initial notice's open
property to true
.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
/* Filter the results to display */
const initFilter = ( items ) => {
filterElement.items = items;
document .addEventListener( "calciteFilterChange" , () => {
paginationElement.startItem = 1 ;
paginationElement.totalItems = 0 ;
paginationElement.style.visibility = "hidden" ;
// When a Filter value is present
// Create Cards, update Pagination, and number of responses
if (filterElement.value) {
// If additional pages are populated, display Pagination
if (paginationElement.totalItems > paginationElement.pageSize) {
paginationElement.style.visibility = "visible" ;
}
} else {
// If no text is present in the Filter, display the initial notice
initialNoticeElement.open = true ;
}
});
};
Next, within calcite Filter Change
, you will display the pagination component when the total Items
filtered earthquakes is greater than the specified page Size
value. Set the calcite-pagination
component's visibility
CSS property to "hidden"
. When there is more than one page of results, you will change the CSS property's value to "visible"
.
Expand
Use dark colors for code blocks
Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
/* Filter the results to display */
const initFilter = ( items ) => {
filterElement.items = items;
document .addEventListener( "calciteFilterChange" , () => {
paginationElement.startItem = 1 ;
paginationElement.totalItems = 0 ;
paginationElement.style.visibility = "hidden" ;
// When a Filter value is present
// Create Cards, update Pagination, and number of responses
if (filterElement.value) {
// If additional pages are populated, display Pagination
if (paginationElement.totalItems > paginationElement.pageSize) {
paginationElement.style.visibility = "visible" ;
}
} else {
// If no text is present in the Filter, display the initial notice
initialNoticeElement.open = true ;
}
});
};
Display the earthquakes To display the earthquakes you will store each result's attributes in a calcite-card
. You will also add a calcite-button
, which, when accessed, will open the earthquake location in Map Viewer .
Place the filtered earthquake(s) into calcite-card
component(s) residing in the card-container
class with a named function expression, create Card
.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
/* Create Cards and their content */
const createCard = ( item ) => {
const titleName = item.place.replace( /[;']/g , "" );
// Populate Card content
if (cardContainer.childElementCount < paginationElement.pageSize) {
const cardString =
`<calcite-card id="card- ${item.OBJECTID} ">
<span slot="title">
<b> ${item.place} </b>
</span>
<span slot="subtitle">
Occurred on: ${ new Date (item.eventTime)}
</span>
<calcite-chip
appearance="outline-fill"
scale="s"
kind="inverse"
icon="graph-time-series"
>
Magnitude: ${item.mag}
</calcite-chip>
<calcite-button
label="Open ${titleName} in map"
icon-end="launch"
slot="footer-end"
target="_blank"
width="full"
href="https://www.arcgis.com/apps/mapviewer/index.html?` +
`marker= ${item.longitude} ; ${item.latitude} ;` + // Marker (lng, lat)
`4326;` + // Coordinate system
titleName + `;` +
`https://clipart.world/wp-content/uploads/2021/07/Target-clipart-transparent.png;` + // Marker image
`Magnitude: ${item.mag} &` +
`center= ${item.longitude} ; ${item.latitude} &` +
`level=6"
>
Open in map
</calcite-button>
</calcite-card>` ;
const cardElement = document
.createRange()
.createContextualFragment(cardString);
cardContainer.appendChild(cardElement);
}
};
To create the cards, call create Card
in the calcite Filter Change
event listener for each feature that matches the filter value
. Also, clear the card Container
content, which contains previous filter results.
Expand
Use dark colors for code blocks
Add line. Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
/* Filter the results to display */
const initFilter = ( items ) => {
filterElement.items = items;
document .addEventListener( "calciteFilterChange" , () => {
paginationElement.startItem = 1 ;
paginationElement.totalItems = 0 ;
paginationElement.style.visibility = "hidden" ;
cardContainer.innerHTML = "" ;
// When a Filter value is present
// Create Cards, update Pagination, and number of responses
if (filterElement.value) {
filterElement.filteredItems.forEach( ( item ) => createCard(item));
paginationElement.totalItems = filterElement.filteredItems.length;
// If additional pages are populated, display Pagination
if (paginationElement.totalItems > paginationElement.pageSize) {
paginationElement.style.visibility = "visible" ;
}
} else {
// If no text is present in the Filter, display the initial notice
initialNoticeElement.open = true ;
}
});
};
Next, you will display the number of earthquake results for the user. Create a function, show Number Of Responses
and post the number of responses to the calcite-notice
title. To ensure content is accessible to users, remove the initial notice's open
attribute and set the results notice open
property to true
.
The inner HTML
, kind
, and icon
attributes will change depending on the number of responses. Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
/* Display the number of responses in a Notice */
function showNumberOfResponses ( responseNumber ) {
const note = document .getElementById( "note" );
const numberRecordsNote = document .getElementById( "number-records" );
// If 0 responses, add "Sorry" to the Notice text
// Add the Notice color and icon
if (responseNumber === 0 ) {
responseNumber = `Sorry, ${responseNumber} `
note.kind = "danger" ;
note.icon = "exclamation-mark-triangle" ;
} else {
note.kind = "brand" ;
note.icon = "information" ;
}
// Hide the initial notice
initialNoticeElement.removeAttribute( "open" );
// Notice text
numberRecordsNote.innerHTML = ` ${responseNumber} records found.` ;
noticeElement.open = true ;
}
Similar to creating the cards, add the show Number Of Responses
function call to the calcite Filter Change
event listener's callback function. When no text is present in the calcite-filter
, set the filtered notice's open
attribute to false
, and the calcite-pagination
's visibility to "hidden"
.
Expand
Use dark colors for code blocks
Add line. Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
/* Filter the results to display */
const initFilter = ( items ) => {
filterElement.items = items;
document .addEventListener( "calciteFilterChange" , () => {
paginationElement.startItem = 1 ;
paginationElement.totalItems = 0 ;
// Prevent display if no Filter value is present
noticeElement.open = false ;
paginationElement.style.visibility = "hidden" ;
cardContainer.innerHTML = "" ;
// When a Filter value is present
// Create Cards, update Pagination, and number of responses
if (filterElement.value) {
filterElement.filteredItems.forEach( ( item ) => createCard(item));
paginationElement.totalItems = filterElement.filteredItems.length;
showNumberOfResponses(filterElement.filteredItems.length);
// If additional pages are populated, display Pagination
if (paginationElement.totalItems > paginationElement.pageSize) {
paginationElement.style.visibility = "visible" ;
}
} else {
// If no text is present in the Filter, display the initial notice
initialNoticeElement.open = true ;
}
});
};
Add a listener for pagination's calcite Pagination Change
event so users can view subsequent filtered items when changing pages. Display a subset of the filtered Items
, starting at the pagination's start Item
property, and ending at the sum of the start Item
and page Size
properties.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
/* Update Cards when interacting with Pagination */
document .addEventListener( "calcitePaginationChange" , ( { target } ) => {
const displayItems = filterElement.filteredItems.slice(
target.startItem - 1 ,
target.startItem - 1 + target.pageSize
);
});
Lastly, you will update the cards when interacting with calcite-pagination
. Clear the card Container
contents with any previous filtered results, and call create Card
in the calcite Pagination Change
event listener.
Expand
Use dark colors for code blocks
Add line. Add line.
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
/* Update Cards when interacting with Pagination */
document .addEventListener( "calcitePaginationChange" , ( { target } ) => {
cardContainer.innerHTML = "" ;
const displayItems = filterElement.filteredItems.slice(
target.startItem - 1 ,
target.startItem - 1 + target.pageSize
);
displayItems.forEach( ( item ) => createCard(item));
});
Add styling The application's functionality is now complete. Make final design tweaks to the interface using CSS styling.
Add styling to the card-container
class using CSS grid layout , calcite-chip
's color to display the earthquake magnitude, and calcite-notice
positioning.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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