Overview

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

With the ArcGIS API for JavaScript it's easy to add graphics to the view that represent geographic features. Graphics always live in their own container (layer) and are commonly positioned on top of all of the other layers. They have a single geometry type (point, line or polygon) and a unique symbol style. Graphics can be created interactively by listening mouse or touch events or manually by providing the map coordinates.

In this lab, you will build a simple app that adds a point, line and polygon feature and then adds them to the graphics layer in the view. The shapes will be created directly from latitude and longitude coordinates.

Steps

Create a starter app

  1. Go to the JavaScript Starter App.

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

Set the map location

  1. In the function, update the existing code to zoom to 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, Point and SimpleMarkerSymbol modules.

    require([
      "esri/Map",
      "esri/views/MapView",
      //*** ADD ***//
      "esri/Graphic",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol",
      "dojo/domReady!"
    ], function(Map, MapView,
          //*** ADD ***//
          Graphic, Point, SimpleMarkerSymbol
    ) {
    
  2. In the function, add code to create a point geometry and marker symbol and then assign these to the graphic. Add the graphic to the view graphics.

      //*** ADD ***//
      // Create a point
      var point = new Point({
        longitude: -118.29507,
        latitude: 34.13501
      });
    
      // Create a symbol for drawing the point
      var markerSymbol = new SimpleMarkerSymbol({
        color: [226, 119, 40],
        outline: {
          color: [255, 255, 255],
          width: 1
        }
      });
    
      // Create a graphic and add the geometry and symbol to it
      var pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol
      });
    
      // Add the graphic to the view
      view.graphics.add(pointGraphic);
    
  3. Run the app and you should see a point graphic in Griffith Park.

Add a line graphic

  1. In the require statement, add the Polyline and SimpleLineSymbo modules.

    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol",
      //*** ADD ***//
      "esri/geometry/Polyline",
      "esri/symbols/SimpleLineSymbol",
      "dojo/domReady!"
    ], function(Map, MapView,
          Graphic, Point, SimpleMarkerSymbol,
          //*** ADD ***//
          Polyline, SimpleLineSymbol
    ) {
    
  2. In the function, add code to create a line geometry and line symbol and then assign these to the graphic. Add the graphic to the view graphics.

       //*** ADD ***//
       // Create a line geometry
       var polyline = new Polyline({
         paths: [
           [-118.29026, 34.1816],
           [-118.26451, 34.09664]
         ]
       });
    
       // Create a symbol for drawing the line
       var lineSymbol = new SimpleLineSymbol({
         color: [226, 119, 40],
         width: 4
       });
    
       // Create a line graphic
       var polylineGraphic = new Graphic({
         geometry: polyline,
         symbol: lineSymbol
       })
    
       // Add the graphic to the view
       view.graphics.add(polylineGraphic);
    
  3. Run the app and you should see the line graphic next to Griffith Park.

Add a polygon graphic

  1. In the require statement, add the Polyline and SimpleLineSymbo modules.

    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/geometry/Polyline",
      "esri/symbols/SimpleLineSymbol",
      //*** ADD ***//
      "esri/geometry/Polygon",
      "esri/symbols/SimpleFillSymbol",
      "dojo/domReady!"
    ], function(Map, MapView,
          Graphic, Point, SimpleMarkerSymbol,
          Polyline, SimpleLineSymbol
          //*** ADD ***//
          Polygon, SimpleFillSymbol
    ) {
    
  2. In the function, add code to create a polygon geometry and fill symbol and then assign these to the graphic. Add the graphic to the view graphics.

      //*** ADD ***//
      // Create a polygon geometry
      var polygon = new 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]
        ]
      });
    
      // Create a symbol for rendering the graphic
      var fillSymbol = new SimpleFillSymbol({
        color: [227, 139, 79, 0.8],
        outline: {
          color: [255, 255, 255],
          width: 1
        }
      });
    
      // Add the geometry and symbol to a new graphic
      var polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: fillSymbol
      });
    
      // Add the graphic to the view
      view.graphics.add(polygonGraphic);
    
  3. Run the app and you should see the polygon graphic 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 just an object of properties and values. To display the property values, you also need to define a popupTemplate. These templates are handy because they let you format how the content (and the attribute values) are rendered in the popup.

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

  //*** ADD ***//
  // Create attributes
  var attributes = {
    Name: "I am a point",
    Park: "Griffith Park",
    City: "Los Angeles"
  };

  // Create pop-up template
  var popupTemplate = {
    title: "{Name}",
    content: "I am located in <b>{Park}</b> in the city of <b>{City}</b>."
  };

  // Create a graphic and add the geometry and symbol to it
  var pointGraphic = new Graphic({
    geometry: point,
    symbol: markerSymbol,
    //*** ADD ***//
    attributes: attributes,
    popupTemplate: popupTemplate
  });

Add a picture marker symbol

In order 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);