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. For example, a GPS location.

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

Prerequisites

Steps

Create a new pen

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

Set the API key

To access ArcGIS services, you need an API key.

1. Go to your dashboard to get an API key.

2. In CodePen, set the apiKey to your key, so it can be used to access basemap layer and location services.

   Use dark colors for code blocks

       

   Change line

   1
   2
   3
   4
   esriConfig.apiKey = "YOUR_API_KEY";
   const map = new Map({
     basemap: "arcgis-topographic" // Basemap layer service
   });

Add modules

1. In the require statement, add the Graphic and GraphicsLayer modules.

   More info

   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/Map" for loading the Map module. After the modules are loaded, they are passed as parameters (e.g. Map) 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. For more information on the different types of modules, visit the Introduction to Tooling guide topic.

   Expand

   Use dark colors for code blocks

                                                                                                                                       

   Add line.Add line.Change line

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
     require([
       "esri/config",
       "esri/Map",
       "esri/views/MapView",
   
       "esri/Graphic",
       "esri/layers/GraphicsLayer"
   
       ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) {
   

   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 view. Graphics layers are displayed on top of all other layers.

1. Create and add a GraphicsLayer to store graphics.

   Expand

   Use dark colors for code blocks

                                                                                                                                       

   Add line.Add line.

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
     const view = new MapView({
       map: map,
       center: [-118.80500,34.02700], //Longitude, latitude
       zoom: 13,
       container: "viewDiv"
    });
   
    const graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);
   

   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.

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

   Expand

   Use dark colors for code blocks

                                                                                                                                       

   Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
    const graphicsLayer = new GraphicsLayer();
    map.add(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
       }
    };
   

   Expand

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

   More info

   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

                                                                                                                                       

   Add line.Add line.Add line.Add line.Add line.

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
    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

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

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

   Expand

   Use dark colors for code blocks

                                                                                                                                       

   Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
    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

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

   More info

   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

                                                                                                                                       

   Add line.Add line.Add line.Add line.Add line.

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
       // 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

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

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

   Expand

   Use dark colors for code blocks

                                                                                                                                       

   Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
    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

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

   More info

   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

                                                                                                                                       

   Add line.Add line.Add line.Add line.Add line.Add line.

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
    // 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

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

1. In the main function, define the popupTemplate and attributes.

   Expand

   Use dark colors for code blocks

                                                                                                                                       

   Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
    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

2. Update the polygonGraphic to include the popupTemplate and attribute properties.

   Expand

   Use dark colors for code blocks

                                                                                                                                       

   Add line.Add line.

   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
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
    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:

• Import data as a feature layer
• Create a new feature layer
• Add a feature layer
• Search for an address
• Find a route and directions