Add a point, line, and polygon | ArcGIS Maps SDK for JavaScript

Learn how to display point A point is a type of geometry containing a single set of x,y coordinates and a spatial reference. Learn more , line A polyline is a type of geometry containing ordered point coordinates and a spatial reference. Learn more , and polygon 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 graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more 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 .

Graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more 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).

In this tutorial, you will learn how 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 , and 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 on a map as graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more .

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

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
In CodePen, set the apiKey property on the global esriConfig variable to your access token.
var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN", };

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

Add modules

In a new <script> at the bottom of the <body>, use $arcgis.import() to add the Map, Graphic and GraphicsLayer modules.

The ArcGIS Maps SDK for JavaScript ArcGIS Maps SDK for JavaScript, previously known as ArcGIS API for JavaScript, is a developer product for building mapping and spatial analysis applications for the web. Learn more is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK’s different modules, visit the References page.

29 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: Add a point, line, and polygon</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 center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const [Graphic, Map, GraphicsLayer] = await $arcgis.import([
      "@arcgis/core/Graphic.js",
      "@arcgis/core/Map.js",
      "@arcgis/core/layers/GraphicsLayer.js",
    ]);

  </script>
4 collapsed lines

</body>

</html>

Add a graphics layer

A graphics layer A graphics overlay is a client-side, temporary container of graphics to display on a map view or scene view. Learn more is a container for graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more . It is used with a map view A map view is a user interface that displays map layers and graphics in 2D. It controls the area (extent) of the map that is visible and supports user interactions such as pan and zoom. Learn more to display graphics on 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 . You can add more than one graphics layer A graphics overlay is a client-side, temporary container of graphics to display on a map view or scene view. Learn more to 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 . Graphics layers are displayed on top of all other layers A layer is a reference to a collection of geographic data that is used to access and display data. The data for layers are typically provided by the basemap layer service and data services. Learn more .

Create and add a GraphicsLayer for displaying graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more on a map.

29 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: Add a point, line, and polygon</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 center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const [Graphic, Map, GraphicsLayer] = await $arcgis.import([
      "@arcgis/core/Graphic.js",
      "@arcgis/core/Map.js",
      "@arcgis/core/layers/GraphicsLayer.js",
    ]);

    const viewElement = document.querySelector("arcgis-map");

    const graphicsLayer = new GraphicsLayer();

    viewElement.map = new Map({ basemap: "arcgis/topographic", layers: [graphicsLayer] });

  </script>
4 collapsed lines

</body>

</html>

Add a point graphic

A point graphic A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more is created using a point A point is a type of geometry containing a single set of x,y coordinates and a spatial reference. Learn more and a marker symbol A symbol defines the properties used to display a geometry or text. Learn more . A point is defined with longitude (x) and latitude (y) coordinates, and a simple symbol is defined with a color and outline. The Point and SimpleMarkerSymbol classes are used to create the point graphic.

If you would like to display graphics in a map with a spatial reference A spatial reference is a set of parameters, typically defined by a WKID, that define the coordinate system and spatial properties for geographic data. Applications use a spatial reference to correctly display the position of geographic data in a map or scene. Learn more other than WKID 102100, 3857, or 4326, you must specify the spatial reference when creating a point A point is a type of geometry containing a single set of x,y coordinates and a spatial reference. Learn more , line A polyline is a type of geometry containing ordered point coordinates and a spatial reference. Learn more , or polygon 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 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 . Otherwise, it can be omitted, and the map view’s spatial reference will be applied. Learn more about spatial references and coordinate systems in Spatial reference.

Create a point and simpleMarkerSymbol that will be used to create a Graphic.

42 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: Add a point, line, and polygon</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 center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const [Graphic, Map, GraphicsLayer] = await $arcgis.import([
      "@arcgis/core/Graphic.js",
      "@arcgis/core/Map.js",
      "@arcgis/core/layers/GraphicsLayer.js",
    ]);

    const viewElement = document.querySelector("arcgis-map");

    const graphicsLayer = new GraphicsLayer();

    viewElement.map = new Map({ basemap: "arcgis/topographic", layers: [graphicsLayer] });

    const point = {
      //Create a point
      type: "point",
      longitude: -118.80657463861,
      latitude: 34.0005930608889,
    };
    const simpleMarkerSymbol = {
      type: "simple-marker",
      color: [226, 119, 40], // Orange
      outline: {
        color: [255, 255, 255], // White
        width: 1,
      },
    };

