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.
Use dark colors for code blocks <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
<headtag, add references to the JavaScript SDK core library and CSS, calcite components and map components.> Use dark colors for code blocks <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
<bodytag, add the> <arcgis-mapcomponent and specify the webmap item ID.> Use dark colors for code blocks <body> <arcgis-map item-id="237b9584339446a0b56317b5962a4971"> </arcgis-map> </body>
Add legend and zoom components
- Inside the
<arcgis-mapcomponent, add the> <arcgis-legendand> <arcgis-zoomcomponents and specify their position.> Use dark colors for code blocks <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: