Display a marker and a popup

In this tutorial, you will learn how to create and display a map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more with a marker symbol A symbol defines the properties used to display a geometry or text. Learn more and a pop-up A pop-up is a visual element used to display data for features or graphics in a map. Learn more .

Marker symbols are built using Graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more which are visual elements used to display

points A point is a type of geometry containing a single set of x,y coordinates and a spatial reference. Learn more , lines A polyline is a type of geometry containing ordered point coordinates and a spatial reference. Learn more ,polygons A polygon is a type of geometry containing an array of rings and a spatial reference. Each ring contains an array of point coordinates, where the first and last point are the same. Learn more , and text in a map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more or scene A scene is a collection of layers that are displayed in 3D. It is typically composed of a basemap layer, data layers, and 3D data. Learn more . Graphics are composed of a geometry A geometry is a geometric shape, such as a point, polyline, or polygon, that contains one or more coordinates and a spatial reference. Learn more , symbol A symbol defines the properties used to display a geometry or text. Learn more , and attributes Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more , and can display a pop-up A pop-up is a visual element used to display data for features or graphics in a map. Learn more when clicked. You typically use graphics to display geographic data that is not connected to a database (i.e. a GPS location).

Prerequisites

Steps

Create a new pen

To get started, either complete the Display a map tutorial or use this pen .

Get an access token

You need an access token An access token is an authorization string that provides access to secure ArcGIS content, data, and services. Its capabilities are determined by the privileges it supports. It is obtained by implementing API key authentication, User authentication, or App authentication. Learn more with the correct privileges to access the location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more used in this tutorial.

1. Go to the Create an API key tutorial and create an API key An API key is a long-lived access token created using API key credentials. They are valid for up to one year and are typically embedded directly into client applications. Learn more with the following privilege(s) Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more :
   
   • Privileges
     • Location services > Basemaps
2. In CodePen, set the apiKey property on the global esriConfig variable to your access token.

   <!-- The esriConfig variable must be defined before adding the other esri libraries -->
   <script>
   
     var esriConfig = {
       apiKey: "YOUR_ACCESS_TOKEN",
     };
   
   </script>

To learn about other ways to get an access token, go to Types of authentication.

Add graphic and pop-up

1. Add a new <script> tag after the closing element of the </body> section. Set the script’s type to module. Inside the script tag, use document.querySelector() to get a reference to the Map component. Then use the viewOnReady function to determine when the map component is ready.

   33 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</title>
   
       <style>
         html,
         body {
           height: 100%;
           margin: 0;
         }
       </style>
   
       <script>
         var esriConfig = {
           apiKey: "YOUR_ACCESS_TOKEN",
         };
       </script>
   
       <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
       <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
     </head>
   
     <body>
   
       <arcgis-map basemap="arcgis/community" center="-118.49178, 34.01185" zoom="15">
   
         <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       </arcgis-map>
   
       <script type="module">
   
         // Get a reference to the map component
         const viewElement = document.querySelector("arcgis-map");
   
         // Wait for when the component is ready
         await viewElement.viewOnReady();
   
       </script>
   4 collapsed lines
   
     </body>
   
   </html>

2. Create a point geometry, text symbol and pop-up template. The Point and TextSymbol classes are used to create the graphic, and the TextSymbol is defined through an Esri Icon Font. Each graphic can contain a geometry, symbol, popupTemplate and attributes. The popupTemplate is used for displaying content in a Popup when the graphic is selected by the user.

   35 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</title>
   
       <style>
         html,
         body {
           height: 100%;
           margin: 0;
         }
       </style>
   
       <script>
         var esriConfig = {
           apiKey: "YOUR_ACCESS_TOKEN",
         };
       </script>
   
       <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
       <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
     </head>
   
     <body>
   
       <arcgis-map basemap="arcgis/community" center="-118.49178, 34.01185" zoom="15">
   
         <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       </arcgis-map>
   
       <script type="module">
   
         const geometry = {
           type: "point",
           longitude: -118.49178,
           latitude: 34.01185,
         };
   
         const symbol = {
         viewElement.graphics.add({
           symbol: {
             type: "web-style",
             name: "esri-pin-1",
             styleName: "Esri2DPointSymbolsStyle"
           },
         };
   
         const popupTemplate = {
           title: "Santa Monica City Hall",
           content: "1685 Main Street",
         };
   
   5 collapsed lines
       </script>
   
     </body>
   
   </html>

3. Add the graphic to the map’s default graphics collection.

   41 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</title>
   
       <style>
         html,
         body {
           height: 100%;
           margin: 0;
         }
       </style>
   
       <script>
         var esriConfig = {
           apiKey: "YOUR_ACCESS_TOKEN",
         };
       </script>
   
       <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
       <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
     </head>
   
     <body>
   
       <arcgis-map basemap="arcgis/community" center="-118.49178, 34.01185" zoom="15">
   
         <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       </arcgis-map>
   
       <script type="module">
   
         // Get a reference to the map component
         const viewElement = document.querySelector("arcgis-map");
   
         // Wait for when the component is ready
         await viewElement.viewOnReady();
   
         viewElement.graphics.add({
           symbol,
           geometry,
           popupTemplate,
         });
   6 collapsed lines
   
       </script>
   
     </body>
   
   </html>

Run the app

In CodePen, run your code to display the map.

The map should display the streets 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 for an area of Santa Monica in California. Click on the icon symbol to see the pop-up.

What’s next?

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

• See more samples using pop-ups