5 collapsed lines
  </script>

</body>

</html>

Create a Graphic and set the geometry and symbol properties. The Graphic class will autocast point and simpleMarkerSymbol when it is constructed.

Point A point is a type of geometry containing a single set of x,y coordinates and a spatial reference. Learn more graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more support a number of symbol A symbol defines the properties used to display a geometry or text. Learn more types such as SimpleMarkerSymbol, PictureMarkerSymbol and TextSymbol. Learn more about symbols in the API documentation.

42 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: Add a point, line, and polygon</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 center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const [Graphic, Map, GraphicsLayer] = await $arcgis.import([
      "@arcgis/core/Graphic.js",
      "@arcgis/core/Map.js",
      "@arcgis/core/layers/GraphicsLayer.js",
    ]);

    const viewElement = document.querySelector("arcgis-map");

    const graphicsLayer = new GraphicsLayer();

    viewElement.map = new Map({ basemap: "arcgis/topographic", layers: [graphicsLayer] });

    const point = {
      //Create a point
      type: "point",
      longitude: -118.80657463861,
      latitude: 34.0005930608889,
    };
    const simpleMarkerSymbol = {
      type: "simple-marker",
      color: [226, 119, 40], // Orange
      outline: {
        color: [255, 255, 255], // White
        width: 1,
      },
    };

    const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol });
    graphicsLayer.add(pointGraphic);
6 collapsed lines

  </script>

</body>

</html>

Verify that the point graphic positioned at Point Dume Beach.

Add a line graphic

A line graphic A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more is created using a polyline A polyline is a type of geometry containing ordered point coordinates and a spatial reference. Learn more and a line symbol A symbol defines the properties used to display a geometry or text. Learn more . A polyline is defined as a sequence of points A point is a type of geometry containing a single set of x,y coordinates and a spatial reference. Learn more and a spatial reference A spatial reference is a set of parameters, typically defined by a WKID, that define the coordinate system and spatial properties for geographic data. Applications use a spatial reference to correctly display the position of geographic data in a map or scene. Learn more . The Polyline and SimpleLineSymbol classes are used to create a line graphic.

Define the polyline and simpleLineSymbol that will be used to create a Graphic.

57 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: Add a point, line, and polygon</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 center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const [Graphic, Map, GraphicsLayer] = await $arcgis.import([
      "@arcgis/core/Graphic.js",
      "@arcgis/core/Map.js",
      "@arcgis/core/layers/GraphicsLayer.js",
    ]);

    const viewElement = document.querySelector("arcgis-map");

    const graphicsLayer = new GraphicsLayer();

    viewElement.map = new Map({ basemap: "arcgis/topographic", layers: [graphicsLayer] });

    const point = {
      //Create a point
      type: "point",
      longitude: -118.80657463861,
      latitude: 34.0005930608889,
    };
    const simpleMarkerSymbol = {
      type: "simple-marker",
      color: [226, 119, 40], // Orange
      outline: {
        color: [255, 255, 255], // White
        width: 1,
      },
    };

    const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol });
    graphicsLayer.add(pointGraphic);

    // Create a line geometry
    const polyline = {
      type: "polyline",
      paths: [
        [-118.821527826096, 34.0139576938577], //Longitude, latitude
        [-118.814893761649, 34.0080602407843], //Longitude, latitude
        [-118.808878330345, 34.0016642996246], //Longitude, latitude
      ],
    };
    const simpleLineSymbol = {
      type: "simple-line",
      color: [226, 119, 40], // Orange
      width: 2,
    };
6 collapsed lines

  </script>

</body>

</html>

Create a Graphic and set the geometry and symbol properties. The Graphic class will autocast the polyline and simpleLineSymbol when it is created.

Polyline A polyline is a type of geometry containing ordered point coordinates and a spatial reference. Learn more graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more support a number of symbol A symbol defines the properties used to display a geometry or text. Learn more types such as SimpleLineSymbol and TextSymbol. Learn more about symbols in the API documentation.

