Add a point, line, and polygon

Learn how to display point, line, and polygon graphics in a map.

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

In this tutorial, you will learn how to display points, lines, and polygons on a map as graphics.

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 esriConfig.apiKey to your access token.

Use dark colors for code blocks
  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 a require statement, to add the Graphic and GraphicsLayer modules.

The ArcGIS Maps SDK for JavaScript is available as AMD modules and ES modules, but this tutorial is based on AMD. The AMD require function uses references to determine which modules will be loaded – for example, you can specify "esri/layers/FeatureLayer" for loading the FeatureLayer module. After the modules are loaded, they are passed as parameters (e.g. FeatureLayer) to the callback function where they can be used in your application. It is important to keep the module references and callback parameters in the same order. To learn more about the API's different modules visit the Overview Guide page.

Expand
Use dark colors for code blocks
    <script>
      require(["esri/Graphic", "esri/layers/GraphicsLayer"], (Graphic, GraphicsLayer) => {

      });

    </script>
Expand

Add a graphics layer

A graphics layer is a container for graphics. It is used with a map view to display graphics on a map. You can add more than one graphics layer to a map. Graphics layers are displayed on top of all other layers.

Create and add a GraphicsLayer for displaying graphics on a map. When using the arcgis-map component, you need to add an event listener for arcgisViewReadyChange to wait until the component is ready.

Expand
Use dark colors for code blocks
    <script>
      require(["esri/Graphic", "esri/layers/GraphicsLayer"], (Graphic, GraphicsLayer) => {

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

        arcgisMap.addEventListener("arcgisViewReadyChange", () => {

          const graphicsLayer = new GraphicsLayer();
          arcgisMap.addLayer(graphicsLayer);

        });

      });

    </script>
Expand

Add a point graphic

A point graphic is created using a point and a marker symbol. 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 other than WKID 102100, 3857, or 4326, you must specify the spatial reference when creating a point, line, or polygon geometry. 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.

Expand
Use dark colors for code blocks
          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
            }
          };

Expand

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

Point graphics support a number of symbol types such as SimpleMarkerSymbol, PictureMarkerSymbol and TextSymbol. Learn more about symbols in the API documentation.

Expand
Use dark colors for code blocks
          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);
Expand

Verify that the point graphic positioned at Point Dume Beach.

Add a line graphic

A line graphic is created using a polyline and a line symbol. A polyline is defined as a sequence of points and a spatial reference. 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.

Expand
Use dark colors for code blocks
          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
          };
Expand

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

Polyline graphics support a number of symbol types such as SimpleLineSymbol and TextSymbol. Learn more about symbols in the API documentation.

Expand
Use dark colors for code blocks
          // 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);
Expand

Verify that the line graphic positioned along Westward Beach.

Add a polygon graphic

A polygon graphic is created using a polygon and a fill symbol. A polygon is defined as a sequence of points (ring) that describe a closed boundary and a spatial reference. 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

Expand
Use dark colors for code blocks
          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
            }
          };
Expand

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

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

Expand
Use dark colors for code blocks
          // 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);
Expand

Verify that the polygon graphic positioned on Mahou Riviera.

Create a pop-up

You can display a pop-up for a graphic when it is clicked. The code that creates the polygon graphic to show a pop-up containing the name and description of the graphic uses the attribute and popupTemplate properties.

In the arcgisViewReadyChange event listener, define the popupTemplate and attributes before defining the polygonGraphic.

Expand
Use dark colors for code blocks
          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"
          };
Expand

Update the polygonGraphic to include the popupTemplate and attribute properties.

Expand
Use dark colors for code blocks
          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simpleFillSymbol,

            attributes: attributes,
            popupTemplate: popupTemplate

          });
          graphicsLayer.add(polygonGraphic);
Expand

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 API features and ArcGIS services in these tutorials: