Display a web map

Learn how to display a map from a stored in .

A is a map stored as an in . A web map item contains all of the configuration settings for the map (in JSON format) such as the , , layer , and settings. Applications can access and display a web map using its .

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

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.
    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
    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
    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
    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 information contained in the .

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.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close