60 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: Add a point, line, and polygon</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 center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const [Graphic, Map, GraphicsLayer] = await $arcgis.import([
      "@arcgis/core/Graphic.js",
      "@arcgis/core/Map.js",
      "@arcgis/core/layers/GraphicsLayer.js",
    ]);

    const viewElement = document.querySelector("arcgis-map");

    const graphicsLayer = new GraphicsLayer();

    viewElement.map = new Map({ basemap: "arcgis/topographic", layers: [graphicsLayer] });

    const point = {
      //Create a point
      type: "point",
      longitude: -118.80657463861,
      latitude: 34.0005930608889,
    };
    const simpleMarkerSymbol = {
      type: "simple-marker",
      color: [226, 119, 40], // Orange
      outline: {
        color: [255, 255, 255], // White
        width: 1,
      },
    };

    const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol });
    graphicsLayer.add(pointGraphic);

    // Create a line geometry
    const polyline = {
      type: "polyline",
      paths: [
        [-118.821527826096, 34.0139576938577], //Longitude, latitude
        [-118.814893761649, 34.0080602407843], //Longitude, latitude
        [-118.808878330345, 34.0016642996246], //Longitude, latitude
      ],
    };
    const simpleLineSymbol = {
      type: "simple-line",
      color: [226, 119, 40], // Orange
      width: 2,
    };

    const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol });
    graphicsLayer.add(polylineGraphic);
6 collapsed lines

  </script>

</body>

</html>

Verify that the line graphic positioned along Westward Beach.

Add a polygon graphic

A polygon graphic A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more is created using a polygon 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 a fill symbol A symbol defines the properties used to display a geometry or text. Learn more . A polygon is defined as a sequence of points A point is a type of geometry containing a single set of x,y coordinates and a spatial reference. Learn more (ring) that describe a closed boundary and a spatial reference A spatial reference is a set of parameters, typically defined by a WKID, that define the coordinate system and spatial properties for geographic data. Applications use a spatial reference to correctly display the position of geographic data in a map or scene. Learn more . The Polygon and SimpleFillSymbol classes are used to create and display a polygon graphic.

Define the polygon and simpleFillSymbol that will be used to create a Graphic

75 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: Add a point, line, and polygon</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 center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const [Graphic, Map, GraphicsLayer] = await $arcgis.import([
      "@arcgis/core/Graphic.js",
      "@arcgis/core/Map.js",
      "@arcgis/core/layers/GraphicsLayer.js",
    ]);

    const viewElement = document.querySelector("arcgis-map");

    const graphicsLayer = new GraphicsLayer();

    viewElement.map = new Map({ basemap: "arcgis/topographic", layers: [graphicsLayer] });

    const point = {
      //Create a point
      type: "point",
      longitude: -118.80657463861,
      latitude: 34.0005930608889,
    };
    const simpleMarkerSymbol = {
      type: "simple-marker",
      color: [226, 119, 40], // Orange
      outline: {
        color: [255, 255, 255], // White
        width: 1,
      },
    };

    const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol });
    graphicsLayer.add(pointGraphic);

    // Create a line geometry
    const polyline = {
      type: "polyline",
      paths: [
        [-118.821527826096, 34.0139576938577], //Longitude, latitude
        [-118.814893761649, 34.0080602407843], //Longitude, latitude
        [-118.808878330345, 34.0016642996246], //Longitude, latitude
      ],
    };
    const simpleLineSymbol = {
      type: "simple-line",
      color: [226, 119, 40], // Orange
      width: 2,
    };

    const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol });
    graphicsLayer.add(polylineGraphic);

    // Create a polygon geometry
    const polygon = {
      type: "polygon",
      rings: [
        [-118.818984489994, 34.0137559967283], //Longitude, latitude
        [-118.806796597377, 34.0215816298725], //Longitude, latitude
        [-118.791432890735, 34.0163883241613], //Longitude, latitude
        [-118.79596686535, 34.008564864635], //Longitude, latitude
        [-118.808558110679, 34.0035027131376], //Longitude, latitude
      ],
    };

    const simpleFillSymbol = {
      type: "simple-fill",
      color: [227, 139, 79, 0.8], // Orange, opacity 80%
      outline: { color: [255, 255, 255], width: 1 },
    };
