Create a mapping app

Learn how to create a UI for a simple mapping application using Calcite Components and ArcGIS Maps SDK for JavaScript Map components.

You will use Calcite Components to craft a positive user experience and drive interaction in your mapping application. This tutorial focuses on the user interface and expects some knowledge of the ArcGIS Maps SDK for JavaScript. If you are new to the , they have a great tutorial that covers the mapping concepts used in this application.

Prerequisites

ArcGIS account
You need a free ArcGIS Online and/or ArcGIS Location Platform account to access the services used in this tutorial.

Steps

Create a new pen

  1. Go to CodePen to create a new pen for your mapping application.

Add HTML

  1. In CodePen > HTML, add HTML and CSS to create a page with an arcgis-map, which will display the . The CSS ensures that the map is the full width and height of the browser window.
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
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Calcite Components: Create a mapping app</title>
  </head>
  <style>
    html,
    body,
    #mapEl {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      display: flex;
    }
  </style>
  <body>
  <arcgis-map id="mapEl">
    <arcgis-zoom position="top-right"></arcgis-zoom>
  </arcgis-map>
  </body>
  <script>
  </script>
</html>
  1. In the <head> element, add references to Calcite Components, ArcGIS Maps SDK for JavaScript, and Map components.
Expand
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

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>Calcite Components: Create a mapping app</title>

  <script src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js" type="module"></script>

  <script src="https://js.arcgis.com/4.32/"></script>
  <link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
  <script type="module" src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"></script>

</head>
<style>
Expand

Get an access token

You need an with the correct privileges to access the used in this tutorial.

  1. Go to the Create an API key tutorial and create an with the following :
  • Privileges
    • Location services > Basemaps
  1. In CodePen, set esriConfig.apiKey to your access token.
1
2
3
4
5
6
<!-- The esriConfig variable must be defined before adding other Esri libraries -->
<script>
  var esriConfig = {
    apiKey: "YOUR_ACCESS_TOKEN"
  };
</script>

To learn about other ways to get an access token, go to Types of authentification.

Display a map

The is the central focus of this application. You added CSS above which makes the map the full width and height of the window. You will also add ArcGIS Maps SDK for JavaScript components that interact with the map. The components will be organized by Calcite Components to keep the user interface clean.

  1. In the <body>, you will initialize the arcgis-map component using the item-id attribute, which specifies the item ID.
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
    <arcgis-map id="mapEl" item-id="210c5b77056846808c7a5ce93920be81">
      <arcgis-zoom position="top-right"></arcgis-zoom>
    </arcgis-map>

Create the layout

To create the layout you will use calcite-shell, which organizes other components on the page using slots. Slots are a web component concept and there is a brief section in Core concepts. A list of a component's slots, if it has any, can be found on its reference page. For example, here are shell's slots.

  1. Add the calcite-shell component.

    • Set the content-behind attribute so users can interact with the behind the shell.
  2. Add the calcite-shell-panel component, placing it in shell's panel-start slot.

    • Set the displayMode attribute to "float-content" so the shell panel's content appears to hover over the .
Expand
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
  <calcite-shell content-behind>

    <calcite-shell-panel slot="panel-start" display-mode="float-content">

    </calcite-shell-panel>

    <arcgis-map id="mapEl" item-id="210c5b77056846808c7a5ce93920be81">
      <arcgis-zoom position="top-right"></arcgis-zoom>
    </arcgis-map>

  </calcite-shell>
Expand
  1. Add the calcite-navigation component and place it in the shell's header slot.

  2. Then, slot the calcite-navigation-logo component into navigation's logo slot. Supply an id to dynamically populate the heading with the title of the .

Expand
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
  <calcite-shell content-behind>

    <calcite-navigation slot="header">
      <calcite-navigation-logo id="header-title" heading-level="1" slot="logo">
        <!-- Dynamically populated -->
      </calcite-navigation-logo>
    </calcite-navigation>

    <calcite-shell-panel slot="panel-start" display-mode="float-content">

    </calcite-shell-panel>
Expand

Add action and panel components

