Display a web map from a portal | ArcGIS Maps SDK for JavaScript

Learn how to display a map from a web map stored in ArcGIS .

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 .

Prerequisites

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.

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=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 the ArcGIS Maps SDK for JavaScript script tag

In the <head>, add the <script> tag for the JavaScript Maps SDK.

7 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map using arcgis/map-components</title>

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

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>
10 collapsed lines

</head>


<body>

</body>


</html>

Add map component

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

20 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map using arcgis/map-components</title>

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

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>


<body>

  <arcgis-map item-id="237b9584339446a0b56317b5962a4971">

  </arcgis-map>

</body>
3 collapsed lines


</html>

Component reference (map)

Add legend and zoom components

Inside the <arcgis-map> component, add the <arcgis-legend> and <arcgis-zoom> components and specify their slot.

20 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map using arcgis/map-components</title>

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

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>


<body>

  <arcgis-map item-id="237b9584339446a0b56317b5962a4971">

    <arcgis-zoom slot="top-left"></arcgis-zoom>
    <arcgis-legend slot="bottom-right"></arcgis-legend>

  </arcgis-map>

</body>
3 collapsed lines


</html>

Component reference (legend)

Run the App

In CodePen, run your code to display the map.

You should now see a map with trails and parks in the Santa Monica Mountains, along with a legend that displays layer information contained in the web map .

What’s next?

Learn how to use additional SDK features and ArcGIS services in these tutorials: