RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/latest/tutorials/display-a-web-map/ below:

Display a web map | Overview | ArcGIS Maps SDK for JavaScript 4.33

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.

Note

To learn more about data hosting, visit Data hosting in the Mapping and location services guide. To learn more about services, visit Feature service.

Prerequisites ArcGIS Accounts:

You need an ArcGIS Location Platform or ArcGIS Online account.

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

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

  </head>


  <body>

  </body>

</html>

Add references

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
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>

    <!-- Load Calcite components from CDN -->
    <script type="module" src="https://js.arcgis.com/calcite-components/3.2.1/calcite.esm.js"></script>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.33/"></script>

    <!-- Load Map components from CDN-->
    <script type="module" src="https://js.arcgis.com/4.33/map-components/"></script>

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

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

  <body>

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

    </arcgis-map>

  </body>

Add legend and zoom components

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

  <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:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4