Display point, line, and polygon graphics

Overview

You will learn: how to build an app to create geometries and graphics from coordinates and add them to a map.

If you would like to display points, lines, polygons, and text in a map, you can usegraphicsand agraphic layer. Adding graphics to a graphics layer is a fast and easy way to display small amounts of temporary geographic data on a map. If you are working with larger amounts of data (>1000 records), you should consider importing your data as feature layer and adding it to a map. All graphics contain a geometry, symbol, and a set of attributes. Graphics are clickable so users can interact with them to view pop-ups with attribute and other information you would like to display. Learn more about working with graphics and features in the Draw graphics and Add, edit, and update features tutorials.

In this tutorial, you will add a point, line and polygon graphic to a graphics layer. The geometries will be created from the provided latitude and longitude coordinates.

Steps

Create a starter app

1. Open the JavaScript Starter App on CodePen.

2. In CodePen, click Fork and save the pen as ArcGIS JavaScript Tutorials: Display point, line, and polygon graphics.

Add a graphics layer

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

       require([
         "esri/Map",
         "esri/views/MapView",
         "esri/Graphic",
         "esri/layers/GraphicsLayer"
       ], function(Map, MapView, Graphic, GraphicsLayer) {
   

2. At the end of the code in the main function, create and add a GraphicsLayer to the map.

          var graphicsLayer = new GraphicsLayer();
          map.add(graphicsLayer);
   

Add a point graphic

1. Define a point and simpleMarkerSymbol object and use them to create a new point Graphic. The graphic will autocast the objects and create class instances when the graphic is created. After you create the graphic, add it to the graphicsLayer.

          var point = {
            type: "point",
            longitude: -118.80657463861,
            latitude: 34.0005930608889
          };
   
          var simpleMarkerSymbol = {
            type: "simple-marker",
            color: [226, 119, 40],  // orange
            outline: {
              color: [255, 255, 255], // white
              width: 1
            }
          };
   
          var pointGraphic = new Graphic({
            geometry: point,
            symbol: simpleMarkerSymbol
          });
   
          graphicsLayer.add(pointGraphic);
   

2. Run the app and you should see an orange point in Point Dume State Beach.

Add a line graphic

1. Define a line and simpleLineSymbol object and use them to create a new line Graphic. The graphic will autocast the objects and create class instances when the graphic is created. After you create the graphic, add it to the graphicsLayer.

          var simpleLineSymbol = {
            type: "simple-line",
            color: [226, 119, 40], // orange
            width: 2
          };
   
          var polyline = {
            type: "polyline",
            paths: [
              [-118.821527826096, 34.0139576938577],
              [-118.814893761649, 34.0080602407843],
              [-118.808878330345, 34.0016642996246]
            ]
          });
   
          var polylineGraphic = new Graphic({
            geometry: polyline,
            symbol: simpleLineSymbol
          })
   
          graphicsLayer.add(polylineGraphic);
   

2. Run the app and you should see an orange line along Westward Beach.

Add a polygon graphic

1. Define a polygon and simpleFillSymbol object and use them to create a new polygon Graphic. The graphic will autocast the objects and create class instances when the graphic is created. After you create the graphic, add it to the graphicsLayer.

          var polygon = {
            type: "polygon",
            rings: [
              [-118.818984489994, 34.0137559967283],
              [-118.806796597377, 34.0215816298725],
              [-118.791432890735, 34.0163883241613],
              [-118.79596686535, 34.008564864635],
              [-118.808558110679, 34.0035027131376]
            ]
          };
   
          var simpleFillSymbol = {
            type: "simple-fill",
            color: [227, 139, 79, 0.8],  // orange, opacity 80%
            outline: {
              color: [255, 255, 255],
              width: 1
            }
          };
   
          var polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simpleFillSymbol
          });
   
          graphicsLayer.add(polygonGraphic);
   

2. Run the app and you should see an orange polygon around Mahou Riviera.

Congratulations, you're done!

Your app should look something like this.

Challenge

Change the color and style of graphics

          var simpleMarkerSymbol = {
            //*** UPDATE ***//
            color: [0,150,50],
            outline: {
              color: [255, 255, 255],
              //*** UPDATE ***//
              width: 2
            },
            size: 10
          };

          var simpleLineSymbol = {
            //*** UPDATE ***//
            color: [255,0,0],
            width: 2,
            //*** ADD ***//
            style: "dash"
          };

          var simpleFillSymbol = {
            // *** UPDATE ***//
            color: [50,100,255,.5],
            outline: {
              color: [50, 100, 255],
              width: 1
            },
            //*** ADD ***//
            style: "backward-diagonal"
          };

Show a pop-up when a graphic is clicked

      var point = {
        type: "point",
        longitude: -118.29507,
        latitude: 34.13501
      };

      var simpleMarkerSymbol = {
        type: "simple-marker",
        color: [226, 119, 40],
        outline: {
          color: [255, 255, 255],
          width: 1
        }
      };

      //*** ADD ***//
      // Create attributes
      var attributes = {
        Name: "My point",  // The name of the
        Location: " Point Dume State Beach",  // The owner of the
      };
      // Create popup template
      var popupTemplate = {
        title: "{Name}",
        content: "I am located at <b>{Location}</b>."
      };

      var pointGraphic = new Graphic({
        geometry: point,
        symbol: simpleMarkerSymbol,
        //*** ADD ***//
        attributes: attributes,
        popupTemplate: popupTemplate
      });

      graphicsLayer.add(pointGraphic);

Show a pin and text label at a location

      // Add a blue location pin
      var pictureGraphic = new Graphic({
        geometry: {
          type: "point",
          longitude: -118.80657463861,
          latitude: 34.0005930608889
        },
        symbol: {
          type: "picture-marker",
          url: "https://developers.arcgis.com/labs/images/bluepin.png",
          width: "14px",
          height: "26px"
        }
      });

      graphicsLayer.add(pictureGraphic);

     // Add text below the pin
     var textGraphic = new Graphic({
       geometry: {
         type: "point",
          longitude: -118.80657463861,
          latitude: 34.0005930608889
       },
       symbol: {
          type: "text",
          color: [25,25,25],
          haloColor: [255,255,255],
          haloSize: "1px",
          text: "This is my location!",
          xoffset: 0,
          yoffset: -25,
          font: {
            size: 12
         }
       }
     });

     graphicsLayer.add(textGraphic);