Search for an address

Learn how to find an address or place with a search bar and the Geocoding service.

search for an address

Geocoding is the process of converting address or place text into a location. The geocoding service can search for an address or a place and perform reverse geocoding.

In this tutorial, you use a search bar in the user interface to access the geocoding service and search for addresses and places.

To learn how to use the geocoding service to reverse geocode, visit the Reverse geocode tutorial.

Prerequisites

Before starting this tutorial:

  1. You need an ArcGIS Location Platform or ArcGIS Online account.

  2. Your system meets the system requirements.

  3. The ArcGIS Runtime API for Qt is installed.

Steps

Get an access token

You need an access token to use the location services used in this tutorial.

  1. Go to the Create an API key tutorial to obtain an access token using your ArcGIS Location Platform or ArcGIS Online account.

  2. Ensure that the following privileges are enabled: Location services > Basemaps > Basemap styles service and Location services > Geocoding.

  3. Copy the access token as it will be used in the next step.

To learn more about other ways to get an access token, go to Types of authentication.

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. In the Projects window, in the Sources folder, open the main.cpp file.

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

    main.cpp
    Expand
    Use dark colors for code blocks
    43 44 45 46 47
    Change line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
        // 2. API key authentication: Get a long-lived access token that gives your application access to
        // ArcGIS location services. Go to the tutorial at https://links.esri.com/create-an-api-key.
        // Copy the API Key access token.
    
        const QString accessToken = QString("");
    
    Expand