6 collapsed lines

  </script>

</body>

</html>

Create a Graphic and set the geometry and symbol properties. The Graphic class will autocast the polygon and simpleFillSymbol when it is created.

Polygon 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 graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more support a number of Symbol types, such as SimpleFillSymbol, PictureFillSymbol, SimpleMarkerSymbol, and TextSymbol. It is also important to note that outer polygon ring coordinates should be added in clock-wise order, while inner ring coordinates (islands) should be added in counter-clockwise order.

78 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: Add a point, line, and polygon</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 center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const [Graphic, Map, GraphicsLayer] = await $arcgis.import([
      "@arcgis/core/Graphic.js",
      "@arcgis/core/Map.js",
      "@arcgis/core/layers/GraphicsLayer.js",
    ]);

    const viewElement = document.querySelector("arcgis-map");

    const graphicsLayer = new GraphicsLayer();

    viewElement.map = new Map({ basemap: "arcgis/topographic", layers: [graphicsLayer] });

    const point = {
      //Create a point
      type: "point",
      longitude: -118.80657463861,
      latitude: 34.0005930608889,
    };
    const simpleMarkerSymbol = {
      type: "simple-marker",
      color: [226, 119, 40], // Orange
      outline: {
        color: [255, 255, 255], // White
        width: 1,
      },
    };

    const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol });
    graphicsLayer.add(pointGraphic);

    // Create a line geometry
    const polyline = {
      type: "polyline",
      paths: [
        [-118.821527826096, 34.0139576938577], //Longitude, latitude
        [-118.814893761649, 34.0080602407843], //Longitude, latitude
        [-118.808878330345, 34.0016642996246], //Longitude, latitude
      ],
    };
    const simpleLineSymbol = {
      type: "simple-line",
      color: [226, 119, 40], // Orange
      width: 2,
    };

    const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol });
    graphicsLayer.add(polylineGraphic);

    // Create a polygon geometry
    const polygon = {
      type: "polygon",
      rings: [
        [-118.818984489994, 34.0137559967283], //Longitude, latitude
        [-118.806796597377, 34.0215816298725], //Longitude, latitude
        [-118.791432890735, 34.0163883241613], //Longitude, latitude
        [-118.79596686535, 34.008564864635], //Longitude, latitude
        [-118.808558110679, 34.0035027131376], //Longitude, latitude
      ],
    };

    const simpleFillSymbol = {
      type: "simple-fill",
      color: [227, 139, 79, 0.8], // Orange, opacity 80%
      outline: { color: [255, 255, 255], width: 1 },
    };

    const polygonGraphic = new Graphic({
      geometry: polygon,
      symbol: simpleFillSymbol,

    });
    graphicsLayer.add(polygonGraphic);
6 collapsed lines

  </script>

</body>

</html>

Verify that the polygon graphic positioned on Mahou Riviera.

Create a pop-up

You 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 for a graphic A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more when it is clicked. The code that creates the polygon 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 graphic to show a pop-up containing the name and description of the graphic uses the attribute and popupTemplate properties.

Define the popupTemplate and attributes before defining the polygonGraphic.

