Using a View with components

Learn how to use a View with map components and Calcite components, to create an application with a header, thumbnail and web map. The key aspect here is to show how to use map components, and then access the created map in your script code.

In this tutorial, you will load and display a pre-configured web map stored in ArcGIS Online, and use Calcite Components to lay out your application with a header and logo at top, and the map below. The title and logo to display in the header will come from the web map item. You will also learn to display a loading indicator until the map is ready.

Steps

Create a new pen

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

Add basic HTML

Define a basic HTML page.

  1. In CodePen > HTML, add HTML to create a basic page.
Use dark colors for code blocks
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
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
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Using a View with map components and Calcite components.</title>

  <style>
    html,
    body,
    arcgis-map {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

</head>

<body>

</body>

</html>

Add references

  1. In the <head> tag, add references to the ArcGIS core library and CSS, Calcite components and map components packages.
Expand
Use dark colors for code blocks
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
  <!-- Load Calcite components from CDN -->
  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
  <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.31/"></script>

  <!-- Load Map components from CDN-->
  <script
    type="module"
    src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"
  ></script>
Expand

Create layout using Calcite

  1. Add the <calcite-shell> component.
  2. Add the <calcite-navigation> component, placing it in the shell's header slot.
  3. Add the <calcite-navigation-logo> component, placing it in the logo slot of the <calcite-navigation>.
  4. Add the <calcite-loader> component below the <calcite-shell> component.
Expand
Use dark colors for code blocks
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
  <calcite-shell>
      <calcite-navigation slot="header">
          <calcite-navigation-logo slot="logo" target="_blank"></calcite-navigation-logo>
      </calcite-navigation>

  </calcite-shell>
  <calcite-loader></calcite-loader>

Add arcgis-map component

  1. Add the <arcgis-map> component after the <calcite-navigation> component.
  2. Add the <arcgis-legend> component inside the <arcgis-map> component.
Expand
Use dark colors for code blocks
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
  <calcite-shell>
      <calcite-navigation slot="header">
          <calcite-navigation-logo slot="logo" target="_blank"></calcite-navigation-logo>
      </calcite-navigation>

      <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca">
          <arcgis-legend position="bottom-right"></arcgis-legend>
      </arcgis-map>

  </calcite-shell>
  <calcite-loader></calcite-loader>

Add script logic

  1. Add a <script> section in the <body>.
  2. Add an eventListener to wait for when the "view" of the Map component is ready.
  3. Create variables for the view and the portal item used to create it.
  4. Set the heading, description and thumbnail of the calcite-navigation-logo.
Expand
Use dark colors for code blocks
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
  <script>
      document.querySelector("arcgis-map").addEventListener("arcgisViewReadyChange", (event) => {
          const { portalItem } = event.target.map;
          const navigationLogo = document.querySelector("calcite-navigation-logo");
          navigationLogo.heading = portalItem.title;
          navigationLogo.description = portalItem.snippet;
          navigationLogo.thumbnail = portalItem.thumbnailUrl;
          navigationLogo.href = portalItem.itemPageUrl;
          navigationLogo.label = "Thumbnail of map";

      });
  </script>

Hide loader

  1. Hide the loader once the view is ready
Expand
Use dark colors for code blocks
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
  <script>
      document.querySelector("arcgis-map").addEventListener("arcgisViewReadyChange", (event) => {
          const { portalItem } = event.target.map;
          const navigationLogo = document.querySelector("calcite-navigation-logo");
          navigationLogo.heading = portalItem.title;
          navigationLogo.description = portalItem.snippet;
          navigationLogo.thumbnail = portalItem.thumbnailUrl;
          navigationLogo.href = portalItem.itemPageUrl;
          navigationLogo.label = "Thumbnail of map";

          // turn off the loader once the view is ready
          document.querySelector("calcite-loader").hidden = true;

      });
  </script>

Run the app

In CodePen, run your code to display the map.

The app should display a map showing predominant educational attainment in New York, with a thumbnail and title at the top.

What's next?

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