Display a map component

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

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
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.<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{
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </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{
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <!-- Load Map Components from CDN-->
  <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.29/"></script>
  <script type="module" src="https://js.arcgis.com/map-components/4.29/arcgis-map-components.esm.js"></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-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.