Next, add the components used to access the ArcGIS Maps SDK for JavaScript components. The calcite-panel components will have the Map component containers. The panels will start hidden, and users can display them using the corresponding calcite-action component.

  1. Add the calcite-action-bar component and place it in shell panel's action-bar slot.
  2. Add calcite-action components, which will open the panels when clicked.
    • Set the icon attribute to the name of the map component that the action will open. View the Calcite Icons to find additional options.
    • Set the text attribute, which will display when uncollapsing the action bar.
    • Set the data-action-id global attribute, which will be used in a subsequent step to make the action interactive.
Expand
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
  <calcite-shell content-behind>

    <calcite-navigation slot="header">
      <calcite-navigation-logo id="header-title" heading-level="1" slot="logo">
        <!-- Dynamically populated -->
      </calcite-navigation-logo>
    </calcite-navigation>

    <calcite-shell-panel slot="panel-start" display-mode="float-content">

      <calcite-action-bar slot="action-bar">
        <calcite-action data-action-id="layers" icon="layers" text="Layers"></calcite-action>
        <calcite-action data-action-id="basemaps" icon="basemap" text="Basemaps"></calcite-action>
        <calcite-action data-action-id="legend" icon="legend" text="Legend"></calcite-action>
        <calcite-action data-action-id="bookmarks" icon="bookmark" text="Bookmarks"></calcite-action>
        <calcite-action data-action-id="print" icon="print" text="Print"></calcite-action>
        <calcite-action data-action-id="information" icon="information" text="Information"></calcite-action>
      </calcite-action-bar>

    </calcite-shell-panel>
Expand
  1. Below the action bar, add calcite-panel components with the containers for the ArcGIS Maps SDK for JavaScript components including arcgis-layer-list, arcgis-basemap-gallery, arcgis-legend, arcgis-bookmarks and arcgis-print.
    • Set the heading attribute for the panel's title.
    • Set the height of the panel using the height attribute.
    • Set the closed attribute, which will be removed when clicking on the corresponding action.
    • Set the data-panel-id global attribute, which will be used in a subsequent step to make the panels interactive.
Expand
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
      <!-- Map-specific panels (each one provides a div for ArcGIS Maps SDK for JavaScript widgets) -->
      <calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" closed closable>
        <arcgis-layer-list drag-enabled reference-element="mapEl" visibility-appearance="checkbox"></arcgis-layer-list>
      </calcite-panel>
      <calcite-panel heading="Basemaps" height-scale="l" data-panel-id="basemaps" closed closable>
        <arcgis-basemap-gallery reference-element="mapEl"></arcgis-basemap-gallery>
      </calcite-panel>
      <calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" closed closable>
        <arcgis-legend legend-style="classic" reference-element="mapEl"></arcgis-legend>
      </calcite-panel>
      <calcite-panel heading="Bookmarks" height-scale="l" data-panel-id="bookmarks" closed closable>
        <arcgis-bookmarks editing-enabled="false" reference-element="mapEl"></arcgis-bookmarks>
      </calcite-panel>
      <calcite-panel heading="Print" height-scale="l" data-panel-id="print" closed closable>
        <arcgis-print allowed-formats="all" allowed-layouts="all" include-default-templates="false"
          reference-element="mapEl"></arcgis-print>
      </calcite-panel>
Expand
  1. Add another calcite-panel component.
  2. Create a div, and then add img and div child elements with id global attributes. These elements will populate with the thumbnail and description.
  3. Add a calcite-label component with the layout attribute set to "inline".
  4. Add a calcite-rating component as the label's child and set the read-only attribute. This component will populate with the web map's average rating.
Expand
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
      <!-- Info panel (populates with info from the web map) -->
      <calcite-panel heading="Details" data-panel-id="information" closed closable>
        <div id="info-content">
          <img id="item-thumbnail" alt="webmap thumbnail" />
          <div id="item-description">
            <!-- Dynamically populated -->
          </div>
          <calcite-label layout="inline">
            <b>Rating:</b>
            <calcite-rating id="item-rating" read-only>
              <!-- Dynamically populated -->
            </calcite-rating>
          </calcite-label>
        </div>
      </calcite-panel>
Expand

Populate the content

You finished adding Calcite Components to your application! Now populate the navigation logo's heading and info panel with content from the .

  1. Below the existing JavaScript code in the <script> element, wait for the to finish loading with the arcgisViewReadyChange event.
  2. Once the map is loaded, use the querySelector() method to access the DOM and populate the content.
  3. Next, add padding to the left of the arcgis-map to make room for the ArcGIS Maps SDK for JavaScript components.
