Create a mapping app

Learn how to create a UI for a simple mapping application using Calcite Components and ArcGIS API for JavaScript.

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 API for JavaScript. If you are new to the ArcGIS JavaScript API, they have a great tutorial that covers the mapping concepts used in this application.

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

  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 a viewDiv element which will display the map. The CSS ensures that the map is the full width and height of the browser window.

    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.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
    <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,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
      </style>
      <body>
        <div id="viewDiv"></div>
      </body>
      <script>
      </script>
    </html>
  2. In the <head> element, add references to Calcite Components and ArcGIS JavaScript API.

    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
    <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>
    
        <script src="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.esm.js" type="module"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.css" />
    
        <script src="https://js.arcgis.com/4.23/"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    
      </head>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        body {
          display: flex;
        #header-title {
          margin-left: 1rem;
          margin-right: 1rem;
        #info-content {
          padding: 0.75rem;
          margin-top: 0.25rem;
      </style>
      <body>
    
        <calcite-shell content-behind>
    
          <h2 id="header-title" slot="header">
            <!-- Dynamically populated -->
          </h2>
    
          <calcite-shell-panel slot="primary-panel" detached>
    
            <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>
    
            <!-- Map-specific panels (each one provides a div for ArcGIS JavaScript API widgets) -->
            <calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" hidden>
              <div id="layers-container"></div>
            </calcite-panel>
            <calcite-panel heading="Basemaps" height-scale="l" data-panel-id="basemaps" hidden>
              <div id="basemaps-container"></div>
            </calcite-panel>
            <calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" hidden>
              <div id="legend-container"></div>
            </calcite-panel>
            <calcite-panel heading="Bookmarks" height-scale="l" data-panel-id="bookmarks" hidden>
              <div id="bookmarks-container"></div>
            </calcite-panel>
            <calcite-panel heading="Print" height-scale="l" data-panel-id="print" hidden>
              <div id="print-container"></div>
            </calcite-panel>
    
            <!-- Info panel (populates with info from the web map) -->
            <calcite-panel heading="Details" data-panel-id="information" hidden>
              <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>
    
          </calcite-shell-panel>
    
          <div id="viewDiv"></div>
    
        </calcite-shell>
    
      </body>
      <script>
        require([
          "esri/WebMap",
          "esri/views/MapView",
          "esri/widgets/Bookmarks",
          "esri/widgets/BasemapGallery",
          "esri/widgets/LayerList",
          "esri/widgets/Legend",
          "esri/widgets/Print"
        ], function(WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print) {
          const webmapId = new URLSearchParams(window.location.search).get("webmap")
            ?? "cc3bd744b9a44feaa493dd867a1d48dd";
          const map = new WebMap({
            portalItem: {
              id: webmapId
          const view = new MapView({
            container: "viewDiv",
            padding: {
              left: 49
          view.ui.move("zoom", "bottom-right");
          const basemaps = new BasemapGallery({
            container: "basemaps-container"
          const bookmarks = new Bookmarks({
            container: "bookmarks-container"
          const layerList = new LayerList({
            selectionEnabled: true,
            container: "layers-container"
          const legend = new Legend({
            container: "legend-container"
          const print = new Print({
            container: "print-container"
          map.when(() => {
            const { title, description, thumbnailUrl, avgRating } = map.portalItem;
            document.querySelector("#header-title").textContent = title;
            document.querySelector("#item-description").innerHTML = description;
            document.querySelector("#item-thumbnail").src = thumbnailUrl;
            document.querySelector("#item-rating").value = avgRating;
            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}]`).hidden = true;
              const nextWidget = target.dataset.actionId;
              if (nextWidget !== activeWidget) {
                document.querySelector(`[data-action-id=${nextWidget}]`).active = true;
                document.querySelector(`[data-panel-id=${nextWidget}]`).hidden = false;
              } else {
                activeWidget = null;
            document.querySelector("calcite-action-bar").addEventListener("click", handleActionBarClick);
            let actionBarExpanded = false;
            document.addEventListener("calciteActionBarToggle", event => {
                left: actionBarExpanded ? 135 : 45
      </script>
    </html>

Import modules

  1. In the <script> element, import the ArcGIS JavaScript API modules that you will use in this application.

    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
    <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>
    
        <script src="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.esm.js" type="module"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.css" />
    
        <script src="https://js.arcgis.com/4.23/"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    
      </head>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        body {
          display: flex;
        #header-title {
          margin-left: 1rem;
          margin-right: 1rem;
        #info-content {
          padding: 0.75rem;
          margin-top: 0.25rem;
      </style>
      <body>
    
        <calcite-shell content-behind>
    
          <h2 id="header-title" slot="header">
            <!-- Dynamically populated -->
          </h2>
    
          <calcite-shell-panel slot="primary-panel" detached>
    
            <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>
    
            <!-- Map-specific panels (each one provides a div for ArcGIS JavaScript API widgets) -->
            <calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" hidden>
              <div id="layers-container"></div>
            </calcite-panel>
            <calcite-panel heading="Basemaps" height-scale="l" data-panel-id="basemaps" hidden>
              <div id="basemaps-container"></div>
            </calcite-panel>
            <calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" hidden>
              <div id="legend-container"></div>
            </calcite-panel>
            <calcite-panel heading="Bookmarks" height-scale="l" data-panel-id="bookmarks" hidden>
              <div id="bookmarks-container"></div>
            </calcite-panel>
            <calcite-panel heading="Print" height-scale="l" data-panel-id="print" hidden>
              <div id="print-container"></div>
            </calcite-panel>
    
            <!-- Info panel (populates with info from the web map) -->
            <calcite-panel heading="Details" data-panel-id="information" hidden>
              <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>
    
          </calcite-shell-panel>
    
          <div id="viewDiv"></div>
    
        </calcite-shell>
    
      </body>
      <script>
        require([
          "esri/WebMap",
          "esri/views/MapView",
          "esri/widgets/Bookmarks",
          "esri/widgets/BasemapGallery",
          "esri/widgets/LayerList",
          "esri/widgets/Legend",
          "esri/widgets/Print"
        ], function(WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print) {
          const webmapId = new URLSearchParams(window.location.search).get("webmap")
            ?? "cc3bd744b9a44feaa493dd867a1d48dd";
          const map = new WebMap({
            portalItem: {
              id: webmapId
          const view = new MapView({
            container: "viewDiv",
            padding: {
              left: 49
          view.ui.move("zoom", "bottom-right");
          const basemaps = new BasemapGallery({
            container: "basemaps-container"
          const bookmarks = new Bookmarks({
            container: "bookmarks-container"
          const layerList = new LayerList({
            selectionEnabled: true,
            container: "layers-container"
          const legend = new Legend({
            container: "legend-container"
          const print = new Print({
            container: "print-container"
          map.when(() => {
            const { title, description, thumbnailUrl, avgRating } = map.portalItem;
            document.querySelector("#header-title").textContent = title;
            document.querySelector("#item-description").innerHTML = description;
            document.querySelector("#item-thumbnail").src = thumbnailUrl;
            document.querySelector("#item-rating").value = avgRating;
            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}]`).hidden = true;
              const nextWidget = target.dataset.actionId;
              if (nextWidget !== activeWidget) {
                document.querySelector(`[data-action-id=${nextWidget}]`).active = true;
                document.querySelector(`[data-panel-id=${nextWidget}]`).hidden = false;
              } else {
                activeWidget = null;
            document.querySelector("calcite-action-bar").addEventListener("click", handleActionBarClick);
            let actionBarExpanded = false;
            document.addEventListener("calciteActionBarToggle", event => {
                left: actionBarExpanded ? 135 : 45
      </script>
    </html>

Use an API key

An API key is required to access ArcGIS services if you are using a developer account. You can skip this step if you have an account associated with an ArcGIS Online organization.

  1. Go to your developer dashboard to get an API key.
  2. Back in CodePen > <script>, import the esriConfig class.
  3. Set the apiKey property.
    Use dark colors for code blocks
        
    Change lineAdd line.Change lineAdd line.
    1
    2
    3
    4
      "esri/widgets/Print",
      "esri/config"
    ], function (WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print, esriConfig ) {
    esriConfig.apiKey = "YOUR_API_KEY";

Display a map

The map 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 JavaScript API widgets that interact with the map. The widgets will be organized by Calcite Components to keep the user interface clean.

  1. Initialize a WebMap using the id provided via the webmap URL search parameter. If a web map id is not provided, it will use the fallback id specified in the code.

    Use dark colors for code blocks
                                                                                                                                                                                                          
    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
    <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>
    
        <script src="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.esm.js" type="module"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.css" />
    
        <script src="https://js.arcgis.com/4.23/"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    
      </head>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        body {
          display: flex;
        #header-title {
          margin-left: 1rem;
          margin-right: 1rem;
        #info-content {
          padding: 0.75rem;
          margin-top: 0.25rem;
      </style>
      <body>
    
        <calcite-shell content-behind>
    
          <h2 id="header-title" slot="header">
            <!-- Dynamically populated -->
          </h2>
    
          <calcite-shell-panel slot="primary-panel" detached>
    
            <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>
    
            <!-- Map-specific panels (each one provides a div for ArcGIS JavaScript API widgets) -->
            <calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" hidden>
              <div id="layers-container"></div>
            </calcite-panel>
            <calcite-panel heading="Basemaps" height-scale="l" data-panel-id="basemaps" hidden>
              <div id="basemaps-container"></div>
            </calcite-panel>
            <calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" hidden>
              <div id="legend-container"></div>
            </calcite-panel>
            <calcite-panel heading="Bookmarks" height-scale="l" data-panel-id="bookmarks" hidden>
              <div id="bookmarks-container"></div>
            </calcite-panel>
            <calcite-panel heading="Print" height-scale="l" data-panel-id="print" hidden>
              <div id="print-container"></div>
            </calcite-panel>
    
            <!-- Info panel (populates with info from the web map) -->
            <calcite-panel heading="Details" data-panel-id="information" hidden>
              <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>
    
          </calcite-shell-panel>
    
          <div id="viewDiv"></div>
    
        </calcite-shell>
    
      </body>
      <script>
        require([
          "esri/WebMap",
          "esri/views/MapView",
          "esri/widgets/Bookmarks",
          "esri/widgets/BasemapGallery",
          "esri/widgets/LayerList",
          "esri/widgets/Legend",
          "esri/widgets/Print"
        ], function(WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print) {
          const webmapId = new URLSearchParams(window.location.search).get("webmap")
            ?? "cc3bd744b9a44feaa493dd867a1d48dd";
    
          const map = new WebMap({
            portalItem: {
              id: webmapId
            }
          });
          const view = new MapView({
            container: "viewDiv",
            padding: {
              left: 49
          view.ui.move("zoom", "bottom-right");
          const basemaps = new BasemapGallery({
            container: "basemaps-container"
          const bookmarks = new Bookmarks({
            container: "bookmarks-container"
          const layerList = new LayerList({
            selectionEnabled: true,
            container: "layers-container"
          const legend = new Legend({
            container: "legend-container"
          const print = new Print({
            container: "print-container"
          map.when(() => {
            const { title, description, thumbnailUrl, avgRating } = map.portalItem;
            document.querySelector("#header-title").textContent = title;
            document.querySelector("#item-description").innerHTML = description;
            document.querySelector("#item-thumbnail").src = thumbnailUrl;
            document.querySelector("#item-rating").value = avgRating;
            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}]`).hidden = true;
              const nextWidget = target.dataset.actionId;
              if (nextWidget !== activeWidget) {
                document.querySelector(`[data-action-id=${nextWidget}]`).active = true;
                document.querySelector(`[data-panel-id=${nextWidget}]`).hidden = false;
              } else {
                activeWidget = null;
            document.querySelector("calcite-action-bar").addEventListener("click", handleActionBarClick);
            let actionBarExpanded = false;
            document.addEventListener("calciteActionBarToggle", event => {
                left: actionBarExpanded ? 135 : 45
      </script>
    </html>
  2. Initialize the MapView, and add padding to the left of the view to make room for the Calcite Components you will add later.

  3. Next, initialize the ArcGIS JavaScript API widgets, placing them in containers which you will create in a subsequent step.

    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.
    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
    <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>
    
        <script src="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.esm.js" type="module"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.css" />
    
        <script src="https://js.arcgis.com/4.23/"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    
      </head>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        body {
          display: flex;
        #header-title {
          margin-left: 1rem;
          margin-right: 1rem;
        #info-content {
          padding: 0.75rem;
          margin-top: 0.25rem;
      </style>
      <body>
    
        <calcite-shell content-behind>
    
          <h2 id="header-title" slot="header">
            <!-- Dynamically populated -->
          </h2>
    
          <calcite-shell-panel slot="primary-panel" detached>
    
            <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>
    
            <!-- Map-specific panels (each one provides a div for ArcGIS JavaScript API widgets) -->
            <calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" hidden>
              <div id="layers-container"></div>
            </calcite-panel>
            <calcite-panel heading="Basemaps" height-scale="l" data-panel-id="basemaps" hidden>
              <div id="basemaps-container"></div>
            </calcite-panel>
            <calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" hidden>
              <div id="legend-container"></div>
            </calcite-panel>
            <calcite-panel heading="Bookmarks" height-scale="l" data-panel-id="bookmarks" hidden>
              <div id="bookmarks-container"></div>
            </calcite-panel>
            <calcite-panel heading="Print" height-scale="l" data-panel-id="print" hidden>
              <div id="print-container"></div>
            </calcite-panel>
    
            <!-- Info panel (populates with info from the web map) -->
            <calcite-panel heading="Details" data-panel-id="information" hidden>
              <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>
    
          </calcite-shell-panel>
    
          <div id="viewDiv"></div>
    
        </calcite-shell>
    
      </body>
      <script>
        require([
          "esri/WebMap",
          "esri/views/MapView",
          "esri/widgets/Bookmarks",
          "esri/widgets/BasemapGallery",
          "esri/widgets/LayerList",
          "esri/widgets/Legend",
          "esri/widgets/Print"
        ], function(WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print) {
          const webmapId = new URLSearchParams(window.location.search).get("webmap")
            ?? "cc3bd744b9a44feaa493dd867a1d48dd";
          const map = new WebMap({
            portalItem: {
              id: webmapId
          const view = new MapView({
            map,
            container: "viewDiv",
            padding: {
              left: 49
            }
          });
    
          view.ui.move("zoom", "bottom-right");
          const basemaps = new BasemapGallery({
            view,
            container: "basemaps-container"
          });
          const bookmarks = new Bookmarks({
            view,
            container: "bookmarks-container"
          });
          const layerList = new LayerList({
            view,
            selectionEnabled: true,
            container: "layers-container"
          });
          const legend = new Legend({
            view,
            container: "legend-container"
          });
          const print = new Print({
            view,
            container: "print-container"
          });
          map.when(() => {
            const { title, description, thumbnailUrl, avgRating } = map.portalItem;
            document.querySelector("#header-title").textContent = title;
            document.querySelector("#item-description").innerHTML = description;
            document.querySelector("#item-thumbnail").src = thumbnailUrl;
            document.querySelector("#item-rating").value = avgRating;
            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}]`).hidden = true;
              const nextWidget = target.dataset.actionId;
              if (nextWidget !== activeWidget) {
                document.querySelector(`[data-action-id=${nextWidget}]`).active = true;
                document.querySelector(`[data-panel-id=${nextWidget}]`).hidden = false;
              } else {
                activeWidget = null;
            document.querySelector("calcite-action-bar").addEventListener("click", handleActionBarClick);
            let actionBarExpanded = false;
            document.addEventListener("calciteActionBarToggle", event => {
                left: actionBarExpanded ? 135 : 45
      </script>
    </html>

At this point the application will display a map. However, the widgets you initialized will not appear because they are placed in HTML containers that have not been created yet.

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 explanation in the FAQ. 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 map behind the shell.
  2. Add the calcite-shell-panel component, placing it in shell's primary-panel slot.

    • Set the detached attribute so the shell panel's content appears to hover over the map.
    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
    <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>
    
        <script src="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.esm.js" type="module"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.css" />
    
        <script src="https://js.arcgis.com/4.23/"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    
      </head>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        body {
          display: flex;
        #header-title {
          margin-left: 1rem;
          margin-right: 1rem;
        #info-content {
          padding: 0.75rem;
          margin-top: 0.25rem;
      </style>
      <body>
    
        <calcite-shell content-behind>
    
          <h2 id="header-title" slot="header">
            <!-- Dynamically populated -->
          </h2>
    
          <calcite-shell-panel slot="primary-panel" detached>
    
            <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>
    
            <!-- Map-specific panels (each one provides a div for ArcGIS JavaScript API widgets) -->
            <calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" hidden>
              <div id="layers-container"></div>
            </calcite-panel>
            <calcite-panel heading="Basemaps" height-scale="l" data-panel-id="basemaps" hidden>
              <div id="basemaps-container"></div>
            </calcite-panel>
            <calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" hidden>
              <div id="legend-container"></div>
            </calcite-panel>
            <calcite-panel heading="Bookmarks" height-scale="l" data-panel-id="bookmarks" hidden>
              <div id="bookmarks-container"></div>
            </calcite-panel>
            <calcite-panel heading="Print" height-scale="l" data-panel-id="print" hidden>
              <div id="print-container"></div>
            </calcite-panel>
    
            <!-- Info panel (populates with info from the web map) -->
            <calcite-panel heading="Details" data-panel-id="information" hidden>
              <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>
    
          </calcite-shell-panel>
    
          <div id="viewDiv"></div>
    
        </calcite-shell>
    
      </body>
      <script>
        require([
          "esri/WebMap",
          "esri/views/MapView",
          "esri/widgets/Bookmarks",
          "esri/widgets/BasemapGallery",
          "esri/widgets/LayerList",
          "esri/widgets/Legend",
          "esri/widgets/Print"
        ], function(WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print) {
          const webmapId = new URLSearchParams(window.location.search).get("webmap")
            ?? "cc3bd744b9a44feaa493dd867a1d48dd";
          const map = new WebMap({
            portalItem: {
              id: webmapId
          const view = new MapView({
            container: "viewDiv",
            padding: {
              left: 49
          view.ui.move("zoom", "bottom-right");
          const basemaps = new BasemapGallery({
            container: "basemaps-container"
          const bookmarks = new Bookmarks({
            container: "bookmarks-container"
          const layerList = new LayerList({
            selectionEnabled: true,
            container: "layers-container"
          const legend = new Legend({
            container: "legend-container"
          const print = new Print({
            container: "print-container"
          map.when(() => {
            const { title, description, thumbnailUrl, avgRating } = map.portalItem;
            document.querySelector("#header-title").textContent = title;
            document.querySelector("#item-description").innerHTML = description;
            document.querySelector("#item-thumbnail").src = thumbnailUrl;
            document.querySelector("#item-rating").value = avgRating;
            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}]`).hidden = true;
              const nextWidget = target.dataset.actionId;
              if (nextWidget !== activeWidget) {
                document.querySelector(`[data-action-id=${nextWidget}]`).active = true;
                document.querySelector(`[data-panel-id=${nextWidget}]`).hidden = false;
              } else {
                activeWidget = null;
            document.querySelector("calcite-action-bar").addEventListener("click", handleActionBarClick);
            let actionBarExpanded = false;
            document.addEventListener("calciteActionBarToggle", event => {
                left: actionBarExpanded ? 135 : 45
      </script>
    </html>
  3. Add an h2 element and place it in shell's header slot. The header will be dynamically populated with the title of the web map.

    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
    <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>
    
        <script src="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.esm.js" type="module"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.css" />
    
        <script src="https://js.arcgis.com/4.23/"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    
      </head>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        body {
          display: flex;
        #header-title {
          margin-left: 1rem;
          margin-right: 1rem;
        #info-content {
          padding: 0.75rem;
          margin-top: 0.25rem;
      </style>
      <body>
    
        <calcite-shell content-behind>
    
          <h2 id="header-title" slot="header">
            <!-- Dynamically populated -->
          </h2>
    
          <calcite-shell-panel slot="primary-panel" detached>
    
            <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>
    
            <!-- Map-specific panels (each one provides a div for ArcGIS JavaScript API widgets) -->
            <calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" hidden>
              <div id="layers-container"></div>
            </calcite-panel>
            <calcite-panel heading="Basemaps" height-scale="l" data-panel-id="basemaps" hidden>
              <div id="basemaps-container"></div>
            </calcite-panel>
            <calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" hidden>
              <div id="legend-container"></div>
            </calcite-panel>
            <calcite-panel heading="Bookmarks" height-scale="l" data-panel-id="bookmarks" hidden>
              <div id="bookmarks-container"></div>
            </calcite-panel>
            <calcite-panel heading="Print" height-scale="l" data-panel-id="print" hidden>
              <div id="print-container"></div>
            </calcite-panel>
    
            <!-- Info panel (populates with info from the web map) -->
            <calcite-panel heading="Details" data-panel-id="information" hidden>
              <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>
    
          </calcite-shell-panel>
    
          <div id="viewDiv"></div>
    
        </calcite-shell>
    
      </body>
      <script>
        require([
          "esri/WebMap",
          "esri/views/MapView",
          "esri/widgets/Bookmarks",
          "esri/widgets/BasemapGallery",
          "esri/widgets/LayerList",
          "esri/widgets/Legend",
          "esri/widgets/Print"
        ], function(WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print) {
          const webmapId = new URLSearchParams(window.location.search).get("webmap")
            ?? "cc3bd744b9a44feaa493dd867a1d48dd";
          const map = new WebMap({
            portalItem: {
              id: webmapId
          const view = new MapView({
            container: "viewDiv",
            padding: {
              left: 49
          view.ui.move("zoom", "bottom-right");
          const basemaps = new BasemapGallery({
            container: "basemaps-container"
          const bookmarks = new Bookmarks({
            container: "bookmarks-container"
          const layerList = new LayerList({
            selectionEnabled: true,
            container: "layers-container"
          const legend = new Legend({
            container: "legend-container"
          const print = new Print({
            container: "print-container"
          map.when(() => {
            const { title, description, thumbnailUrl, avgRating } = map.portalItem;
            document.querySelector("#header-title").textContent = title;
            document.querySelector("#item-description").innerHTML = description;
            document.querySelector("#item-thumbnail").src = thumbnailUrl;
            document.querySelector("#item-rating").value = avgRating;
            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}]`).hidden = true;
              const nextWidget = target.dataset.actionId;
              if (nextWidget !== activeWidget) {
                document.querySelector(`[data-action-id=${nextWidget}]`).active = true;
                document.querySelector(`[data-panel-id=${nextWidget}]`).hidden = false;
              } else {
                activeWidget = null;
            document.querySelector("calcite-action-bar").addEventListener("click", handleActionBarClick);
            let actionBarExpanded = false;
            document.addEventListener("calciteActionBarToggle", event => {
                left: actionBarExpanded ? 135 : 45
      </script>
    </html>

Add action and panel components

Next, add the components used to access the widgets. The calcite-panel components will have the widgets' 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 widget 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.
    Use dark colors for code blocks
                                                                                                                                                                                                          
    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
    <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>
    
        <script src="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.esm.js" type="module"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.css" />
    
        <script src="https://js.arcgis.com/4.23/"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    
      </head>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        body {
          display: flex;
        #header-title {
          margin-left: 1rem;
          margin-right: 1rem;
        #info-content {
          padding: 0.75rem;
          margin-top: 0.25rem;
      </style>
      <body>
    
        <calcite-shell content-behind>
    
          <h2 id="header-title" slot="header">
            <!-- Dynamically populated -->
          </h2>
    
          <calcite-shell-panel slot="primary-panel" detached>
    
            <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>
    
            <!-- Map-specific panels (each one provides a div for ArcGIS JavaScript API widgets) -->
            <calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" hidden>
              <div id="layers-container"></div>
            </calcite-panel>
            <calcite-panel heading="Basemaps" height-scale="l" data-panel-id="basemaps" hidden>
              <div id="basemaps-container"></div>
            </calcite-panel>
            <calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" hidden>
              <div id="legend-container"></div>
            </calcite-panel>
            <calcite-panel heading="Bookmarks" height-scale="l" data-panel-id="bookmarks" hidden>
              <div id="bookmarks-container"></div>
            </calcite-panel>
            <calcite-panel heading="Print" height-scale="l" data-panel-id="print" hidden>
              <div id="print-container"></div>
            </calcite-panel>
    
            <!-- Info panel (populates with info from the web map) -->
            <calcite-panel heading="Details" data-panel-id="information" hidden>
              <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>
    
          </calcite-shell-panel>
    
          <div id="viewDiv"></div>
    
        </calcite-shell>
    
      </body>
      <script>
        require([
          "esri/WebMap",
          "esri/views/MapView",
          "esri/widgets/Bookmarks",
          "esri/widgets/BasemapGallery",
          "esri/widgets/LayerList",
          "esri/widgets/Legend",
          "esri/widgets/Print"
        ], function(WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print) {
          const webmapId = new URLSearchParams(window.location.search).get("webmap")
            ?? "cc3bd744b9a44feaa493dd867a1d48dd";
          const map = new WebMap({
            portalItem: {
              id: webmapId
          const view = new MapView({
            container: "viewDiv",
            padding: {
              left: 49
          view.ui.move("zoom", "bottom-right");
          const basemaps = new BasemapGallery({
            container: "basemaps-container"
          const bookmarks = new Bookmarks({
            container: "bookmarks-container"
          const layerList = new LayerList({
            selectionEnabled: true,
            container: "layers-container"
          const legend = new Legend({
            container: "legend-container"
          const print = new Print({
            container: "print-container"
          map.when(() => {
            const { title, description, thumbnailUrl, avgRating } = map.portalItem;
            document.querySelector("#header-title").textContent = title;
            document.querySelector("#item-description").innerHTML = description;
            document.querySelector("#item-thumbnail").src = thumbnailUrl;
            document.querySelector("#item-rating").value = avgRating;
            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}]`).hidden = true;
              const nextWidget = target.dataset.actionId;
              if (nextWidget !== activeWidget) {
                document.querySelector(`[data-action-id=${nextWidget}]`).active = true;
                document.querySelector(`[data-panel-id=${nextWidget}]`).hidden = false;
              } else {
                activeWidget = null;
            document.querySelector("calcite-action-bar").addEventListener("click", handleActionBarClick);
            let actionBarExpanded = false;
            document.addEventListener("calciteActionBarToggle", event => {
                left: actionBarExpanded ? 135 : 45
      </script>
    </html>
  3. Below the action bar, add calcite-panel components with the containers for the widgets you initialized in JavaScript.

    • Set the heading attribute for the panel's title.
    • Set the height of the panel using the height-scale attribute.
    • Set the hidden global 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.
    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.
    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
    <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>
    
        <script src="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.esm.js" type="module"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.css" />
    
        <script src="https://js.arcgis.com/4.23/"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    
      </head>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        body {
          display: flex;
        #header-title {
          margin-left: 1rem;
          margin-right: 1rem;
        #info-content {
          padding: 0.75rem;
          margin-top: 0.25rem;
      </style>
      <body>
    
        <calcite-shell content-behind>
    
          <h2 id="header-title" slot="header">
            <!-- Dynamically populated -->
          </h2>
    
          <calcite-shell-panel slot="primary-panel" detached>
    
            <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>
    
            <!-- Map-specific panels (each one provides a div for ArcGIS JavaScript API widgets) -->
            <calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" hidden>
              <div id="layers-container"></div>
            </calcite-panel>
            <calcite-panel heading="Basemaps" height-scale="l" data-panel-id="basemaps" hidden>
              <div id="basemaps-container"></div>
            </calcite-panel>
            <calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" hidden>
              <div id="legend-container"></div>
            </calcite-panel>
            <calcite-panel heading="Bookmarks" height-scale="l" data-panel-id="bookmarks" hidden>
              <div id="bookmarks-container"></div>
            </calcite-panel>
            <calcite-panel heading="Print" height-scale="l" data-panel-id="print" hidden>
              <div id="print-container"></div>
            </calcite-panel>
    
            <!-- Info panel (populates with info from the web map) -->
            <calcite-panel heading="Details" data-panel-id="information" hidden>
              <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>
    
          </calcite-shell-panel>
    
          <div id="viewDiv"></div>
    
        </calcite-shell>
    
      </body>
      <script>
        require([
          "esri/WebMap",
          "esri/views/MapView",
          "esri/widgets/Bookmarks",
          "esri/widgets/BasemapGallery",
          "esri/widgets/LayerList",
          "esri/widgets/Legend",
          "esri/widgets/Print"
        ], function(WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print) {
          const webmapId = new URLSearchParams(window.location.search).get("webmap")
            ?? "cc3bd744b9a44feaa493dd867a1d48dd";
          const map = new WebMap({
            portalItem: {
              id: webmapId
          const view = new MapView({
            container: "viewDiv",
            padding: {
              left: 49
          view.ui.move("zoom", "bottom-right");
          const basemaps = new BasemapGallery({
            container: "basemaps-container"
          const bookmarks = new Bookmarks({
            container: "bookmarks-container"
          const layerList = new LayerList({
            selectionEnabled: true,
            container: "layers-container"
          const legend = new Legend({
            container: "legend-container"
          const print = new Print({
            container: "print-container"
          map.when(() => {
            const { title, description, thumbnailUrl, avgRating } = map.portalItem;
            document.querySelector("#header-title").textContent = title;
            document.querySelector("#item-description").innerHTML = description;
            document.querySelector("#item-thumbnail").src = thumbnailUrl;
            document.querySelector("#item-rating").value = avgRating;
            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}]`).hidden = true;
              const nextWidget = target.dataset.actionId;
              if (nextWidget !== activeWidget) {
                document.querySelector(`[data-action-id=${nextWidget}]`).active = true;
                document.querySelector(`[data-panel-id=${nextWidget}]`).hidden = false;
              } else {
                activeWidget = null;
            document.querySelector("calcite-action-bar").addEventListener("click", handleActionBarClick);
            let actionBarExpanded = false;
            document.addEventListener("calciteActionBarToggle", event => {
                left: actionBarExpanded ? 135 : 45
      </script>
    </html>
  4. Add another calcite-panel component.

  5. Create a div, and then add img and div child elements with id global attributes. These elements will populate with the web map's thumbnail and description.

  6. Add a calcite-label component with the layout attribute set to "inline".

  7. 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.

    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
    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
    <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>
    
        <script src="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.esm.js" type="module"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.0-beta.82/calcite.css" />
    
        <script src="https://js.arcgis.com/4.23/"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    
      </head>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        body {
          display: flex;
        #header-title {
          margin-left: 1rem;
          margin-right: 1rem;
        #info-content {
          padding: 0.75rem;
          margin-top: 0.25rem;
      </style>
      <body>
    
        <calcite-shell content-behind>
    
          <h2 id="header-title" slot="header">
            <!-- Dynamically populated -->
          </h2>
    
          <calcite-shell-panel slot="primary-panel" detached>
    
            <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>
    
            <!-- Map-specific panels (each one provides a div for ArcGIS JavaScript API widgets) -->
            <calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" hidden>
              <div id="layers-container"></div>
            </calcite-panel>
            <calcite-panel heading="Basemaps" height-scale="l" data-panel-id="basemaps" hidden>
              <div id="basemaps-container"></div>
            </calcite-panel>
            <calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" hidden>
              <div id="legend-container"></div>
            </calcite-panel>
            <calcite-panel heading="Bookmarks" height-scale="l" data-panel-id="bookmarks" hidden>
              <div id="bookmarks-container"></div>
            </calcite-panel>
            <calcite-panel heading="Print" height-scale="l" data-panel-id="print" hidden>
              <div id="print-container"></div>
            </calcite-panel>
    
            <!-- Info panel (populates with info from the web map) -->
            <calcite-panel heading="Details" data-panel-id="information" hidden>
              <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>
    
          </calcite-shell-panel>
    
          <div id="viewDiv"></div>
    
        </calcite-shell>
    
      </body>
      <script>
        require([
          "esri/WebMap",
          "esri/views/MapView",
          "esri/widgets/Bookmarks",
          "esri/widgets/BasemapGallery",
          "esri/widgets/LayerList",
          "esri/widgets/Legend",
          "esri/widgets/Print"
        ], function(WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print) {
          const webmapId = new URLSearchParams(window.location.search).get("webmap")
            ?? "cc3bd744b9a44feaa493dd867a1d48dd";
          const map = new WebMap({
            portalItem: {
              id: webmapId
          const view = new MapView({
            container: "viewDiv",
            padding: {
              left: 49
          view.ui.move("zoom", "bottom-right");
          const basemaps = new BasemapGallery({
            container: "basemaps-container"
          const bookmarks = new Bookmarks({
            container: "bookmarks-container"
          const layerList = new LayerList({
            selectionEnabled: true,
            container: "layers-container"