Core concepts

Learn to craft an engaging, interactive experience with Calcite Components and ArcGIS API for JavaScript.

Using core web component concepts such as slots, events, and attributes, you will build an interface using Calcite Components and data provided by ArcGIS API for JavaScript.

This tutorial will provide an overview of foundational Calcite Component and web component concepts. You will:

  • Scaffold an interface with calcite-shell and related components.

  • Add a map with a FeatureLayer containing content.

  • Use Calcite Components to display data provided by the queryTopFeatures() method.

  • Add interactivity to the map and data using the concepts of events and attributes.

  • Customize the look and feel using theme and color tokens.

This tutorial leverages vanilla JavaScript, but these concepts and methods of interaction are applicable across frameworks.

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.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
    
    <html>
    
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
      <title>Calcite Components: Core concepts</title>
    
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
      </style>
    
    </head>
    
    <body>
    
      <div id="viewDiv"></div>
    
    </body>
    
    <script>
    </script>
    
    </html>
  2. In the <head> element, add references to Calcite Components and ArcGIS JavaScript API.

    Expand
    Use dark colors for code blocks
                                                          
    Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
      <script type="module" src="https://js.arcgis.com/calcite-components/1.0.0-beta.83/calcite.esm.js"></script>
      <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.83/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" />
    
    Expand

Import modules

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

    Expand
    Use dark colors for code blocks
                                                          
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
    <script>
    
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/symbols/WebStyleSymbol",
        "esri/Basemap",
        "esri/rest/support/TopFeaturesQuery",
        "esri/rest/support/TopFilter",
        "esri/widgets/Home"
      ], (Map, MapView, FeatureLayer, WebStyleSymbol, Basemap, TopFeaturesQuery, TopFilter, Home) => (async () => {
    
      })());
    
    </script>
    
    Expand

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/Home",
      "esri/config"
    ], function (Map, MapView, FeatureLayer, WebStyleSymbol, Basemap, TopFeaturesQuery, TopFilter, Home, esriConfig) => (async () => {
    esriConfig.apiKey = "YOUR_API_KEY";

Scaffold the application

Next, you will add Calcite Components to scaffold the application.

  1. The calcite-shell component serves as the application frame. Additionally, notice that the calcite-shell-panel, and calcite-panel components have been added.

    These layout components help organize content and other components in predictable and repeatable ways, and can be configured to accommodate many desired layouts and use cases.

    Expand
    Use dark colors for code blocks
                                                                
    Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    <body>
      <calcite-shell>
        <calcite-shell-panel slot="primary-panel">
          <calcite-panel heading="National Park Visitation">
          </calcite-panel>
        </calcite-shell-panel>
    
        <div id="viewDiv"></div>
    
      </calcite-shell>
    </body>
    
    Expand
  2. Pause to understand some core web component concepts in the snippet you added to the application:

    • The primary-panel slot you added to the calcite-shell-panel. Defined slots such as this can provide styling or positioning for slotted content or components, making common patterns simple to construct.
    • The heading attribute has been added to the calcite-panel component and populated with the name of the application. Using component attributes to add text helps consistently position and style content.

Display a map

  1. Next, you will add the ArcGIS API for JavaScript code, based on the Query top features from a FeatureLayer tutorial.

    Expand
    Use dark colors for code blocks
                                                                                                                                                                   
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.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
        "esri/widgets/Home"
      ], (Map, MapView, FeatureLayer, WebStyleSymbol, Basemap, TopFeaturesQuery, TopFilter, Home) => (async () => {
    
        const layer = new FeatureLayer({
          url:
            "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_National_Parks_Annual_Visitation/FeatureServer/0",
          outFields: ["*"],
          renderer: await setRenderer(),
          popupTemplate: createPopupTemplate()
        });
    
        const map = new Map({
          basemap: "streets-navigation-vector",
          layers: [layer]
        });
    
        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-120, 45],
          zoom: 3
        });
    
        let homeWidget = new Home({
          view: view
        });
    
        view.ui.add(homeWidget, "top-right");
        view.ui.move("zoom", "top-right");
        const layerView = await view.whenLayerView(layer);
    
        async function setRenderer() {
          const symbol = new WebStyleSymbol({
            name: "park",
            styleName: "Esri2DPointSymbolsStyle"
          });
    
          const cimSymbol = await symbol.fetchCIMSymbol();
          cimSymbol.data.symbol.symbolLayers[0].size = 24;
          cimSymbol.data.symbol.symbolLayers[1] = null;
    
          return {
            type: "simple",
            symbol: cimSymbol
          };
        }
    
        function createPopupTemplate() {
          return {
            title: "{Park}",
            content: [{
              type: "fields",
              fieldInfos: [{
                fieldName: "TOTAL",
                label: "Total visits",
                format: { digitSeparator: true }
              }, {
                fieldName: "F2018",
                label: "2018",
                format: { digitSeparator: true }
              }, {
                fieldName: "F2019",
                label: "2019",
                format: { digitSeparator: true }
              }, {
                fieldName: "F2020",
                label: "2020",
                format: { digitSeparator: true }
              }]
            }]
          };
        }
    
    
    Expand

    At this point the map is visible behind the calcite-shell-panel you added. Click around the map points and see the data displayed in popups. This configuration is not specific to Calcite Components - you can view the original tutorial for more context.

  2. Add a function to filter the data on the map. The filterItems() function contains a queryTopFeatures() method, which returns a set of results based on a set of filter options. Notice that we have assigned some default values to variables that will later be made configurable in the application.

    Expand
    Use dark colors for code blocks
                                                                                                                                                                   
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
        }
    
    
        const countDefault = 1;
        const orderByDefault = "DESC"
        const yearDefault = "TOTAL"
    
        let count = countDefault;
        let orderBy = orderByDefault;
        let year = yearDefault;
    
        async function filterItems() {
          const query = new TopFeaturesQuery({
            topFilter: new TopFilter({
              topCount: count,
              groupByFields: ["State"],
              orderByFields: `${year} ${orderBy}`
            }),
            orderByFields: `${year} ${orderBy}`,
            outFields: ["State, TOTAL, F2018, F2019, F2020, Park"],
            returnGeometry: true,
            cacheHint: false
          });
    
          query.orderByFields = [""];
          const objectIds = await layer.queryTopObjectIds(query);
          layerView.filter = { objectIds };
        }
    
        filterItems();
    
    
    Expand