Expand
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
    const mapEl = document.getElementById("mapEl");

    mapEl.addEventListener("arcgisViewReadyChange", (evt) => {
      const { title, description, thumbnailUrl, avgRating } = mapEl.map.portalItem;
      document.querySelector("#header-title").heading = title;
      document.querySelector("#item-description").innerHTML = description;
      document.querySelector("#item-thumbnail").src = thumbnailUrl;
      document.querySelector("#item-rating").value = avgRating;

      mapEl.view.padding = {
        left: 49
      };
Expand

Make components interactive

The next step is to open the calcite-panel components, which contain the ArcGIS Maps SDK for JavaScript components, when clicking on the corresponding calcite-action components.

  1. Inside of the arcgisViewReadyChange event, initialize a variable to store the name of the map component that is currently open.
  2. Create a function that will execute when an action is clicked. The function will close the active panel and open the panel corresponding to the clicked action. If the user clicks on the active action, the corresponding panel will close and there will not be any open panels.
  1. Create a click event listener on the calcite-action-bar using the function above as the callback.
Expand
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

      let activeWidget;

      const handleActionBarClick = ({ target }) => {
        if (target.tagName !== "CALCITE-ACTION") {
          return;
        }

        if (activeWidget) {
          document.querySelector(`[data-action-id=${activeWidget}]`).active = false;
          document.querySelector(`[data-panel-id=${activeWidget}]`).closed = true;
        }

        const nextWidget = target.dataset.actionId;
        if (nextWidget !== activeWidget) {
          document.querySelector(`[data-action-id=${nextWidget}]`).active = true;
          document.querySelector(`[data-panel-id=${nextWidget}]`).closed = false;
          activeWidget = nextWidget;
          document.querySelector(`[data-panel-id=${nextWidget}]`).setFocus();
        } else {
          activeWidget = null;
        }
      };
      // Panel interaction
      const panelEls = document.querySelectorAll("calcite-panel");
      for (let i = 0; i < panelEls.length; i++) {
      panelEls[i].addEventListener("calcitePanelClose", () => {
        document.querySelector(`[data-action-id=${activeWidget}]`).active = false;
        document.querySelector(`[data-action-id=${activeWidget}]`).setFocus();
        activeWidget = null;
      });
      }

Expand

Dynamically resize the map

Now that the components are interactive, the map should adjust when the calcite-action-bar expands and collapses.

  1. Inside of the arcgisViewReadyChange event, add an event listener on the calciteActionBarToggle. The listener will add or remove padding to the view when expanded or collapsed respectively.
Expand
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
      document.querySelector("calcite-action-bar").addEventListener("click", handleActionBarClick);

      let actionBarExpanded = false;

      document.addEventListener("calciteActionBarToggle", event => {
        actionBarExpanded = !actionBarExpanded;
        mapEl.view.padding = {
          left: actionBarExpanded ? 135 : 49
        };
      });
Expand

Add a loader component

Now everything is interactive in your application! You can open and close the map components using Calcite Components. However, the application takes a second to load, which should be communicated to the user.

  1. In the <body> element, add a calcite-loader to display the component.
  2. Add the hidden global attribute to calcite-shell.
1
2
3
4
5
6
7
8
  <body>
    <calcite-loader></calcite-loader>

    <calcite-shell content-behind hidden>

    <h2 id="header-title" slot="header">
      <!--dynamically populated-->
    </h2>
  1. Inside of the arcgisViewReadyChange event, below the rest of the JavaScript code, hide the calcite-loader component with the hidden property set to true, and display the calcite-shell component by setting the hidden property to false.
Expand
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
      document.querySelector("calcite-shell").hidden = false;
      document.querySelector("calcite-loader").hidden = true;

    });
</script>

</html>

Add styling

  1. In the <style> element, add some additional CSS to clean up the user interface.
Expand
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
  body {
    display: flex;
  }

  calcite-loader {
    align-self: center;
    justify-self: center;
  }

  #info-content {
    padding: 0.75rem;
  }

  calcite-rating {
    margin-top: 0.25rem;
  }


</style>
Expand

Run the app

In CodePen, run your code to display the application. The will display once the application finishes loading, along with the 's title and a calcite-action-bar. Clicking on the calcite-action components will open and close the calcite-panel components, which contain the ArcGIS Maps SDK for JavaScript Map components.

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close