Overview

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

Applications can display point, line, and polygon graphics on a map. Graphics are composed of a geometry, a symbol, a set of attributes, and they can display a pop-up when clicked. Graphics are commonly created by interacting with the map or by creating small sets of data manually that you want to display on a map. Graphics can be added directly to the view, to a graphics layer, or to the source property of a feature layer. Learn more about displaying geographic data in the Layers and data topic and the Add layers to a map tutorial.

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

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.

Set the map location

  1. In the main function, update the existing code to position the view at Griffith Park in LA.
          var view = new MapView({
            container: "viewDiv",
            map: map,
            //*** ADD ***//
            center: [-118.27928,34.13558],
            zoom: 12
          });
    

Add a point graphic

  1. In the require statement, add the Graphic module.

        require([
          "esri/Map",
          "esri/views/MapView",
          //*** ADD ***//
          "esri/Graphic"
        ], function(Map, MapView, Graphic) {
    
  2. At the end of the code in the main function, 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. At the end, add the graphic to the view graphics. Learn more about autocasting in the documentation.

          var point = {
            type: "point",
            longitude: -118.29507,
            latitude: 34.13501
          };
    
          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
          });
    
          view.graphics.add(pointGraphic);
    
  3. Run the app and you should see an orange point in Griffith Park.

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. At the end, add the graphic to the view graphics. Learn more about autocasting in the documentation.

           var simpleLineSymbol = {
             type: "simple-line",
             color: [226, 119, 40], // orange
             width: 2
           };
    
           var polyline = new Polyline({
             paths: [
               [-118.29026, 34.1816],
               [-118.26451, 34.09664]
             ]
           });
    
           var polylineGraphic = new Graphic({
             geometry: polyline,
             symbol: simpleLineSymbol
           })
    
           view.graphics.add(polylineGraphic);
    
  2. Run the app and you should see an orange line next to Griffith Park.

Add a polygon graphic

  1. Define a polygon and simpleFillSymbol 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. At the end, add the graphic to the view graphics. Learn more about autocasting in the documentation.

           var polygon = {
             type: "polygon",
             rings: [
               [-118.27653, 34.15121],
               [-118.2446, 34.15462],
               [-118.22915, 34.14439],
               [-118.23327, 34.12279],
               [-118.25318, 34.10972],
               [-118.26486, 34.11625],
               [-118.27653, 34.15121]
             ]
           };
    
           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
           });
    
           view.graphics.add(polygonGraphic);
    
  2. Run the app and you should see an orange polygon next to Griffith Park.

Congratulations, you're done!

Your app should look something like this.

Challenge

Show a pop-up

Graphics can also contain attributes which can be displayed in pop-ups when users click on them. Attributes are defined as objects with properties and values. To display the values, you need to define a popupTemplate. These templates are handy because they let you format how the content (and values) are rendered.

Try adding the code below to show a pop-up for the point graphic. Feel free to apply similar code to the other graphics.

      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 ***//
      var attributes = {
        Name: "I am a point",
        Park: "Griffith Park",
        City: "Los Angeles"
      };

      //*** ADD ***//
      var popupTemplate = {
        title: "{Name}",
        content: "I live in <b>{Park}</b> in the city of <b>{City}</b>."
      };

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

      view.graphics.add(pointGraphic);

Add a picture marker symbol

If you would like to draw a pin or an image at a location, you can create and add a picture marker symbol to the map. Try adding this code to create a picture marker symbol for a point on the map.

     var pictureGraphic = new Graphic({
       geometry: {
         type: "point",
         x: -118.31,
         y: 34.182
       },
       symbol: {
         type: "picture-marker",
         url: "https://developers.arcgis.com/labs/images/bluepin.png",
         width: "14px",
         height: "26px"
       }
     });

     view.graphics.add(pictureGraphic);