Add the results list

Next, you will create a list using the results returned from ArcGIS API for JavaScript. Clicking on the result items will show an associated popup on the map.

  1. Add a calcite-block with an id attribute. Inside, place a calcite-list, again with an id attribute, that will be used for appending content. Note the collapsible and heading attributes used to customize the component.

    Expand
    Use dark colors for code blocks
                                                                                                                                                                                                         
    Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
        <calcite-shell-panel slot="primary-panel">
          <calcite-panel heading="National Park Visitation">
    
            <calcite-block collapsible heading="Results" id="result-block">
              <calcite-list id="result-list"></calcite-list>
            </calcite-block>
    
          </calcite-panel>
        </calcite-shell-panel>
    
    Expand
  2. Next, add logic to create a calcite-list-item for each displayed item in the FeatureLayer.

    Expand
    Use dark colors for code blocks
                                                                                                                                                                                                         
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
            cacheHint: false
          });
    
          document.getElementById("result-list").innerHTML = "";
          document.getElementById("result-block").open = true;
    
          const results = await layer.queryTopFeatures(query);
          graphics = results.features;
    
          graphics.forEach((result, index) => {
            const attributes = result.attributes;
            const item = document.createElement("calcite-list-item");
            const chip = document.createElement("calcite-chip");
            chip.value = attributes.State;
            chip.slot = "content-end";
            chip.scale = "s";
            chip.innerText = attributes.State;
            item.label = attributes.Park;
            item.value = index;
            item.description = `${attributes[yearDefault].toLocaleString()} visitors`;
            item.addEventListener("click", () => resultClickHandler(result, index));
            item.appendChild(chip);
            document.getElementById("result-list").appendChild(item);
          });
    
          query.orderByFields = [""];
          const objectIds = await layer.queryTopObjectIds(query);
    
    Expand

    For each graphic, you are programmatically creating a calcite-list-item, assigning property values to customize the display, and appending to the result container reference you added earlier. You are also creating a calcite-chip with the state name of each result, and placing it in a slot.

  3. An event listener was added to each calcite-list-item created in the previous step. Create the resultClickHandler() function, which will display a ArcGIS API for JavaScript popup.

    Expand
    Use dark colors for code blocks
                                                                                                                                                                                                         
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
          layerView.filter = { objectIds };
        }
    
        function resultClickHandler(result, index) {
          const popup = graphics && graphics[parseInt(index, 10)];
          if (popup) {
            view.popup.open({
              features: [popup],
              location: result.geometry
            });
            view.goTo({ center: [result.geometry.longitude, result.geometry.latitude], zoom: 4 }, { duration: 400 });
          }
        }
    
    
    Expand

