Display a marker and a popup | ArcGIS Maps SDK for JavaScript

In this tutorial, you will learn how to create and display a map with a marker symbol and a pop-up .

Marker symbols are built using Graphics which are visual elements used to display

points , lines , polygons , and text in a map or scene . Graphics are composed of a geometry , symbol , and attributes , and can display a pop-up 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 .

Get an access token

You need an access token with the correct privileges to access the location services used in this tutorial.

Go to the Create an API key tutorial and create an API key with the following privilege(s) :
- Privileges
  - Location services > Basemaps

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

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>

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>

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

Tutorials (Location Platform)Display a map Tutorials (Location Platform)Search & geocode