Add a point, line, and polygon

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

add a point line and polygon

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.

Prerequisites

The following are required for this tutorial:

  1. An ArcGIS account to access API keys. If you don't have an account, sign up for free.
  2. Your system meets the system requirements.
  3. The ArcGIS Maps SDK for Qt, version 200.0.0 or later is installed. ArcGIS Maps SDK for Qt version 200.0.0 and later requires Qt 6.
  4. The Qt 6 software development framework is installed.

Choose your API

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

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 Display a map solution, set your API key.

    An API Key enables access to services, web maps, and web scenes hosted in ArcGIS Online.

    1. Go to your developer dashboard to get your API key. For these tutorials, use your default API key. It is scoped to include all of the services demonstrated in the tutorials.

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

    3. Modify the code to set the API key. Paste the API key, acquired from your dashboard, between the quotes. Then save and close the file.

      main.cpp
      Expand
      Use dark colors for code blocks
      36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 37 38 39 40 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41
      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
          // 2. API key: A permanent key that gives your application access to Esri
          // location services. Create a new API key or access existing API keys from
          // your ArcGIS for Developers dashboard (https://links.esri.com/arcgis-api-keys).
      
          const QString apiKey = 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 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 21 20 20 20 20 20 20
    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
    class Map;
    class MapQuickView;
    
    class GraphicsOverlay;
    }
    
    Expand
  2. Add the createGraphics private member function declaration. Then save and close the header file.

    Display_a_map.h
    Expand
    Use dark colors for code blocks
    40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 41 42 43 44 45 46 46 46 46 46 46 46
    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
    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 classes shown.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    12 12 12 12 12 12 12 12 12 12 12 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 31 30 29 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 -26 -28 -30 -32 -34 -36 -38 -40 -42 -44 -46 -48 -50 -52 -54 -56 -58 -60 -61 -62 -62 -62 -62 -62 -62 -62 -62 -62 -62 -62 -62 -62 -63 -64 -65 -66 -66 -66
    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
    #include "Display_a_map.h"
    #include "Map.h"
    #include "MapQuickView.h"
    #include "MapTypes.h"
    #include "Point.h"
    #include "SpatialReference.h"
    #include "TaskWatcher.h"
    #include "Viewpoint.h"
    
    #include "Graphic.h"
    #include "GraphicListModel.h"
    #include "GraphicsOverlay.h"
    #include "GraphicsOverlayListModel.h"
    #include "PolylineBuilder.h"
    #include "PolygonBuilder.h"
    #include "SimpleFillSymbol.h"
    #include "SimpleLineSymbol.h"
    #include "SimpleMarkerSymbol.h"
    #include "SymbolTypes.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
    106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 106 105 104 103 101 99 97 95 93 91 89 87 85 83 81 79 77 75 73 71 69 67 65 63 61 59 57 55 53 51 49 47 45 43 41 39 37 35 33 31 29 27 25 23 21 19 17 15 14 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 28 28 28
    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
    // Set the view (created in QML)
    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);
    
    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
    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 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 60 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61
    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
    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)
    {
    
    }
    
    Expand

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.

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

    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 68 69 70 71 71 70 69 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 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39
    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
    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("blue"), 3, this);
        SimpleMarkerSymbol* point_symbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle::Circle, QColor("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.

Polylines have one or more distinct parts. Each part is defined by two points. To create a continuous line with just one part, use the Polyline constructor. To create a polyline with more than one part, use a PolylineBuilder. Polyline graphics support a number of symbol types, such as SimpleLineSymbol and TextSymbol. See Symbol in the API documentation to learn more about symbols.

  1. Create a Polyline and a SimpleLineSymbol.

    To create the Polyline, create a new PointCollection with a SpatialReference and use PolylineBuilder to add a new Point objects to it. Add the highlighted code.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 84 83 82 81 80 79 78 77 76 75 74 73 72 71 70 69 68 67 66 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65
    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
        // 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.

Polygons have one or more distinct parts. Each part is a sequence of points describing a closed boundary. For a single area with no holes, you can use Polygon to create a polygon with just one part. To create a polygon with more than one part, use PolygonBuilder.

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

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

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 103 103 103 103 103 103 103 103 103 103 103 103 103 103 103 103 103 103 103 103 103
    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
    124
        // 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 Display a map solution, set your API key.

    An API Key enables access to services, web maps, and web scenes hosted in ArcGIS Online.

    1. Go to your developer dashboard to get your API key. For these tutorials, use your default API key. It is scoped to include all of the services demonstrated in the tutorials.

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

    3. Modify the code to set the API key. Paste the API key, acquired from your dashboard, between the quotes. Then save and close the file.

      main.cpp
      Expand
      Use dark colors for code blocks
      36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 36 37 38 39 40 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41
      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
          // 2. API key: A permanent key that gives your application access to Esri
          // location services. Create a new API key or access existing API keys from
          // your ArcGIS for Developers dashboard (https://links.esri.com/arcgis-api-keys).
      
          const QString apiKey = 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
    30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 31 32 33 34 35 36 37 38 39 39 39 39 39 39 39 39 39 39 39 39 39 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 -6 -7 -9 -11 -13 -15 -17 -19 -21 -23 -25 -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 -55
    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
            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.

    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
    40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 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 20 19 17 15 13 11 9 7 5 3 1 -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 -29
    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
            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.

    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
    52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 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 36 35 33 31 29 27 25 23 21 19 17 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 -12 -13 -13
    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
        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
    59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 74 73 72 71 70 69 68 67 66 65 64 63 62 61 60 59 58 57 56 55 54 53 52 51 49 47 45 43 41 39 37 35 33 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 3
    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
        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
    67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 68 69 70 71 72 73 74 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 76 77 78 79 80 80 80 80 80 80 80 80 80 80 80 81 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 56 55 55
    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
        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
    93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 92 91 90 89 88 87 86 85 84 83 82 81 80 79 78 77 76 75 76 77 78 79 80 80 80 80 80 80 80 80 80 80 80 81 82 83 84 85 86 87 88 88 87 86 85 84 83 82 81 80 79 78 77 76 75 74 73 72 71 70 69 69
    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
        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.

Polylines have one or more distinct parts. Each part is defined by two points. To create a continuous line with just one part, use the Polyline constructor. To create a polyline with more than one part, use a PolylineBuilder. Polyline graphics support a number of symbol types, such as SimpleLineSymbol and TextSymbol. See Symbol in the API documentation to learn more about symbols.

  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 createObject on ArcGISRuntimeEnvironment to create the Qml object.

    main.qml
    Expand
    Use dark colors for code blocks
    110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 110 109 108 107 106 105 104 103 102 101 100 99 98 97 96 95 94 93 92 92 92 92 92 92 91 90 89 88 87 86 85 84 83 82 82 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 97 96 95 94 93 92 91 90 89 88 87 87
    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
        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
    93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 92 91 90 89 88 87 86 85 84 83 82 81 80 79 78 77 76 75 76 77 78 79 80 81 82 83 84 84 83 82 81 80 79 79 79 79 79 79 79 79 79 79 79 79 79 79 79 79 79 79 79 78 77 76 75 74 73 72 71 70 69 69
    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
        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.

Polygons have one or more distinct parts. Each part is a sequence of points describing a closed boundary. For a single area with no holes, you can use Polygon to create a polygon with just one part. To create a polygon with more than one part, use PolygonBuilder.

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

  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
    67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 68 69 70 71 72 73 74 75 76 77 78 79 79 78 77 76 75 74 73 72 71 70 69 68 67 66 66 66 66 66 66 66 66 66 66 66 65 64 63 62 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 60 59 58 57 56 55 54 53 52 51 51
    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
        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
    75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 92 92 92 92 92 92 92 92 92 92 92 91 90 89 88 87 87 87 87 87 87 87 87 87 87 87 87 87 87 87 87 87 87 87 86 85 84 83 82 81 80 79 78 77 77
    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
        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
    117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 117 116 115 114 113 112 112 112 112 112 112 112 112 112 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 130 130
    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
        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
    93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109 109
    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