Display a map component

Learn how to create and display a map with a legend using map components.

A web map is a map stored as an item in ArcGIS Online. A web map item contains all of the configuration settings for the map (in JSON format) such as the basemap layer, data layers, layer styles, and pop-up settings. Applications can access and display a web map using its item ID.

In this tutorial, you will load and display a pre-configured web map stored in ArcGIS Online.

Steps

Create a new pen

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

Add basic HTML

Define a basic HTML page.

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
14
14
14
14
14
14
14
14
14
14
15
16
17
18
18
18
18
18
18
18
19
20
21
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.<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: Display a map using arcgis/map-components</title>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>

  </head>

  <body>

  </body>

</html>

Add references

In the <head> tag, add references to the ArcGIS core library and CSS, and @arcgis/map-components packages.

Expand
Use dark colors for code blocks
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>

    <!-- Load Calcite components from CDN -->
    <script type="module" src="https://js.arcgis.com/calcite-components/3.2.1/calcite.esm.js"></script>

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

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

Add map component

In the <body> tag, add the <arcgis-map> component and specify the webmap item ID.

Expand
Use dark colors for code blocks
  <body>

    <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca">

    </arcgis-map>

  </body>
Expand
Component reference (map)

Add legend component

Inside the <arcgis-map> component, add the <arcgis-legend> component and specify its position.

Expand
Use dark colors for code blocks
  <body>

    <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca">

      <arcgis-legend position="bottom-right"></arcgis-legend>

    </arcgis-map>

  </body>
Expand
Component reference (legend)

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 legend in the bottom-right corner.

What's next?

Learn how to use additional SDK functionality:

Using a View with components tutorial.
Go to the component reference for more detailed information about components.