Add a point, line, and polygon

Learn how to display point, line, and polygon graphics in a map.

You typically use graphics to display geographic data that is not connected to a database and that is not persisted, like highlighting a route between two locations, displaying a search buffer around a point, or tracking the location of a vehicle in real-time. Graphics are composed of a geometry, symbol, and attributes.

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

To learn how to display data from data sources, see the Add a feature layer tutorial.

Prerequisites

Choose your API

You can do this tutorial in C++ or QML. Make your selection below:

• Steps for C++
• Steps for QML

Steps for C++

Open the project in Qt Creator

1. To start this tutorial, complete the Display a map tutorial or download and unzip the solution.

2. Open the display_a_map project in Qt Creator.

3. If you downloaded the solution, get an access token and set your API key.

   Instructions to set the API Key

   An API Key gives your app access to secure resources used in this tutorial.

   1. Go to the Create an API key tutorial to obtain a new API key access token using your ArcGIS Location Platform or ArcGIS Online account. Ensure that the following privilege is enabled: Location services > Basemaps > Basemap styles service. Copy the access token as it will be used in the next step.

   2. In the Projects window, in the Sources folder, open the main.cpp file.

   3. Modify the code to set the API key to the access token. Save and close the file.

      main.cpp

      Expand

      Use dark colors for code blocks

      42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 43 44 45 46 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47

      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
          // 2. API key authentication: Get a long-lived access token that gives your application access to
          // ArcGIS location services. Go to the tutorial at https://links.esri.com/create-an-api-key.
          // Copy the API Key access token.
      
          const QString accessToken = QString("");
      

      Expand

Add GraphicsOverlay class, declare member function

GraphicsOverlay is a container for temporary graphics to display on your map view. The graphics drawn in graphics overlays are created at runtime and are not persisted when your application closes. Learn more about GraphicsOverlay.

