Add a point, line, and polygon

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

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

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

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

Prerequisites

Choose your API

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

• Steps for C++
• Steps for QML

Steps for C++

Open the project in Qt Creator

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

2. Open the display_a_map project in Qt Creator.

3. If you downloaded the Display a map solution, set your API key.

   More info

   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

      Show more lines

      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();
      }
      
      //------------------------------------------------------------------------------

      Show more lines

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

   Show more lines

   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

   Show more lines

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

   Display_a_map.h

   Show more lines

   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

   Show more lines

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

   Show more lines

   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);
   
   }
   

   Show more lines

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

   Show more lines

   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);
   
   }
   

   Show more lines

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

   Display_a_map.cpp

   Show more lines

   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.

   More info

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

   Display_a_map.cpp

   Show more lines

   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);
   
   }
   

   Show more lines

2. Press <Ctrl+R> to run the app.

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

Add a polyline graphic

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

1. Create a Polyline and a SimpleLineSymbol.

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

   Display_a_map.cpp

   Show more lines

   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);
   
   }
   

   Show more lines

2. Press <Ctrl+R> to run the app.

You should see a point and a line graphic along Westward Beach.

Add a polygon graphic

A polygon graphic is created using a polygon and a fill symbol. A polygon is defined as a sequence of points that describe a closed boundary.

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

   Display_a_map.cpp

   Show more lines

   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);
   
   }
   

   Show more lines

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.

   More info

   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

      Show more lines

      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();
      }
      
      //------------------------------------------------------------------------------

      Show more lines

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

   Show more lines

   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;
       }
   
   }
   

   Show more lines

Add point graphic

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

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

   More info

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

   main.qml

   Show more lines

   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;
       }
   
   }
   

   Show more lines

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

   More info

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

   main.qml

   Show more lines

   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;
       }
   
   }
   

   Show more lines

   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

   Show more lines

   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;
       }
   
   }
   

   Show more lines

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

   Show more lines

   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;
       }
   
   }
   

   Show more lines

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

   Show more lines

   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