Declare classes, member variables, functions, and signals

  1. Double click on Sources > Display_a_map.h to open the file. Include the six header files below.

    Display_a_map.h
    Expand
    Use dark colors for code blocks
    22 23 24 25 26 27 28 29 30
    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
    class Map;
    class MapQuickView;
    
    class GraphicsOverlay;
    class Graphic;
    class LocatorTask;
    class GeocodeResult;
    class SuggestResult;
    class TextSymbol;
    
    Expand
  2. Add the following two include statements.

    Display_a_map.h
    Expand
    Use dark colors for code blocks
    32 33 34 35 36 37
    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
    }
    }
    #include <QObject>
    
    #include <QAbstractListModel>
    #include "GeocodeParameters.h"
    
    Expand
  3. Add a Q_PROPERTY for the member variable suggestions.

    Display_a_map.h
    Expand
    Use dark colors for code blocks
    39 40 41 42 43 44
    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
    class Display_a_map : public QObject
    {
      Q_OBJECT
      Q_PROPERTY(Esri::ArcGISRuntime::MapQuickView* mapView READ mapView WRITE setMapView NOTIFY mapViewChanged)
    
      Q_PROPERTY(QAbstractListModel* suggestions READ suggestions NOTIFY suggestionsChanged)
    
    Expand
  4. Add the following public member functions with the Q_INVOKABLE macro to allow these to be invokable from the GUI.

    Display_a_map.h
    Expand
    Use dark colors for code blocks
    46 47 48 49 50 51 52
    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
    public:
      explicit Display_a_map(QObject* parent = nullptr);
      ~Display_a_map() override;
    
      Q_INVOKABLE void geocode(const QString& query);
      Q_INVOKABLE void clearGraphics();
      Q_INVOKABLE void setSuggestions(const QString& text);
    
    Expand
  5. Add two new signal declarations.

    Display_a_map.h
    Expand
    Use dark colors for code blocks
    54 55 56 57 58
    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
    signals:
      void mapViewChanged();
    
      void suggestionsChanged();
      void hideSuggestionView();
    
    Expand
  6. Declare the setupLocatorTask private method.

    Display_a_map.h
    Expand
    Use dark colors for code blocks
    60 61 62 63 64 65
    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
    private:
      Esri::ArcGISRuntime::MapQuickView* mapView() const;
      void setMapView(Esri::ArcGISRuntime::MapQuickView* mapView);
      void setupViewpoint();
    
      void setupLocatorTask();
    
    Expand
  7. Add the following six private member functions and variables. Then save and close the header file.

    Display_a_map.h
    Expand
    Use dark colors for code blocks
    65 66 67 68 69 70 71 72 73 74 75 76 77 78
    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
      void setupLocatorTask();
    
      Esri::ArcGISRuntime::Map* m_map = nullptr;
      Esri::ArcGISRuntime::MapQuickView* m_mapView = nullptr;
    
      void configureGraphic();
      QAbstractListModel* suggestions() const;
      Esri::ArcGISRuntime::GraphicsOverlay* m_graphicsOverlay = nullptr;
      Esri::ArcGISRuntime::LocatorTask* m_locatorTask = nullptr;
      Esri::ArcGISRuntime::Graphic* m_graphicResultLocation = nullptr;
      Esri::ArcGISRuntime::Graphic* m_graphicResultText = nullptr;
      Esri::ArcGISRuntime::TextSymbol* m_textSymbol = nullptr;
      QAbstractListModel* m_suggestListModel = nullptr;
      Esri::ArcGISRuntime::GeocodeParameters m_geocodeParams;
    
    Expand

Include header files to access needed classes

  1. In Projects, double click on Sources > Display_a_map.cpp to open the file and add the following header file declarations.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    15 16 17 18 19 20 21 22 23 24 25
    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
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    #include "Display_a_map.h"
    #include "ArcGISRuntimeEnvironment.h"
    #include "Map.h"
    #include "MapQuickView.h"
    
    #include "SimpleRenderer.h"
    #include "SimpleMarkerSymbol.h"
    #include "TextSymbol.h"
    #include "LocatorTask.h"
    #include "SuggestResult.h"
    #include "SuggestListModel.h"
    
    Expand
  2. Include the following Qt classes.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    27 28 29 30
    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
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    #include <QUrl>
    
    #include <QAbstractListModel>
    #include <QGeoPositionInfoSource>
    
    Expand

Create a locator task with geocode parameters

Geocoding is implemented with a locator, typically created by referencing a service such as the Geocoding service or, for offline geocoding, by referencing locator data contained in a mobile package. Geocoding parameters can be used to fine-tune the results, such as setting the maximum number of results or requesting additional attributes in the results.

  1. Add the call to setupLocatorTask. This method will be implemented next.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    34 35 36 37 38 39
    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
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    Display_a_map::Display_a_map(QObject* parent /* = nullptr */):
      QObject(parent),
      m_map(new Map(BasemapStyle::ArcGISTopographic, this))
    {
    
      setupLocatorTask();
    
    Expand
  2. Add code to begin implementing the setupLocatorTask method and initialize the auto-suggestion list. Within the method body, create a new LocatorTask based on the Geocoding service, and set it to the m_locatorTask member variable.

  3. Create a SuggestParameters, instance and initialize it with three categories as shown. Then set max results to limit for the number of returned suggestion results to 5.

  4. Configure GeocodeParams, (m_geocodeParams). Add code to set the minimum match score and the attribute names for the results to be returned. Call suggestions on m_locatorTask and assign to m_suggestListModel.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
      setupLocatorTask();
    
    }
    Display_a_map::~Display_a_map()
    {
    }
    
    void Display_a_map::setupLocatorTask()
    {
      const QUrl geocode_service("https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer");
      m_locatorTask = new LocatorTask(geocode_service, this);
    
      SuggestParameters suggestParams;
      const QStringList categories{"Address", "POI", "Populated Place"};
      suggestParams.setCategories(categories);
      suggestParams.setMaxResults(5);
      m_locatorTask->suggestions()->setSuggestParameters(suggestParams);
    
      m_geocodeParams.setMinScore(75);
      m_geocodeParams.setResultAttributeNames(QStringList {"Place_addr", "Match_addr"});
      m_suggestListModel = m_locatorTask->suggestions();
      emit suggestionsChanged();
    
    Expand
  5. Add code to the setupLocatorTask to connect to the geocode complete signal on the LocatorTask. Within the lambda body if statement, the code checks for geocoding results and verifies that the graphic exists. If both conditions are met, the result location is set as the graphic’s geometry and the attributes provided by the result are copied to the graphic. The map view display is centered on the graphic before making it visible.

  6. The second code block in the if statement sets text symbol, sets the text graphic geometry for the geocoding result display location, sets attributes for the text graphic, and displays the graphic.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    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
    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.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
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
      m_geocodeParams.setMinScore(75);
      m_geocodeParams.setResultAttributeNames(QStringList {"Place_addr", "Match_addr"});
      m_suggestListModel = m_locatorTask->suggestions();
      emit suggestionsChanged();
    
      // connect to geocode complete signal on the LocatorTask
      connect(m_locatorTask, &LocatorTask::geocodeCompleted, this, [this](QUuid, const QList<GeocodeResult>& geocodeResults)
      {
        if (!geocodeResults.isEmpty() && m_graphicResultLocation)
        {
          // display geocode result label and position
          const GeocodeResult geocodeResult = geocodeResults.at(0);
          m_graphicResultLocation->setGeometry(geocodeResult.displayLocation());
          m_graphicResultLocation->attributes()->setAttributesMap(geocodeResult.attributes());
          constexpr double scale = 8000.0;
          m_mapView->setViewpointCenter(geocodeResult.extent().center(), scale);
          m_graphicResultLocation->setVisible(true);
    
          m_textSymbol->setText(geocodeResult.label());
          m_graphicResultText->setGeometry(geocodeResult.displayLocation());
          m_graphicResultText->attributes()->setAttributesMap(geocodeResult.attributes());
          m_graphicResultLocation->setVisible(true);
        }
      });
    }
    
    Expand

Create the auto-suggestion feature

  1. Add a new setSuggestions method to implement the auto-suggestion feature. This generates a list of suggested addresses based on the user's input in the GUI text field.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
      setupViewpoint();
      emit mapViewChanged();
    }
    
    void Display_a_map::setSuggestions(const QString& text)
    {
      if (!m_suggestListModel)
        return;
    
      SuggestListModel* suggestListModel = dynamic_cast<SuggestListModel*>(m_suggestListModel);
    
      if (!suggestListModel)
        return;
    
      suggestListModel->setSearchText(text);
    }
    
    Expand
  2. Revise the setupViewpoint method to respond to the user's mouse selection of an address from the list of suggested addresses.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    90 91 92 93 94 95 96
    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
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    void Display_a_map::setupViewpoint()
    {
    
      connect(m_mapView, &MapQuickView::mousePressed, this, [this](QMouseEvent& /* event */)
      {
        emit hideSuggestionView();
      });
    
    Expand

Add text and marker graphics to identify location on map

  1. Add the call to configureGraphic, which will be implemented in the next step.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    98 99 100 101 102
    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
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
      const Point center(-118.80543, 34.02700, SpatialReference::wgs84());
      const Viewpoint viewpoint(center, 100000.0);
      m_mapView->setViewpoint(viewpoint);
    
      configureGraphic();
    
    Expand
  2. Implement the configureGraphic public method. Create a SimpleMarkerSymbol (blue square), initialize a Graphic and add that to a GraphicsOverlay. Then create TextSymbol, initialize a Graphic with that, and add it to the GraphicsOverlay. Then add the GraphicsOverlay to MapView.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160
    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.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
      if (!suggestListModel)
        return;
    
      suggestListModel->setSearchText(text);
    }
    
    void Display_a_map::configureGraphic()
    {
      if (m_graphicResultLocation)
        return;
    
      // create graphics overlay and add to map view
      m_graphicsOverlay = new GraphicsOverlay(this);
    
      // set a renderer on the graphics overlay
      SimpleRenderer* simpleRenderer = new SimpleRenderer(this);
    
      // Create a graphic and symbol to display the result location.
      SimpleMarkerSymbol* simpleMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle::Square, QColor("blue"), 12.0, this);
      simpleRenderer->setSymbol(simpleMarkerSymbol);
      m_graphicResultLocation = new Graphic(this);
      m_graphicResultLocation->setSymbol(simpleMarkerSymbol);
      m_graphicsOverlay->graphics()->append(m_graphicResultLocation);
    
      // Create a graphic and symbol to display a label next to the result location
      m_textSymbol = new TextSymbol("", QColor("red"), 18.0, HorizontalAlignment::Center, VerticalAlignment::Bottom, this);
      m_graphicResultText = new Graphic(this);
      m_graphicResultText->setSymbol(m_textSymbol);
    
      m_graphicsOverlay->graphics()->append(m_graphicResultText);
    
      m_mapView->graphicsOverlays()->append(m_graphicsOverlay);
    }
    
    Expand