1. In the display_a_map project, double click Headers > Display_a_map.h to open the file. Add the GraphicsOverlay class to the namespace ArcGISRuntime declaration.

   Display_a_map.h

   Expand

   Use dark colors for code blocks

   17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 18 19 20 21 22 23 24 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 24 23 23 23 23 23 23 23 23

   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
   namespace Esri
   {
   namespace ArcGISRuntime
   {
   class Map;
   class MapQuickView;
   
   class GraphicsOverlay;
   

   Expand

2. Add the createGraphics public member function declaration. Then save and close the header file.

   Display_a_map.h

   Expand

   Use dark colors for code blocks

   45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 46 47 48 49 50 51 51 51 51 51 51 51 51 51

   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
   private:
     Esri::ArcGISRuntime::MapQuickView* mapView() const;
     void setMapView(Esri::ArcGISRuntime::MapQuickView* mapView);
     void setupViewpoint();
   
     void createGraphics(Esri::ArcGISRuntime::GraphicsOverlay* overlay);
   

   Expand

Create a graphics overlay

A graphics overlay is a container for graphics. It is added to a map view to display graphics on a map. You can add more than one graphics overlay to a map view. Graphics overlays are displayed on top of all the other layers.

1. Double click on Sources > Display_a_map.cpp to open the file. Include the five classes shown.

   Display_a_map.cpp

   Expand

   Use dark colors for code blocks

   14 14 14 14 14 14 14 14 14 14 14 14 14 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 27 26 25 24 24 24 24 24 24 24 24 24 24 24 23 22 21 19 17 15 13 11 9 7 5 3 1 -1 -3 -5 -7 -9 -11 -13 -15 -17 -19 -21 -23 -25 -27 -29 -31 -33 -35 -37 -39 -41 -43 -45 -47 -49 -51 -53 -55 -57 -59 -61 -63 -65 -67 -68

   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
   #include "Display_a_map.h"
   #include "ArcGISRuntimeEnvironment.h"
   
   #include "Basemap.h"
   
   #include "Map.h"
   #include "MapQuickView.h"
   
   #include "GraphicsOverlay.h"
   #include "PolylineBuilder.h"
   #include "PolygonBuilder.h"
   #include "SimpleMarkerSymbol.h"
   #include "SimpleFillSymbol.h"
   #include "SimpleFillSymbol.h"
   

   Expand

2. In the Display_a_map::setMapView member function, add three lines of code to create a GraphicsOverlay, call the createGraphics method (implemented in following steps), and append the overlay to the map view.

   Display_a_map.cpp

   Expand

   Use dark colors for code blocks

   50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 67 67 67 67 67 67 67 67 66 65 64 62 60 58 56 54 52 50 48 46 44 42 40 38 36 34 32 30 28 26 24 22 20 18 16 14 12 10 8 6 4 2 0 -2 -4 -6 -8 -10 -12 -14 -16 -18 -20 -22 -24 -25

   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
   void Display_a_map::setMapView(MapQuickView* mapView)
   {
     if (!mapView || mapView == m_mapView)
     {
       return;
     }
   
     m_mapView = mapView;
     m_mapView->setMap(m_map);
     setupViewpoint();
   
     GraphicsOverlay* overlay = new GraphicsOverlay(this);
     createGraphics(overlay);
     m_mapView->graphicsOverlays()->append(overlay);
   
     emit mapViewChanged();
   }
   

   Expand

3. Create a new method named Display_a_map::createGraphics, right after the Display_a_map::setupViewpoint method.

   Display_a_map.cpp

   Expand

   Use dark colors for code blocks

   68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 69 70 71 72 73 74 75 76 77 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 78 79

   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
   void Display_a_map::setupViewpoint()
   {
     const Point center(-118.80543, 34.02700, SpatialReference::wgs84());
     const Viewpoint viewpoint(center, 100000.0);
     m_mapView->setViewpoint(viewpoint);
   }
   
   void Display_a_map::createGraphics(GraphicsOverlay *overlay)
   {
   
   }

Add a point graphic

A point graphic is created using a point and a marker symbol. A point is defined with x and y coordinates for longitude and latitude coordinates, and a spatial reference. The spatial reference is WGS84.

1. Create a Point and a SimpleMarkerSymbol. To create the Point, provide longitude (x) and latitude (y) coordinates, and a SpatialReference.

   More info

   Point graphics support a number of symbol types such as SimpleMarkerSymbol, PictureMarkerSymbol and TextSymbol. See Symbol in the API documentation to learn more about symbols.

   Display_a_map.cpp

   Expand

   Use dark colors for code blocks

   68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 89 88 87 86 85 84 83 82 81 80 79 78 77 76 75 74 73 72 71 70 69 68 67 66 65 64 63 62 61 60 59 58 57 57

   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
   void Display_a_map::setupViewpoint()
   {
     const Point center(-118.80543, 34.02700, SpatialReference::wgs84());
     const Viewpoint viewpoint(center, 100000.0);
     m_mapView->setViewpoint(viewpoint);
   }
   
   void Display_a_map::createGraphics(GraphicsOverlay *overlay)
   {
   
     // Create a point
     const Point dume_beach(-118.80657463861, 34.0005930608889, SpatialReference::wgs84());
     // Create symbols for the point
     SimpleLineSymbol* point_outline = new SimpleLineSymbol(SimpleLineSymbolStyle::Solid, QColor(Qt::blue), 3, this);
     SimpleMarkerSymbol* point_symbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle::Circle, QColor(Qt::red), 10, this);
     point_symbol->setOutline(point_outline);
   
     // Create a graphic to display the point with its symbology
     Graphic* point_graphic = new Graphic(dume_beach, point_symbol, this);
     // Add point graphic to the graphics overlay
     overlay->graphics()->append(point_graphic);
   

   Expand

2. Press Ctrl + R to run the app.

You should see a point graphic at Point Dume State Beach, California.

Add a polyline graphic

A line graphic is created using a polyline and a line symbol. A polyline is defined as a sequence of points.

1. Create a Polyline and a SimpleLineSymbol.

   To create the Polyline, create a new PointCollection with a SpatialReference and use PolylineBuider to add a new Points to it. Add the highlighted code.

   Display_a_map.cpp

   Expand

   Use dark colors for code blocks

   85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 102 101 100 99 98 97 96 95 94 93 92 91 90 89 88 87 86 85 84 83 83

   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
     // Create a graphic to display the point with its symbology
     Graphic* point_graphic = new Graphic(dume_beach, point_symbol, this);
     // Add point graphic to the graphics overlay
     overlay->graphics()->append(point_graphic);
   
     // Create a line
     PolylineBuilder* polyline_builder = new PolylineBuilder(SpatialReference::wgs84(), this);
     polyline_builder->addPoint(-118.8215, 34.0140);
     polyline_builder->addPoint(-118.8149, 34.0081);
     polyline_builder->addPoint(-118.8089, 34.0017);
     // Create a symbol for the line
     SimpleLineSymbol* line_symbol = new SimpleLineSymbol(SimpleLineSymbolStyle::Solid, QColor(Qt::blue), 3, this);
   
     // Create a graphic to display the line with its symbology
     Graphic* polyline_graphic = new Graphic(polyline_builder->toGeometry(), line_symbol, this);
     // Add line graphic to the graphics overlay
     overlay->graphics()->append(polyline_graphic);
   

   Expand

2. Press Ctrl + R to run the app.

You should see a point and a line graphic 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 that describe a closed boundary.

1. Create a Polygon and a SimpleFillSymbol. To create the Polygon, create a new PointCollection with a SpatialReference and use PolygonBuilderto add new Points to it. Add the highlighted code.

   Display_a_map.cpp

   Expand

   Use dark colors for code blocks

   98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 121 121

   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
     // Create a graphic to display the line with its symbology
     Graphic* polyline_graphic = new Graphic(polyline_builder->toGeometry(), line_symbol, this);
     // Add line graphic to the graphics overlay
     overlay->graphics()->append(polyline_graphic);
   
     // Create a list of points to make up the polygon
     const QList<Point> points = {
       Point(-118.8190, 34.0138),
       Point(-118.8068, 34.0216),
       Point(-118.7914, 34.0164),
       Point(-118.7960, 34.0086),
       Point(-118.8086, 34.0035),
     };
     // Create a polygon using the list of points above
     PolygonBuilder* polygon_builder = new PolygonBuilder(SpatialReference::wgs84(), this);
     polygon_builder->addPoints(points);
     // Create symbols for the polygon
     SimpleLineSymbol* polygon_line_symbol = new SimpleLineSymbol(SimpleLineSymbolStyle::Solid, QColor(Qt::blue), 3, this);
     SimpleFillSymbol* fill_symbol = new SimpleFillSymbol(SimpleFillSymbolStyle::Solid, QColor(Qt::yellow), polygon_line_symbol, this);
     // Create a graphic to display the polygon with its symbology
     Graphic* polygon_graphic = new Graphic(polygon_builder->toGeometry(), fill_symbol, this);
     // Add polygon graphic to the graphics overlay
     overlay->graphics()->append(polygon_graphic);
   

   Expand

2. Press Ctrl + R to run the app.

You should see a point, line, and polygon graphic around Mahou Riviera in the Santa Monica Mountains.

To explore other tutorials, see What's next.

Steps for QML

Open the project in Qt Creator

1. To start this tutorial, complete the Display a map tutorial or download and unzip the solution.

2. Open the display_a_map project in Qt Creator.

3. If you downloaded the solution, get an access token and set your API key.

   Instructions to set the API Key

   An API Key gives your app access to secure resources used in this tutorial.

   1. Go to the Create an API key tutorial to obtain a new API key access token using your ArcGIS Location Platform or ArcGIS Online account. Ensure that the following privilege is enabled: Location services > Basemaps > Basemap styles service. Copy the access token as it will be used in the next step.

   2. In the Projects window, in the Sources folder, open the main.cpp file.

   3. Modify the code to set the API key to the access token. Save and close the file.

      main.cpp

      Expand

      Use dark colors for code blocks

      42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 43 44 45 46 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47

      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
          // 2. API key authentication: Get a long-lived access token that gives your application access to
          // ArcGIS location services. Go to the tutorial at https://links.esri.com/create-an-api-key.
          // Copy the API Key access token.
      
          const QString accessToken = QString("");
      

      Expand

Add a GraphicsOverlay

GraphicsOverlay is a container for temporary graphics to display on your map view. The graphics drawn in graphics overlays are created at runtime and are not persisted when your application closes. Learn more about GraphicsOverlay.

1. If the main.qml file is not already open, in the Projects window, navigate to Resources > qml\qml.qrc > /qml and open main.qml.

2. Add the GraphicsOverlay type, giving it the id as shown.

   main.qml

   Expand

   Use dark colors for code blocks

   32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 32 33 34 35 36 37 38 39 40 41 41 41 41 41 41 41 41 41 41 41 41 41 41 40 39 38 37 36 35 34 33 32 31 30 29 28 27 26 25 24 23 22 21 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0 -1 -2 -3 -4 -5 -7 -9 -11 -13 -15 -17 -19 -21 -23 -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 -53

   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
   133
   134
   135
   136
   137
   138
   139
           Map {
               // add the ArcGISStreets basemap to the map
               initBasemapStyle: Enums.BasemapStyleArcGISTopographic
               initialViewpoint: viewPoint
           }
   
           GraphicsOverlay {
               id: graphicsOverlay
           }
   

   Expand

Add point graphic

A Point defines a specific location, defined by an x,y coordinate pair, and a SpatialReference. Points represent discrete locations or entities, such as a geocoded house address, the location of a water meter in a water utility network, a moving vehicle, and so on. A point can also be used in a Viewpoint to define the center of the display, as in this tutorial app.

1. Add the following Point to identify Point Dume Beach.

   More info

   Point graphics support a number of symbol types such as SimpleMarkerSymbol, PictureMarkerSymbol and TextSymbol. See Symbol in the API documentation to learn more about symbols.

   main.qml

   Expand

   Use dark colors for code blocks

   42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 60 59 58 57 56 55 54 53 52 51 50 49 48 47 46 45 44 43 42 41 40 39 38 37 36 35 34 33 32 31 30 29 28 27 26 25 24 23 22 21 19 17 15 13 11 9 7 5 3 1 0 -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 -27

   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
   133
   134
   135
   136
   137
   138
   139
           ViewpointCenter {
               id: viewPoint
               center: Point {
                   x: -118.80543
                   y: 34.02700
                   spatialReference: SpatialReference {wkid: 4326}
               }
       // Specify the scale
           targetScale: 100000.0
           }
       }
   
       Point {
           id: dume_beach
           x: -118.80657463861
           y: 34.0005930608889
           spatialReference: SpatialReference {wkid: 4326}
       }
   

   Expand

2. Create a SimpleMarkerSymbol symbol to display the point. Add the following code to create a small, round, red symbol. Also set the outline property to line_symbol, created in the next step.

   More info

   Symbols define how graphics and features appear on a map. Different symbols are used with different geometry types. A SimpleMarkerSymbol displays a predefined marker such as circle, cross, and so on. A simple marker symbol can also have an optional outline, defined by a SimpleLineSymbol, as in this tutorial.

   main.qml

   Expand

   Use dark colors for code blocks

   54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 68 67 66 65 64 63 62 61 60 59 58 57 56 55 54 53 52 51 50 49 48 47 46 45 44 43 42 41 40 39 38 37 35 33 31 29 27 25 23 21 19 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0 -1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -11

   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
   133
   134
   135
   136
   137
   138
   139
       Point {
           id: dume_beach
           x: -118.80657463861
           y: 34.0005930608889
           spatialReference: SpatialReference {wkid: 4326}
       }
   
       SimpleMarkerSymbol {
           id: point_symbol
           style: Enums.SimpleMarkerSymbolStyleCircle
           color: "red"
           size: 10
           outline: line_symbol
       }
   

   Expand

   A SimpleLineSymbol is used to display a graphic or feature based on polyline geometries. Simple line symbols display predefined line style patterns, such as solid, dash, dot, and so on. Use a simple line symbol to add an outline to a marker symbol or polygon.

3. Create a SimpleLineSymbol to add an outline to the marker symbol.

   main.qml

   Expand

   Use dark colors for code blocks

   61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 76 75 74 73 72 71 70 69 68 67 66 65 64 63 62 61 60 59 58 57 56 55 54 53 51 49 47 45 43 41 39 37 35 33 32 31 30 29 28 27 26 25 24 23 22 21 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 5

   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
   133
   134
   135
   136
   137
   138
   139
       SimpleMarkerSymbol {
           id: point_symbol
           style: Enums.SimpleMarkerSymbolStyleCircle
           color: "red"
           size: 10
           outline: line_symbol
       }
   
       SimpleLineSymbol {
           id: line_symbol
           style: Enums.SimpleLineSymbolStyleSolid
           color: "blue"
           width: 3
           antiAlias: true
       }
   

   Expand

4. Add the Component.onCompleted code shown below. This code executes only after all of the components added to the ApplicationWindow have completed instantiation. This Component.onCompleted code block could be added anywhere as long as it is a child of ApplicationWindow. This first part creates a point graphic (using a function we implement in the next step) and appends it to the graphics overlay.

   main.qml

   Expand

   Use dark colors for code blocks

   69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 70 71 72 73 74 75 76 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 78 79 80 81 82 82 82 82 82 82 82 82 82 82 82 83 83 82 81 80 79 78 77 76 75 74 73 72 71 70 69 68 67 66 65 64 63 62 61 60 59 58 57 57

   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
   133
   134
   135
   136
   137
   138
   139
       SimpleLineSymbol {
           id: line_symbol
           style: Enums.SimpleLineSymbolStyleSolid
           color: "blue"
           width: 3
           antiAlias: true
       }
   
       Component.onCompleted: {
           // add a point
           const point_graphic = createGraphic(dume_beach, point_symbol);
           graphicsOverlay.graphics.append(point_graphic);
   
       }
   

   Expand

5. Add the following createGraphic function to create an ArcGISRuntimeEnvironment Qml object of type Graphic. This function takes geometry and symbol as property arguments and is called inside of Component.onCompleted to create each of the three graphics in this app.

   main.qml

   Expand

   Use dark colors for code blocks

   95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 94 93 92 91 90 89 88 87 86 85 84 83 82 81 80 79 78 77 78 79 80 81 82 82 82 82 82 82 82 82 82 82 82 83 84 85 86 87 88 89 90 90 89 88 87 86 85 84 83 82 81 80 79 78 77 76 75 74 73 72 71 71

   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
   133
   134
   135
   136
   137
   138
   139
       Component.onCompleted: {
           // add a point
           const point_graphic = createGraphic(dume_beach, point_symbol);
           graphicsOverlay.graphics.append(point_graphic);
   
       }
   
       function createGraphic(geometry, symbol) {
           const graphic = ArcGISRuntimeEnvironment.createObject("Graphic");
           graphic.geometry = geometry;
           graphic.symbol = symbol;
           return graphic;
       }
   

   Expand

6. Press Ctrl + R to run the app.

You should see a point graphic at Point Dume State Beach, California.

Add a polyline graphic

A connected sequence of points defines a polyline. Use a polyline and a line symbol to create a line graphic.

1. To create a polyline, add the following function to create a JSON object line1, with line segments and a spatial reference, and then call ArcGISRuntimeEnvironment.createObject to create the Qml object.

   main.qml

   Expand

   Use dark colors for code blocks

   112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 112 111 110 109 108 107 106 105 104 103 102 101 100 99 98 97 96 95 94 94 94 94 94 94 93 92 91 90 89 88 87 86 85 84 84 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 99 98 97 96 95 94 93 92 91 90 89 89

   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
   133
   134
   135
   136
   137
   138
   139
       function createGraphic(geometry, symbol) {
           const graphic = ArcGISRuntimeEnvironment.createObject("Graphic");
           graphic.geometry = geometry;
           graphic.symbol = symbol;
           return graphic;
       }
   
       function createLine() {
           // create polyline using json
           const line1 = {"paths":[[[-118.8215, 34.0140],
                                    [-118.8149, 34.0081],
                                    [-118.8089, 34.0017]]],
                                    "spatialReference":{"wkid":4326}};
           return ArcGISRuntimeEnvironment.createObject("Polyline", {"json": line1});
       }
   

   Expand

2. Now modify Component.onCompleted to create the line graphic from the object and append it to the graphics overlay.

   main.qml

   Expand

   Use dark colors for code blocks

   95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 95 94 93 92 91 90 89 88 87 86 85 84 83 82 81 80 79 78 77 78 79 80 81 82 83 84 85 86 86 85 84 83 82 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 81 80 79 78 77 76 75 74 73 72 71 71

   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
   133
   134
   135
   136
   137
   138
   139
       Component.onCompleted: {
           // add a point
           const point_graphic = createGraphic(dume_beach, point_symbol);
           graphicsOverlay.graphics.append(point_graphic);
   
           // add line
           const line = createLine();
           const line_graphic = createGraphic(line, line_symbol);
           graphicsOverlay.graphics.append(line_graphic);
   

   Expand

3. Press Ctrl + R to run the app.

You should see a point and a line centered around Mahou Riviera in the Santa Monica Mountains.

Add a polygon graphic

Create a polygon graphic using a polygon and a fill symbol. A connected sequence of points that describe a closed boundary defines a polygon.

1. A PolygonBuilder is a helper QML type used to create polygons. Use polygon_builder in a later step to connect a series of points and create the polygon. Add the following code to instantiate a PolygonBuilder.

   main.qml

   Expand

   Use dark colors for code blocks

   69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 70 71 72 73 74 75 76 77 78 79 80 81 81 80 79 78 77 76 75 74 73 72 71 70 69 68 68 68 68 68 68 68 68 68 68 68 67 66 65 64 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 62 61 60 59 58 57 56 55 54 53 53

   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
   133
   134
   135
   136
   137
   138
   139
       SimpleLineSymbol {
           id: line_symbol
           style: Enums.SimpleLineSymbolStyleSolid
           color: "blue"
           width: 3
           antiAlias: true
       }
   
       PolygonBuilder {
           id: polygon_builder
           spatialReference: SpatialReference {wkid: 4326}
       }
   

   Expand

2. The SimpleFillSymbol defines how to fill the interior of a polygon, and can have an optional outline defined by a SimpleLineSymbol. Add a simple fill symbol to fill the polygon with solid yellow, and use a simple line symbol to surround the polygon with a blue outline.

   main.qml

   Expand

   Use dark colors for code blocks

   77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 94 94 94 94 94 94 94 94 94 94 94 93 92 91 90 89 89 89 89 89 89 89 89 89 89 89 89 89 89 89 89 89 89 89 88 87 86 85 84 83 82 81 80 79 79

   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
   133
   134
   135
   136
   137
   138
   139
       PolygonBuilder {
           id: polygon_builder
           spatialReference: SpatialReference {wkid: 4326}
       }
   
       SimpleFillSymbol {
           id: polygon_fill_symbol
           style: Enums.SimpleFillSymbolStyleSolid
           color: "yellow"
   
           SimpleLineSymbol {
               style: Enums.SimpleLineSymbolStyleSolid
               color: "blue"
               width: 3
               antiAlias: true
           }
       }
   

   Expand

3. Add the following createPolygon function. It uses polygon_builder to create the polygon, consecutively adding and connecting five points to the polygon.

   main.qml

   Expand

   Use dark colors for code blocks

   119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 119 118 117 116 115 114 114 114 114 114 114 114 114 114 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 132 132

   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
   133
   134
   135
   136
   137
   138
   139
       function createLine() {
           // create polyline using json
           const line1 = {"paths":[[[-118.8215, 34.0140],
                                    [-118.8149, 34.0081],
                                    [-118.8089, 34.0017]]],
                                    "spatialReference":{"wkid":4326}};
           return ArcGISRuntimeEnvironment.createObject("Polyline", {"json": line1});
       }
   
       function createPolygon() {
           // create the polygon using the builder class
           polygon_builder.addPointXY(-118.8190, 34.0138);
           polygon_builder.addPointXY(-118.8068, 34.0216);
           polygon_builder.addPointXY(-118.7914, 34.0164);
           polygon_builder.addPointXY(-118.7960, 34.0086);
           polygon_builder.addPointXY(-118.8086, 34.0035);
           return polygon_builder.geometry;
       }
   

   Expand

4. Modify Component.onCompleted to create the polygon graphic from the JSON object, and then append the graphic to the graphics overlay.

   main.qml

   Expand

   Use dark colors for code blocks

   100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 100 101 102 103 104 105 106 107 108 109 110 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111

   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
   133
   134
   135
   136
   137
   138
   139
           // add line
           const line = createLine();
           const line_graphic = createGraphic(line, line_symbol);
           graphicsOverlay.graphics.append(line_graphic);
   
           // add polygon
           const polygon = createPolygon();
           const polygon_graphic = createGraphic(polygon, polygon_fill_symbol);
           graphicsOverlay.graphics.append(polygon_graphic);
   
       }
   

   Expand

5. Press Ctrl + R to run the app.

You should see a point, a line, and a polygon centered around Mahou Riviera in the Santa Monica Mountains.

What's next?

Learn how to use additional API features, ArcGIS location services, and ArcGIS tools in these tutorials:

Not all tutorials listed have instructions for QML.

• Add a feature layer
• Search for an address
• Find a route and directions
• Display a web map
• Display a scene