Build the filters

  1. Add another calcite-block component. Inside, place a set of controls that will adjust the parameters of the queryTopFeatures() query. Each control is wrapped in a calcite-label.

    Expand
    Use dark colors for code blocks
                                                                                                                                                                                                                                          
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
          <calcite-panel heading="National Park Visitation">
    
            <calcite-block heading="Filters" open>
              <calcite-label>
                Data type, per state
                <calcite-radio-group id="control-visited-type-el" width="full">
                  <calcite-radio-group-item value="DESC" checked>Most visited</calcite-radio-group-item>
                  <calcite-radio-group-item value="ASC">Least visited</calcite-radio-group-item>
                </calcite-radio-group>
              </calcite-label>
              <calcite-label>
                Year data to display
                <calcite-select id="control-year-el">
                  <calcite-option label="Total of all time" value="TOTAL"></calcite-option>
                  <calcite-option label="2018" value="F2018"></calcite-option>
                  <calcite-option label="2019" value="F2019"></calcite-option>
                  <calcite-option label="2020" value="F2020"></calcite-option>
                </calcite-select>
              </calcite-label>
              <calcite-label>
                Max parks per state
                <calcite-slider id="control-count-per-state-el" label-ticks ticks="1" min="1" max="5"></calcite-slider>
              </calcite-label>
            </calcite-block>
    
    
            <calcite-block collapsible heading="Results" id="result-block">
    
    Expand
  2. Note that you have assigned id attributes to the calcite-radio-group, calcite-select, and calcite-slider. You will use these references to set up event listeners to determine when to update the results.

    Expand
    Use dark colors for code blocks
                                                                                                                                                                                                                                          
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
          };
        }
    
    
        const controlVisitedTypeEl = document.getElementById("control-visited-type-el");
        const controlYearEl = document.getElementById("control-year-el");
        const controlCountPerStateEl = document.getElementById("control-count-per-state-el");
    
        controlVisitedTypeEl.addEventListener("calciteRadioGroupChange", async (event) => { orderBy = event.target.value, filterItems() });
        controlYearEl.addEventListener("calciteSelectChange", async (event) => { year = event.target.value, filterItems() });
        controlCountPerStateEl.addEventListener("calciteSliderChange", async (event) => { count = event.target.value, filterItems() });
    
    
        const countDefault = 1;
        const orderByDefault = "DESC"
    
    Expand

    Note that each event listener references a custom Calcite Components event: calciteSelectChange, calciteSliderChange , and calciteRadioGroupChange.

    When that event is fired, you will set the related local variable, and run the filterItems() function. In a production environment, you might make use of more granular filtering functions to improve performance.

Create a reset action