Add the Geocode method

An asynchronous geocode operation is required to find and return the location candidates for a given address and geocode parameters.

  1. Add the geocode public method to geocode an address when the user clicks on that address in the auto-suggestion list.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    157 158 159 160 161 162 163 164 165
    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
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
      m_graphicsOverlay->graphics()->append(m_graphicResultText);
    
      m_mapView->graphicsOverlays()->append(m_graphicsOverlay);
    }
    
    void Display_a_map::geocode(const QString& query)
    {
      m_locatorTask->geocodeWithParameters(query, m_geocodeParams);
    }
    
    Expand
  2. Add the suggestions method to register the value of m_suggestListModel as the value of the QML property suggestions.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    162 163 164 165 166 167 168 169 170
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    void Display_a_map::geocode(const QString& query)
    {
      m_locatorTask->geocodeWithParameters(query, m_geocodeParams);
    }
    
    QAbstractListModel* Display_a_map::suggestions() const
    {
      return m_suggestListModel;
    }
    
    Expand
  3. Add the clearGraphics method. Then save and close the file.

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    167 168 169 170 171 172 173 174 175 176
    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
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    QAbstractListModel* Display_a_map::suggestions() const
    {
      return m_suggestListModel;
    }
    
    void Display_a_map::clearGraphics()
    {
      m_graphicResultLocation->setGeometry(Point());
      m_graphicResultText->setGeometry(Point());
    }

