Skip To Content ArcGIS for Developers Sign In Dashboard

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 use graphics and a graphic 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

You can apply different styles to graphics by changing the color and style properties of the Symbol. For more advanced styles, you can also choose a different symbol class for each geometry type. For example, for a point geometry, you can use the MarkerSymbol, SimpleMarkerSymbol, or PictureMarkerSymbol classes. Be sure to visit the documentation to explore all of the different symbol styles, types, and classes that can be used.

Change the point symbol to a dark green dot with a 2px width outline.

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

Change the line symbol to a red dashed line.

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

Change the polygon symbol to a blue, diagonal-fill, 50% transparent fill color.

          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

You can make graphics clickable and show a pop-up by setting the attributes and popupTemplate properties. Add the code below to show a pop-up when you click on the point graphic. Feel free to add similar code to make the other graphics clickable.

      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

If you would like to draw a pin or an image at a location, you can create and add a graphic with a PictureMarkerSymbol to the map. You can also display text by adding a graphic with a TextSymbol. Add the following code to create a picture marker symbol for a point on the map and a text label below.

      // 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);