Intro to graphics

Graphics are an essential component of the ArcGIS Maps SDK for JavaScript. You can use them to display locations on a map with simple symbols or for displaying the results of a query or other method. The more comfortable you are with working with graphics, the more fluent you will become in working with geometries, layers, and Popups.

This tutorial will show you how to add simple graphics to a map, style them with a custom symbol, and add attributes to them.

Prior to completing the following steps, you should be familiar with views and Map. If necessary, complete the following tutorials first:

1. Create a simple map

First create a simple Map and reference it in a View. Your JavaScript may look something like the code below:

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
  // Create the Map
  const map = new Map({
    basemap: "hybrid"
  });

  // Create the MapView
  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-80, 35],
    zoom: 3
  });
});

2. Learn the properties of a graphic

Each graphic has the four main properties:

PropertyTypeDescription
geometryGeometryDefines the geometry or location of the graphic in real-world coordinates.
symbolSymbolDefines how the graphic will be rendered in the view.
attributesObjectContains data or properties that describe the feature represented by the graphic.
popupTemplatePopupTemplateAllows the user to access the graphic's attributes in a popup window.

The remaining steps will walk you through how to work with each one of these properties.

3. Create a line geometry

We want to add a line graphic to our map showing a generalized version of the proposed location of the Keystone Pipeline.

Require the Polyline module and create a new polyline geometry representing this location. You will use the paths property to add vertices to the line.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
  //
  // This is where you created a Map and MapView in the previous steps
  //

  // Create a line geometry with the coordinates of the line
  const polyline = {
    type: "polyline", // autocasts as new Polyline()
    paths: [[-111.3, 52.68], [-98, 49.5], [-93.94, 29.89]]
  };
});

4. Create a line symbol

Now that you have a geometry for the location of the pipeline, you need a symbol to render the line in the view. Create a line symbol for the pipeline with a SimpleLineSymbol.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
  //
  // This is where you created a Map, MapView,
  // and geometry in the previous steps
  //

  // Create a simple line symbol for rendering the line in the view
  const lineSymbol = {
    type: "simple-line", // autocasts as new SimpleLineSymbol()
    color: [226, 119, 40], // RGB color values as an array
    width: 4
  };
});

5. Create attributes to store in the graphic

Attributes can provide key information about the graphic that can enhance the usefulness of your application. In this step, we'll add three basic attributes to the line graphic: name, owner, length.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
  //
  // This is where you created a Map, MapView,
  // geometry, and symbol in the previous steps
  //

  // Create a simple object containing useful information relating to the feature
  const lineAtt = {
    Name: "Keystone Pipeline", // The name of the pipeline
    Owner: "TransCanada", // The owner of the pipeline
    Length: "3,456 km" // The length of the pipeline
  };
});

6. Create a graphic and assign its geometry, symbol and attributes

Require the Graphic module, create the graphic, and add it to the graphics property on the MapView

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
require(["esri/Map", "esri/views/MapView", "esri/Graphic"], (Map, MapView, Graphic) => {
  //
  // This is where you created a Map, MapView,
  // geometry, symbol, and attributes in the previous steps
  //

  // Create the graphic
  const polylineGraphic = new Graphic({
    geometry: polyline, // Add the geometry created in step 3
    symbol: lineSymbol, // Add the symbol created in step 4
    attributes: lineAtt // Add the attributes created in step 5
  });

  // Add the graphic to the view's default graphics view
  // If adding multiple graphics, use addMany and pass in the array of graphics.
  view.graphics.add(polylineGraphic);
});

7. Add a PopupTemplate to the graphic

Popups can give users access to all the attributes in a graphic. Setting a simple PopupTemplate will allow users to view the attributes of the feature when it is clicked in the view. For more information about how to work with Popups and PopupTemplate, see Intro to popups and other Popup samples.

Add a new PopupTemplate to the graphic. This step must either be done in the constructor for the graphic or prior to adding the graphic to the GraphicsLayer.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
require(["esri/Map", "esri/views/MapView", "esri/Graphic"], (Map, MapView, Graphic) => {
  //
  // This is where you created a Map, MapView,
  // geometry, symbol, and attributes in the previous steps
  //

  // Create the graphic
  const polylineGraphic = new Graphic({
    geometry: polyline, // Add the geometry created in step 4
    symbol: lineSymbol, // Add the symbol created in step 5
    attributes: lineAtt, // Add the attributes created in step 6
    popupTemplate: {
      title: "{Name}",
      content: [
        {
          type: "fields",
          fieldInfos: [
            {
              fieldName: "Name"
            },
            {
              fieldName: "Owner"
            },
            {
              fieldName: "Length"
            }
          ]
        }
      ]
    }
  });

  // Add the graphic to the view's default graphics view
  view.graphics.add(polylineGraphic);
});

8. Conclusion

Now you have a simple map showing the location of the Keystone pipeline. You can click the line and view the attributes you added to the graphic.

Your final JavaScript code should look like the following:

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
require(["esri/Map", "esri/views/MapView", "esri/Graphic"], (Map, MapView, Graphic) => {
  const map = new Map({
    basemap: "hybrid"
  });

  const view = new MapView({
    center: [-80, 35],
    container: "viewDiv",
    map: map,
    zoom: 3
  });

  // First create a line geometry (this is the Keystone pipeline)
  const polyline = {
    type: "polyline", // autocasts as new Polyline()
    paths: [[-111.3, 52.68], [-98, 49.5], [-93.94, 29.89]]
  };

  // Create a symbol for drawing the line
  const lineSymbol = {
    type: "simple-line", // autocasts as SimpleLineSymbol()
    color: [226, 119, 40],
    width: 4
  };

  // Create an object for storing attributes related to the line
  const lineAtt = {
    Name: "Keystone Pipeline",
    Owner: "TransCanada",
    Length: "3,456 km"
  };

  /*******************************************
   * Create a new graphic and add the geometry,
   * symbol, and attributes to it. You may also
   * add a simple PopupTemplate to the graphic.
   * This allows users to view the graphic's
   * attributes when it is clicked.
   ******************************************/
  const polylineGraphic = new Graphic({
    geometry: polyline,
    symbol: lineSymbol,
    attributes: lineAtt,
    popupTemplate: {
      // autocasts as new PopupTemplate()
      title: "{Name}",
      content: [
        {
          type: "fields",
          fieldInfos: [
            {
              fieldName: "Name"
            },
            {
              fieldName: "Owner"
            },
            {
              fieldName: "Length"
            }
          ]
        }
      ]
    }
  });

  // Add the line graphic to the view's GraphicsLayer
  view.graphics.add(polylineGraphic);
});

Adding graphics to a GraphicsLayer is convenient when working with features of various geometry types. If working exclusively with graphics of the same geometry type, however, we recommend you use a client-side FeatureLayer to take advantage of its rendering and querying capabilities. See the Create a FeatureLayer with client side graphics sample for an example of how to do this.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.