Create the application GUI

The GUI will let you enter partial or full addresses into a field, see a list of matching addresses, click an address and zoom to that location, and clear the address field.

  1. In Projects, click on Resources > qml\qml.qrc > /qml. Then open the file Display_a_mapForm.qml

  2. Add the following import statement.

    Display_a_mapForm.qml
    Expand
    Use dark colors for code blocks
    15 16 17 18 19
    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
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    import QtQuick 2.6
    import QtQuick.Controls 2.2
    import Esri.Display_a_map 1.0
    
    import QtQuick.Layouts 1.3
    
    Expand
  3. Change the MapView component id to search.

    Display_a_mapForm.qml
    Expand
    Use dark colors for code blocks
    31 32 33 34
    Change line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    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
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
        // Declare the C++ instance that creates the map etc. and supply the view
        Display_a_map {
    
            id: search
    
    Expand
  4. Add the following Qml code to implement the app gui.

    Display_a_mapForm.qml
    Expand
    Use dark colors for code blocks
    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 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
    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.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.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.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.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.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.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.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
        // Declare the C++ instance that creates the map etc. and supply the view
        Display_a_map {
    
            id: search
    
            mapView: view
        }
    
        Rectangle {
            // add rectangle for gui code
            id: searchRect
            width: parent.width
            height: childrenRect.height
            property int cellHeight: 40;
    
            Column {
                anchors {
                    fill: parent
                    margins: 10
                }
                Rectangle {
                    color: "#f7f8fa"
                    border {
                        color: "#7B7C7D"
                    }
                    radius: 2
                    width: parent.width
                    height: childrenRect.height
    
                    GridLayout {
                        width: parent.width
                        columns: 4
                        TextField {
                            id: textField
                            Layout.margins: 5
                            Layout.fillWidth: true
                            font.pixelSize: 14
                            placeholderText: "Type in an address"
                            selectByMouse: true
    
                            onTextChanged: {
                                if (text.length > 0 && suggestView)
                                    suggestView.visible = true;
                                search.setSuggestions(text);
                            }
    
                            onAccepted: {
                                suggestView.visible = false;
                                search.geocode(textField.text);
                                Qt.inputMethod.hide();
                            }
                        }
    
                        Rectangle {
                            Layout.margins: 5
                            width: height
                            height: textField.height
                            color: "#f7f8fa"
                            visible: textField.length === 0
                            enabled: visible
    
                            Button {
                                anchors.fill: parent
                                text: "X"
                                font.pixelSize: 16
                                MouseArea {
                                    anchors.fill: parent
                                    onClicked: {
                                        textField.focus = true;
                                        suggestView.visible = !suggestView.visible;
                                    }
                                }
                            }
                        }
    
                        Rectangle {
                            Layout.margins: 5
                            width: height
                            color: "transparent"
                            height: textField.height
                            visible: textField.length !== 0
                            enabled: visible
    
    
                            Button {
                                anchors.fill: parent
                                text: "X"
                                font.pixelSize: 16
                                MouseArea {
                                    anchors.fill: parent
                                    onClicked: {
                                        textField.text = "";
                                        search.clearGraphics();
                                    }
                                }
                            }
                        }
                    }
                }
    
                //Tutorial add ListView to display suggested location results and bind it to the locator task list model.
    
                ListView {
                    id: suggestView
                    height: 20 * searchRect.cellHeight
                    width: textField.width
                    model: search.suggestions
                    visible: false
                    clip: true
                    delegate: Component {
                        Rectangle {
                            id: rect
                            width: textField.width
                            height: searchRect.cellHeight
                            color: "#f7f8fa"
    
                            Text {
                                anchors {
                                    verticalCenter: parent.verticalCenter
                                    leftMargin: 5
                                    rightMargin: 5
                                }
    
                                font {
                                    weight: Font.Black
                                    pixelSize: 16
                                }
    
                                width: textField.width
                                text: label
                                elide: Text.ElideRight
                                leftPadding: 5
                                color: "black"
                            }
    
                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    textField.text = label;
                                    suggestView.visible = false;
                                    search.geocode(label);
                                    Qt.inputMethod.hide();
                                }
                            }
                        }
                    }
                }
            }
        }
    
    Expand

    Press Ctrl + R to run the app.

You should see a map centered on the Santa Monica Mountains in California, with an address search bar at the top. Input an address in the search bar and the app will present a list of suggested addresses (not limited to the displayed map area). Click an address to zoom to that address location.

What's next?

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

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.