Display a web map

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

  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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <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

  1. In the <head> tag, add references to the JavaScript SDK core library and CSS, calcite components and map components.
    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
      <style>
        html,
        body {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
      </style>
    
       <!-- 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

Add map component

  1. In the <body> tag, add the <arcgis-map> component and specify the webmap item ID.
    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
    
    <body>
    
      <arcgis-map item-id="237b9584339446a0b56317b5962a4971">
    
      </arcgis-map>
    
    </body>
    

Add legend and zoom components

  1. Inside the <arcgis-map> component, add the <arcgis-legend> and <arcgis-zoom> components and specify their position.
    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
    
    <body>
    
      <arcgis-map item-id="237b9584339446a0b56317b5962a4971">
    
        <arcgis-zoom position="top-left"></arcgis-zoom>
        <arcgis-legend position="bottom-right"></arcgis-legend>
    
      </arcgis-map>
    
    </body>
    

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 API features and ArcGIS services in these tutorials:

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