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.

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

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 Runtime API for Qt 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
      39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 40 41 42 43 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44
      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
      //   Copyright 2020 Esri
      //   Licensed under the Apache License, Version 2.0 (the "License");
      //   you may not use this file except in compliance with the License.
      //   You may obtain a copy of the License at
      //
      //   https://www.apache.org/licenses/LICENSE-2.0
      //
      //   Unless required by applicable law or agreed to in writing, software
      //   distributed under the License is distributed on an "AS IS" BASIS,
      //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      //   See the License for the specific language governing permissions and
      //   limitations under the License.
      //
      
      #include "Display_a_map.h"
      
      #include "ArcGISRuntimeEnvironment.h"
      #include "MapQuickView.h"
      
      #include <QDir>
      #include <QGuiApplication>
      #include <QQmlApplicationEngine>
      
      //------------------------------------------------------------------------------
      
      using namespace Esri::ArcGISRuntime;
      
      int main(int argc, char *argv[])
      {
          QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
          QGuiApplication app(argc, argv);
      
          // Use of Esri location services, including basemaps and geocoding, requires
          // either an ArcGIS identity or an API key. For more information see
          // https://links.esri.com/arcgis-runtime-security-auth.
      
          // 1. ArcGIS identity: An ArcGIS named user account that is a member of an
          // organization in ArcGIS Online or ArcGIS Enterprise.
      
          // 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 = QStringLiteral("");
      
          if (apiKey.isEmpty())
          {
              qWarning() << "Use of Esri location services, including basemaps, requires "
                            "you to authenticate with an ArcGIS identity or set the API Key property.";
          }
          else
          {
              ArcGISRuntimeEnvironment::setApiKey(apiKey);
          }
      
          // Production deployment of applications built with ArcGIS Runtime requires you to
          // license ArcGIS Runtime functionality. For more information see
          // https://links.esri.com/arcgis-runtime-license-and-deploy.
      
          // ArcGISRuntimeEnvironment::setLicense("Place license string in here");
      
          // Register the map view for QML
          qmlRegisterType<MapQuickView>("Esri.display_a_map", 1, 0, "MapView");
      
          // Register the Display_a_map (QQuickItem) for QML
          qmlRegisterType<Display_a_map>("Esri.display_a_map", 1, 0, "Display_a_map");
      
          // Initialize application view
          QQmlApplicationEngine engine;
      
          // Add the import Path
          engine.addImportPath(QDir(QCoreApplication::applicationDirPath()).filePath("qml"));
      
          // Set the source
          engine.load(QUrl("qrc:/qml/main.qml"));
      
          return app.exec();
      }
      
      //------------------------------------------------------------------------------

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
    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
    //   Copyright 2020 Esri
    //   Licensed under the Apache License, Version 2.0 (the "License");
    //   you may not use this file except in compliance with the License.
    //   You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    //   Unless required by applicable law or agreed to in writing, software
    //   distributed under the License is distributed on an "AS IS" BASIS,
    //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    //   See the License for the specific language governing permissions and
    //   limitations under the License.
    
    #ifndef DISPLAY_A_MAP_H
    #define DISPLAY_A_MAP_H
    
    
    namespace Esri
    {
    namespace ArcGISRuntime
    {
    class Map;
    class MapQuickView;
    
    class GraphicsOverlay;
    
    }
    }
    
    #include <QObject>
    
    class Display_a_map : public QObject
    {
        Q_OBJECT
        Q_PROPERTY(Esri::ArcGISRuntime::MapQuickView* mapView READ mapView WRITE setMapView NOTIFY mapViewChanged)
    public:
      explicit Display_a_map(QObject* parent = nullptr);
      ~Display_a_map() override;
    
    
    signals:
      void mapViewChanged();
    
    private:
      Esri::ArcGISRuntime::MapQuickView* mapView() const;
      void setMapView(Esri::ArcGISRuntime::MapQuickView* mapView);
      void setupMap();
    
      void createGraphics(Esri::ArcGISRuntime::GraphicsOverlay* overlay);
    
    
      Esri::ArcGISRuntime::Map* m_map = nullptr;
      Esri::ArcGISRuntime::MapQuickView* m_mapView = nullptr;
    
    };
    
    #endif // DISPLAY_A_MAP_H
  2. Add the createGraphics public member function declaration. Then save and close the header file.

    Display_a_map.h
    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
    //   Copyright 2020 Esri
    //   Licensed under the Apache License, Version 2.0 (the "License");
    //   you may not use this file except in compliance with the License.
    //   You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    //   Unless required by applicable law or agreed to in writing, software
    //   distributed under the License is distributed on an "AS IS" BASIS,
    //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    //   See the License for the specific language governing permissions and
    //   limitations under the License.
    
    #ifndef DISPLAY_A_MAP_H
    #define DISPLAY_A_MAP_H
    
    
    namespace Esri
    {
    namespace ArcGISRuntime
    {
    class Map;
    class MapQuickView;
    
    class GraphicsOverlay;
    
    }
    }
    
    #include <QObject>
    
    class Display_a_map : public QObject
    {
        Q_OBJECT
        Q_PROPERTY(Esri::ArcGISRuntime::MapQuickView* mapView READ mapView WRITE setMapView NOTIFY mapViewChanged)
    public:
      explicit Display_a_map(QObject* parent = nullptr);
      ~Display_a_map() override;
    
    
    signals:
      void mapViewChanged();
    
    private:
      Esri::ArcGISRuntime::MapQuickView* mapView() const;
      void setMapView(Esri::ArcGISRuntime::MapQuickView* mapView);
      void setupMap();
    
      void createGraphics(Esri::ArcGISRuntime::GraphicsOverlay* overlay);
    
    
      Esri::ArcGISRuntime::Map* m_map = nullptr;
      Esri::ArcGISRuntime::MapQuickView* m_mapView = nullptr;
    
    };
    
    #endif // DISPLAY_A_MAP_H

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
    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 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 25 25 25 25 25 25 25 25 24 23 22 21 21 21 21 21 21 21 21 21 21 21 20 19 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 -62 -64 -66 -68 -70 -71
    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
    //   Copyright 2020 Esri
    //   Licensed under the Apache License, Version 2.0 (the "License");
    //   you may not use this file except in compliance with the License.
    //   You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    //   Unless required by applicable law or agreed to in writing, software
    //   distributed under the License is distributed on an "AS IS" BASIS,
    //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    //   See the License for the specific language governing permissions and
    //   limitations under the License.
    //
    
    #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 <QUrl>
    
    using namespace Esri::ArcGISRuntime;
    
    Display_a_map::Display_a_map(QObject* parent /* = nullptr */):
        QObject(parent),
        m_map(new Map(BasemapStyle::ArcGISTopographic, this))
    {
    }
    
    Display_a_map::~Display_a_map()
    {
    }
    
    MapQuickView* Display_a_map::mapView() const
    {
        return m_mapView;
    }
    
    // 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);
      setupMap();
    
      GraphicsOverlay* overlay = new GraphicsOverlay(this);
      createGraphics(overlay);
      m_mapView->graphicsOverlays()->append(overlay);
    
      emit mapViewChanged();
    }
    
    void Display_a_map::setupMap()
    {
      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);
    
      // 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);
    
      // 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);
    
    }
    
  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
    48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 65 65 65 65 65 65 65 65 64 63 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 -26 -27
    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
    //   Copyright 2020 Esri
    //   Licensed under the Apache License, Version 2.0 (the "License");
    //   you may not use this file except in compliance with the License.
    //   You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    //   Unless required by applicable law or agreed to in writing, software
    //   distributed under the License is distributed on an "AS IS" BASIS,
    //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    //   See the License for the specific language governing permissions and
    //   limitations under the License.
    //
    
    #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 <QUrl>
    
    using namespace Esri::ArcGISRuntime;
    
    Display_a_map::Display_a_map(QObject* parent /* = nullptr */):
        QObject(parent),
        m_map(new Map(BasemapStyle::ArcGISTopographic, this))
    {
    }
    
    Display_a_map::~Display_a_map()
    {
    }
    
    MapQuickView* Display_a_map::mapView() const
    {
        return m_mapView;
    }
    
    // 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);
      setupMap();
    
      GraphicsOverlay* overlay = new GraphicsOverlay(this);
      createGraphics(overlay);
      m_mapView->graphicsOverlays()->append(overlay);
    
      emit mapViewChanged();
    }
    
    void Display_a_map::setupMap()
    {
      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);
    
      // 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);
    
      // 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);
    
    }
    
  3. Create a new method named Display_a_map::createGraphics, right after the Display_a_map::setupMap method.

    Display_a_map.cpp
    66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 67 68 69 70 71 72 73 74 75 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 76 77
    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
    //   Copyright 2020 Esri
    //   Licensed under the Apache License, Version 2.0 (the "License");
    //   you may not use this file except in compliance with the License.
    //   You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    //   Unless required by applicable law or agreed to in writing, software
    //   distributed under the License is distributed on an "AS IS" BASIS,
    //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    //   See the License for the specific language governing permissions and
    //   limitations under the License.
    //
    
    #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 <QUrl>
    
    using namespace Esri::ArcGISRuntime;
    
    Display_a_map::Display_a_map(QObject* parent /* = nullptr */):
        QObject(parent),
        m_map(new Map(BasemapStyle::ArcGISTopographic, this))
    {
    }
    
    Display_a_map::~Display_a_map()
    {
    }
    
    MapQuickView* Display_a_map::mapView() const
    {
        return m_mapView;
    }
    
    // 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);
      setupMap();
    
      GraphicsOverlay* overlay = new GraphicsOverlay(this);
      createGraphics(overlay);
      m_mapView->graphicsOverlays()->append(overlay);
    
      emit mapViewChanged();
    }
    
    void Display_a_map::setupMap()
    {
      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);
    
      // 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);
    
      // 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);
    
    }
    

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 and TextSymbol. See Symbol in the API documentation to learn more about symbols.

    Display_a_map.cpp
    66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 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 56 55 55
    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
    //   Copyright 2020 Esri
    //   Licensed under the Apache License, Version 2.0 (the "License");
    //   you may not use this file except in compliance with the License.
    //   You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    //   Unless required by applicable law or agreed to in writing, software
    //   distributed under the License is distributed on an "AS IS" BASIS,
    //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    //   See the License for the specific language governing permissions and
    //   limitations under the License.
    //
    
    #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 <QUrl>
    
    using namespace Esri::ArcGISRuntime;
    
    Display_a_map::Display_a_map(QObject* parent /* = nullptr */):
        QObject(parent),
        m_map(new Map(BasemapStyle::ArcGISTopographic, this))
    {
    }
    
    Display_a_map::~Display_a_map()
    {
    }
    
    MapQuickView* Display_a_map::mapView() const
    {
        return m_mapView;
    }
    
    // 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);
      setupMap();
    
      GraphicsOverlay* overlay = new GraphicsOverlay(this);
      createGraphics(overlay);
      m_mapView->graphicsOverlays()->append(overlay);
    
      emit mapViewChanged();
    }
    
    void Display_a_map::setupMap()
    {
      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);
    
      // 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);
    
      // 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);
    
    }
    
  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 PolylineBuider to add a new Points to it. Add the highlighted code.

    Display_a_map.cpp
    83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 100 99 98 97 96 95 94 93 92 91 90 89 88 87 86 85 84 83 82 81 81
    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
    //   Copyright 2020 Esri
    //   Licensed under the Apache License, Version 2.0 (the "License");
    //   you may not use this file except in compliance with the License.
    //   You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    //   Unless required by applicable law or agreed to in writing, software
    //   distributed under the License is distributed on an "AS IS" BASIS,
    //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    //   See the License for the specific language governing permissions and
    //   limitations under the License.
    //
    
    #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 <QUrl>
    
    using namespace Esri::ArcGISRuntime;
    
    Display_a_map::Display_a_map(QObject* parent /* = nullptr */):
        QObject(parent),
        m_map(new Map(BasemapStyle::ArcGISTopographic, this))
    {
    }
    
    Display_a_map::~Display_a_map()
    {
    }
    
    MapQuickView* Display_a_map::mapView() const
    {
        return m_mapView;
    }
    
    // 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);
      setupMap();
    
      GraphicsOverlay* overlay = new GraphicsOverlay(this);
      createGraphics(overlay);
      m_mapView->graphicsOverlays()->append(overlay);
    
      emit mapViewChanged();
    }
    
    void Display_a_map::setupMap()
    {
      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);
    
      // 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);
    
      // 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);
    
    }
    
  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 PolygonBuilderto add new Points to it. Add the highlighted code.

    Display_a_map.cpp
    96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 119 119
    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
    //   Copyright 2020 Esri
    //   Licensed under the Apache License, Version 2.0 (the "License");
    //   you may not use this file except in compliance with the License.
    //   You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    //   Unless required by applicable law or agreed to in writing, software
    //   distributed under the License is distributed on an "AS IS" BASIS,
    //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    //   See the License for the specific language governing permissions and
    //   limitations under the License.
    //
    
    #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 <QUrl>
    
    using namespace Esri::ArcGISRuntime;
    
    Display_a_map::Display_a_map(QObject* parent /* = nullptr */):
        QObject(parent),
        m_map(new Map(BasemapStyle::ArcGISTopographic, this))
    {
    }
    
    Display_a_map::~Display_a_map()
    {
    }
    
    MapQuickView* Display_a_map::mapView() const
    {
        return m_mapView;
    }
    
    // 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);
      setupMap();
    
      GraphicsOverlay* overlay = new GraphicsOverlay(this);
      createGraphics(overlay);
      m_mapView->graphicsOverlays()->append(overlay);
    
      emit mapViewChanged();
    }
    
    void Display_a_map::setupMap()
    {
      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);
    
      // 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);
    
      // 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);
    
    }
    
  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
      39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 40 41 42 43 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44
      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
      //   Copyright 2020 Esri
      //   Licensed under the Apache License, Version 2.0 (the "License");
      //   you may not use this file except in compliance with the License.
      //   You may obtain a copy of the License at
      //
      //   https://www.apache.org/licenses/LICENSE-2.0
      //
      //   Unless required by applicable law or agreed to in writing, software
      //   distributed under the License is distributed on an "AS IS" BASIS,
      //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      //   See the License for the specific language governing permissions and
      //   limitations under the License.
      //
      
      #include "Display_a_map.h"
      
      #include "ArcGISRuntimeEnvironment.h"
      #include "MapQuickView.h"
      
      #include <QDir>
      #include <QGuiApplication>
      #include <QQmlApplicationEngine>
      
      //------------------------------------------------------------------------------
      
      using namespace Esri::ArcGISRuntime;
      
      int main(int argc, char *argv[])
      {
          QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
          QGuiApplication app(argc, argv);
      
          // Use of Esri location services, including basemaps and geocoding, requires
          // either an ArcGIS identity or an API key. For more information see
          // https://links.esri.com/arcgis-runtime-security-auth.
      
          // 1. ArcGIS identity: An ArcGIS named user account that is a member of an
          // organization in ArcGIS Online or ArcGIS Enterprise.
      
          // 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 = QStringLiteral("");
      
          if (apiKey.isEmpty())
          {
              qWarning() << "Use of Esri location services, including basemaps, requires "
                            "you to authenticate with an ArcGIS identity or set the API Key property.";
          }
          else
          {
              ArcGISRuntimeEnvironment::setApiKey(apiKey);
          }
      
          // Production deployment of applications built with ArcGIS Runtime requires you to
          // license ArcGIS Runtime functionality. For more information see
          // https://links.esri.com/arcgis-runtime-license-and-deploy.
      
          // ArcGISRuntimeEnvironment::setLicense("Place license string in here");
      
          // Register the map view for QML
          qmlRegisterType<MapQuickView>("Esri.display_a_map", 1, 0, "MapView");
      
          // Register the Display_a_map (QQuickItem) for QML
          qmlRegisterType<Display_a_map>("Esri.display_a_map", 1, 0, "Display_a_map");
      
          // Initialize application view
          QQmlApplicationEngine engine;
      
          // Add the import Path
          engine.addImportPath(QDir(QCoreApplication::applicationDirPath()).filePath("qml"));
      
          // Set the source
          engine.load(QUrl("qrc:/qml/main.qml"));
      
          return app.exec();
      }
      
      //------------------------------------------------------------------------------

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
    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
    //   Copyright 2021 Esri
    //   Licensed under the Apache License, Version 2.0 (the "License");
    //   you may not use this file except in compliance with the License.
    //   You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    //   Unless required by applicable law or agreed to in writing, software
    //   distributed under the License is distributed on an "AS IS" BASIS,
    //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    //   See the License for the specific language governing permissions and
    //   limitations under the License.
    //
    
    import QtQuick 2.6
    import QtQuick.Controls 2.2
    import Esri.ArcGISRuntime 100.11
    
    ApplicationWindow {
        id: appWindow
        width: 800
        height: 600
        title: "Display_a_map"
    
        // add a mapView component
        MapView {
            anchors.fill: parent
            // set focus to enable keyboard navigation
            focus: true
    
            // add a map to the mapview
    
            Map {
                // add the ArcGISStreets basemap to the map
                initBasemapStyle: Enums.BasemapStyleArcGISTopographic
                initialViewpoint: viewPoint
            }
    
            GraphicsOverlay {
                id: graphicsOverlay
            }
    
            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}
        }
    
        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
        }
    
        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
            }
        }
    
        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);
    
            // add polygon
            const polygon = createPolygon();
            const polygon_graphic = createGraphic(polygon, polygon_fill_symbol);
            graphicsOverlay.graphics.append(polygon_graphic);
    
        }
    
        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});
        }
    
        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;
        }
    
    }
    

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
    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
    //   Copyright 2021 Esri
    //   Licensed under the Apache License, Version 2.0 (the "License");
    //   you may not use this file except in compliance with the License.
    //   You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    //   Unless required by applicable law or agreed to in writing, software
    //   distributed under the License is distributed on an "AS IS" BASIS,
    //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    //   See the License for the specific language governing permissions and
    //   limitations under the License.
    //
    
    import QtQuick 2.6
    import QtQuick.Controls 2.2
    import Esri.ArcGISRuntime 100.11
    
    ApplicationWindow {
        id: appWindow
        width: 800
        height: 600
        title: "Display_a_map"
    
        // add a mapView component
        MapView {
            anchors.fill: parent
            // set focus to enable keyboard navigation
            focus: true
    
            // add a map to the mapview
    
            Map {
                // add the ArcGISStreets basemap to the map
                initBasemapStyle: Enums.BasemapStyleArcGISTopographic
                initialViewpoint: viewPoint
            }
    
            GraphicsOverlay {
                id: graphicsOverlay
            }
    
            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}
        }
    
        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
        }
    
        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
            }
        }
    
        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);
    
            // add polygon
            const polygon = createPolygon();
            const polygon_graphic = createGraphic(polygon, polygon_fill_symbol);
            graphicsOverlay.graphics.append(polygon_graphic);
    
        }
    
        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});
        }
    
        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;
        }
    
    }
    
  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
    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
    //   Copyright 2021 Esri
    //   Licensed under the Apache License, Version 2.0 (the "License");
    //   you may not use this file except in compliance with the License.
    //   You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    //   Unless required by applicable law or agreed to in writing, software
    //   distributed under the License is distributed on an "AS IS" BASIS,
    //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    //   See the License for the specific language governing permissions and
    //   limitations under the License.
    //
    
    import QtQuick 2.6
    import QtQuick.Controls 2.2
    import Esri.ArcGISRuntime 100.11
    
    ApplicationWindow {
        id: appWindow
        width: 800
        height: 600
        title: "Display_a_map"
    
        // add a mapView component
        MapView {
            anchors.fill: parent
            // set focus to enable keyboard navigation
            focus: true
    
            // add a map to the mapview
    
            Map {
                // add the ArcGISStreets basemap to the map
                initBasemapStyle: Enums.BasemapStyleArcGISTopographic
                initialViewpoint: viewPoint
            }
    
            GraphicsOverlay {
                id: graphicsOverlay
            }
    
            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}
        }
    
        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
        }
    
        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
            }
        }
    
        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);
    
            // add polygon
            const polygon = createPolygon();
            const polygon_graphic = createGraphic(polygon, polygon_fill_symbol);
            graphicsOverlay.graphics.append(polygon_graphic);
    
        }
    
        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});
        }
    
        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;
        }
    
    }
    

    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
    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
    //   Copyright 2021 Esri
    //   Licensed under the Apache License, Version 2.0 (the "License");
    //   you may not use this file except in compliance with the License.
    //   You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    //   Unless required by applicable law or agreed to in writing, software
    //   distributed under the License is distributed on an "AS IS" BASIS,
    //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    //   See the License for the specific language governing permissions and
    //   limitations under the License.
    //
    
    import QtQuick 2.6
    import QtQuick.Controls 2.2
    import Esri.ArcGISRuntime 100.11
    
    ApplicationWindow {
        id: appWindow
        width: 800
        height: 600
        title: "Display_a_map"
    
        // add a mapView component
        MapView {
            anchors.fill: parent
            // set focus to enable keyboard navigation
            focus: true
    
            // add a map to the mapview
    
            Map {
                // add the ArcGISStreets basemap to the map
                initBasemapStyle: Enums.BasemapStyleArcGISTopographic
                initialViewpoint: viewPoint
            }
    
            GraphicsOverlay {
                id: graphicsOverlay
            }
    
            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}
        }
    
        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
        }
    
        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
            }
        }
    
        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);
    
            // add polygon
            const polygon = createPolygon();
            const polygon_graphic = createGraphic(polygon, polygon_fill_symbol);
            graphicsOverlay.graphics.append(polygon_graphic);
    
        }
    
        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});
        }
    
        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;
        }
    
    }
    
  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
    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
    //   Copyright 2021 Esri
    //   Licensed under the Apache License, Version 2.0 (the "License");
    //   you may not use this file except in compliance with the License.
    //   You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    //   Unless required by applicable law or agreed to in writing, software
    //   distributed under the License is distributed on an "AS IS" BASIS,
    //   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    //   See the License for the specific language governing permissions and
    //   limitations under the License.
    //
    
    import QtQuick 2.6
    import QtQuick.Controls 2.2
    import Esri.ArcGISRuntime 100.11
    
    ApplicationWindow {
        id: appWindow
        width: 800
        height: 600
        title: "Display_a_map"
    
        // add a mapView component
        MapView {
            anchors.fill: parent
            // set focus to enable keyboard navigation
            focus: true
    
            // add a map to the mapview
    
            Map {
                // add the ArcGISStreets basemap to the map
                initBasemapStyle: Enums.BasemapStyleArcGISTopographic
                initialViewpoint: viewPoint
            }
    
            GraphicsOverlay {
                id: graphicsOverlay
            }
    
            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}
        }
    
        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
        }
    
        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
            }
        }
    
        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);
    
            // add polygon
            const polygon = createPolygon();
            const polygon_graphic = createGraphic(polygon, polygon_fill_symbol);
            graphicsOverlay.graphics.append(polygon_graphic);
    
        }
    
        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});
        }
    
        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;
        }
    
    }
    
  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
    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