90 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: Add a point, line, and polygon</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 center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const [Graphic, Map, GraphicsLayer] = await $arcgis.import([
      "@arcgis/core/Graphic.js",
      "@arcgis/core/Map.js",
      "@arcgis/core/layers/GraphicsLayer.js",
    ]);

    const viewElement = document.querySelector("arcgis-map");

    const graphicsLayer = new GraphicsLayer();

    viewElement.map = new Map({ basemap: "arcgis/topographic", layers: [graphicsLayer] });

    const point = {
      //Create a point
      type: "point",
      longitude: -118.80657463861,
      latitude: 34.0005930608889,
    };
    const simpleMarkerSymbol = {
      type: "simple-marker",
      color: [226, 119, 40], // Orange
      outline: {
        color: [255, 255, 255], // White
        width: 1,
      },
    };

    const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol });
    graphicsLayer.add(pointGraphic);

    // Create a line geometry
    const polyline = {
      type: "polyline",
      paths: [
        [-118.821527826096, 34.0139576938577], //Longitude, latitude
        [-118.814893761649, 34.0080602407843], //Longitude, latitude
        [-118.808878330345, 34.0016642996246], //Longitude, latitude
      ],
    };
    const simpleLineSymbol = {
      type: "simple-line",
      color: [226, 119, 40], // Orange
      width: 2,
    };

    const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol });
    graphicsLayer.add(polylineGraphic);

    // Create a polygon geometry
    const polygon = {
      type: "polygon",
      rings: [
        [-118.818984489994, 34.0137559967283], //Longitude, latitude
        [-118.806796597377, 34.0215816298725], //Longitude, latitude
        [-118.791432890735, 34.0163883241613], //Longitude, latitude
        [-118.79596686535, 34.008564864635], //Longitude, latitude
        [-118.808558110679, 34.0035027131376], //Longitude, latitude
      ],
    };

    const simpleFillSymbol = {
      type: "simple-fill",
      color: [227, 139, 79, 0.8], // Orange, opacity 80%
      outline: { color: [255, 255, 255], width: 1 },
    };

    const popupTemplate = { title: "{Name}", content: "{Description}" };
    const attributes = { Name: "Graphic", Description: "I am a polygon" };
13 collapsed lines

    const polygonGraphic = new Graphic({
      geometry: polygon,
      symbol: simpleFillSymbol,

    });
    graphicsLayer.add(polygonGraphic);

  </script>

</body>

</html>

Update the polygonGraphic to include the popupTemplate and attribute properties.

99 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: Add a point, line, and polygon</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 center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const [Graphic, Map, GraphicsLayer] = await $arcgis.import([
      "@arcgis/core/Graphic.js",
      "@arcgis/core/Map.js",
      "@arcgis/core/layers/GraphicsLayer.js",
    ]);

    const viewElement = document.querySelector("arcgis-map");

    const graphicsLayer = new GraphicsLayer();

    viewElement.map = new Map({ basemap: "arcgis/topographic", layers: [graphicsLayer] });

    const point = {
      //Create a point
      type: "point",
      longitude: -118.80657463861,
      latitude: 34.0005930608889,
    };
    const simpleMarkerSymbol = {
      type: "simple-marker",
      color: [226, 119, 40], // Orange
      outline: {
        color: [255, 255, 255], // White
        width: 1,
      },
    };

    const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol });
    graphicsLayer.add(pointGraphic);

    // Create a line geometry
    const polyline = {
      type: "polyline",
      paths: [
        [-118.821527826096, 34.0139576938577], //Longitude, latitude
        [-118.814893761649, 34.0080602407843], //Longitude, latitude
        [-118.808878330345, 34.0016642996246], //Longitude, latitude
      ],
    };
    const simpleLineSymbol = {
      type: "simple-line",
      color: [226, 119, 40], // Orange
      width: 2,
    };

    const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol });
    graphicsLayer.add(polylineGraphic);

    // Create a polygon geometry
    const polygon = {
      type: "polygon",
      rings: [
        [-118.818984489994, 34.0137559967283], //Longitude, latitude
        [-118.806796597377, 34.0215816298725], //Longitude, latitude
        [-118.791432890735, 34.0163883241613], //Longitude, latitude
        [-118.79596686535, 34.008564864635], //Longitude, latitude
        [-118.808558110679, 34.0035027131376], //Longitude, latitude
      ],
    };

    const simpleFillSymbol = {
      type: "simple-fill",
      color: [227, 139, 79, 0.8], // Orange, opacity 80%
      outline: { color: [255, 255, 255], width: 1 },
    };

    const popupTemplate = { title: "{Name}", content: "{Description}" };
    const attributes = { Name: "Graphic", Description: "I am a polygon" };

    const polygonGraphic = new Graphic({
      geometry: polygon,
      symbol: simpleFillSymbol,

      attributes: attributes,
      popupTemplate: popupTemplate,

    });
    graphicsLayer.add(polygonGraphic);
6 collapsed lines

  </script>

</body>

</html>

Run the app

In CodePen, run your code to display the map.

The map should display all three graphics. When you click on the polygon, it should show a pop-up.

What’s next?

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