Display a web map | ArcGIS Maps SDK for JavaScript

Learn how to display a map from a web map A web map is a map stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web map specification. Learn more stored in ArcGIS ArcGIS is the brand name for all of the desktop, server, and developer products and technologies offered by Esri. Learn more .

A web map A web map is a map stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web map specification. Learn more is a map stored as an item An item, also known as a content item, is a resource stored in a portal such as a web map, hosted layer, style, script tool, file, or notebook. Learn more in ArcGIS Online ArcGIS Online is a GIS mapping, analytics, data hosting, and content management software as a service (SaaS) product. It includes applications, tools, APIs, and location services for users and developers. It is subscription-based and requires an ArcGIS Online account. Learn more . A web map item contains all of the configuration settings for the map (in JSON format) such as the basemap layer A basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service. Learn more , data layers A data layer is a layer that references geographic data from a file or a service and is used to visualize the data in a map or scene. Learn more , layer styles A style is the visual definition of how geographic data is displayed in a map including colors, backgrounds, outlines, labels, and other visual elements. Each style emphasizes a specific type of cartographic theme and data. Learn more , and pop-up A pop-up is a visual element used to display data for features or graphics in a map. Learn more settings. Applications can access and display a web map using its item ID An item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file. Learn more .

In this tutorial, you will load and display a pre-configured web map stored in ArcGIS Online ArcGIS Online is a GIS mapping, analytics, data hosting, and content management software as a service (SaaS) product. It includes applications, tools, APIs, and location services for users and developers. It is subscription-based and requires an ArcGIS Online account. Learn more .

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 A layer is a reference to a collection of geographic data that is used to access and display data. The data for layers are typically provided by the basemap layer service and data services. Learn more information contained in the web map A web map is a map stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web map specification. Learn more .

What’s next?

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