Because you added events that allowed a user to change the view from the default filter parameters, it will be useful to add a way to reset the options.

  1. Add a calcite-action and calcite-tooltip using slots.

    Expand
    Use dark colors for code blocks
                                                                                                                                                                                                                                                                           
    Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
            <calcite-block heading="Filters" open>
    
              <div slot="control">
                <calcite-action disabled icon="reset" id="control-reset-el"></calcite-action>
                <calcite-tooltip reference-element="control-reset-el" position="bottom">
                  Reset to defaults
                </calcite-tooltip>
              </div>
    
              <calcite-label>
    
    Expand

    You may notice some concepts used in previous tutorial steps. Take note of the icon attribute on the calcite-action. Calcite Components often provide helpers for loading Calcite UI Icons - the full set can be explored using the icon search.

    The disabled attribute is also set - you will enable it when the set of parameters a user has created differs from the defaults.

  2. Add a reference and an event listener to the reset action.

    Expand
    Use dark colors for code blocks
                                                                                                                                                                                                                                                                           
    Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    
        const controlVisitedTypeEl = document.getElementById("control-visited-type-el");
        const controlYearEl = document.getElementById("control-year-el");
        const controlCountPerStateEl = document.getElementById("control-count-per-state-el");
        const controlResetEl = document.getElementById("control-reset-el");
    
        controlVisitedTypeEl.addEventListener("calciteRadioGroupChange", async (event) => { orderBy = event.target.value, filterItems() });
        controlYearEl.addEventListener("calciteSelectChange", async (event) => { year = event.target.value, filterItems() });
        controlCountPerStateEl.addEventListener("calciteSliderChange", async (event) => { count = event.target.value, filterItems() });
        controlResetEl.addEventListener("click", async () => resetFilters());
    
    Expand
  3. Add the functions determineResetActionState(), and resetFilters(), where you will determine the state of the reset action, and reset parameters when requested by a user. The resetFilters() function will reset the parameters of the query, and reset the controls to their initial display. The action will be disabled when the set of filter options matches the initial values, or a user interacts with the calcite-action.

    Expand
    Use dark colors for code blocks
                                                                                                                                                                                                                                                                           
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
        }
    
    
        function determineResetActionState() {
          if (count !== countDefault || orderBy !== orderByDefault || year !== yearDefault) {
            controlResetEl.removeAttribute("disabled");
            controlResetEl.indicator = true;
          }
          else {
            controlResetEl.disabled = true;
            controlResetEl.removeAttribute("indicator");
          }
        }
    
        function resetFilters() {
          count = countDefault;
          orderBy = orderByDefault;
          year = yearDefault;
    
          const activeRadioGroupItem = document.querySelector(`calcite-radio-group-item[value=${orderByDefault}]`)
          activeRadioGroupItem.checked = true;
          controlYearEl.value = yearDefault;
          controlCountPerStateEl.value = countDefault;
    
          filterItems();
        }
    
        filterItems();
    
    Expand
  4. Call the determineResetActionState() function in the filterItems() function.

    Expand
    Use dark colors for code blocks
                                                                                                                                                                                                                                                                           
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    
          determineResetActionState();
        }
    
    Expand

Theme the application

By combining the functionality of the ArcGIS API for JavaScript with Calcite Components, you created a rich interactive experience for your users. To go one step further, you will add styles to create a custom look and feel.

  1. Add a CSS class to the calcite-shell:

    Use dark colors for code blocks
                                                                                                                                                                                                                                                                                         
    Change line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
      <calcite-shell class="calcite-tutorial">
    
  2. Target individual components or sections to add custom styles:

    Expand
    Use dark colors for code blocks
                                                                                                                                                                                                                                                                                         
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    
    
        .calcite-tutorial {
          --calcite-ui-brand: #039851;
          --calcite-ui-brand-hover: #008D52;
        }
    
        .calcite-tutorial calcite-chip {
          --calcite-ui-foreground-2: var(--calcite-ui-brand);
          --calcite-ui-text-1: white;
          margin-inline-end: .75rem;
        }
    
    
    Expand

Run the app

In CodePen, run your code to display the map.

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