Search for an address

Learn how to find an address or place using a search box and the geocoding service.

Geocoding is the process of converting address or place text to a location. The geocoding service provides address and place geocoding and reverse geocoding.

In this tutorial, you use ArcGIS REST JS to access the geocoding service. You use a simple input control to accept text and a button to execute a search for an address or place. When an address or place is located, a pop-up will appear with the name, location, and address, and the view will pan to it.

Prerequisites

You need an ArcGIS account to access the developer dashboard and create an API key.

Steps

Create a new pen

  1. To get started, either complete the Display a map tutorial or .

Set the API key

To access location services, you need an API key or OAuth 2.0 access token.

  1. Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

  2. In CodePen, update apiKey to use your key.

    Change line
        
    1
    2
    3
    4
    const apiKey = "YOUR_API_KEY";
    const basemapId = "ArcGIS:Streets";
    const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
    olms(map, basemapURL);
    

Update the map

A navigation basemap layer is typically used in geocoding and routing applications. Update the basemap layer to use ArcGIS:Navigation.

  1. Update the basemap and the map initialization to center on location [151.2093, -33.8688], Sydney.

    Change lineChange 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
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>OpenLayers Tutorials: Display a map</title>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          .search {
            position: absolute;
            top: 20px;
            right: 20px;
          #geocode-input, #geocode-button {
            font-size: 16px;
            margin: 0 2px 0 0;
            padding: 4px 8px;
          #geocode-input {
            width: 300px;
        </style>
    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css" />
        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script>
    
        <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
        <script src="https://unpkg.com/ol-popup@4.0.0"></script>
        <link rel="stylesheet" href="https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
    
      </head>
    
      <body>
    
        <div id="map"></div>
    
        <div class="search">
          <input id="geocode-input" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50"/>
          <button id="geocode-button">Geocode</button>
        </div>
    
        <script>
          const map = new ol.Map({ target: "map" });
          map.setView(
            new ol.View({
    
              center: ol.proj.fromLonLat([151.2093, -33.8688]), // Sydney
    
              zoom: 13
            })
          );
    
          const apiKey = "YOUR_API_KEY";
    
          const basemapId = "ArcGIS:Navigation";
    
          const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
          const popup = new Popup();
          document.getElementById("geocode-button").addEventListener("click", () => {
            const query = document.getElementById("geocode-input").value;
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
            const center = ol.proj.transform(map.getView().getCenter(), "EPSG:3857", "EPSG:4326");
                singleLine: query,
                params: {
                  outFields: '*',
                  location: center.join(","),
                  outSR: 3857 // Request coordinates in Web Mercator to simplify displaying
              .then((response) => {
                const result = response.candidates[0];
                if (!result === 0) {
                  alert("That query didn't match any geocoding results.");
                  return;
                const coords = [result.location.x, result.location.y];
              .catch((error) => {
                alert("There was a problem using the geocoder. See the console for details.");
                console.error(error);
         </script>
    
      </body>
    
    </html>

Add references to ArcGIS REST JS

This tutorial uses ArcGIS REST JS for geocoding. It also uses the ol-popup library to display pop-ups.

  1. In the <head> element, add references to the ArcGIS REST JS and ol-popup libraries.

    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
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>OpenLayers Tutorials: Display a map</title>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          .search {
            position: absolute;
            top: 20px;
            right: 20px;
          #geocode-input, #geocode-button {
            font-size: 16px;
            margin: 0 2px 0 0;
            padding: 4px 8px;
          #geocode-input {
            width: 300px;
        </style>
    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css" />
        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script>
    
        <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
        <script src="https://unpkg.com/ol-popup@4.0.0"></script>
        <link rel="stylesheet" href="https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
    
      </head>
    
      <body>
    
        <div id="map"></div>
    
        <div class="search">
          <input id="geocode-input" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50"/>
          <button id="geocode-button">Geocode</button>
        </div>
    
        <script>
          const map = new ol.Map({ target: "map" });
            new ol.View({
              center: ol.proj.fromLonLat([151.2093, -33.8688]), // Sydney
              zoom: 13
          const apiKey = "YOUR_API_KEY";
          const basemapId = "ArcGIS:Navigation";
          const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
          const popup = new Popup();
          document.getElementById("geocode-button").addEventListener("click", () => {
            const query = document.getElementById("geocode-input").value;
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
            const center = ol.proj.transform(map.getView().getCenter(), "EPSG:3857", "EPSG:4326");
                singleLine: query,
                params: {
                  outFields: '*',
                  location: center.join(","),
                  outSR: 3857 // Request coordinates in Web Mercator to simplify displaying
              .then((response) => {
                const result = response.candidates[0];
                if (!result === 0) {
                  alert("That query didn't match any geocoding results.");
                  return;
                const coords = [result.location.x, result.location.y];
              .catch((error) => {
                alert("There was a problem using the geocoder. See the console for details.");
                console.error(error);
         </script>
    
      </body>
    
    </html>

Create geocoder controls

Use an HTML <input> control to type an address into, and a <button> control to initiate the query. Wrap them in a <div>.

  1. In the <body> section, add a div, with a text input control and a button inside.

    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
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>OpenLayers Tutorials: Display a map</title>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          .search {
            position: absolute;
            top: 20px;
            right: 20px;
          #geocode-input, #geocode-button {
            font-size: 16px;
            margin: 0 2px 0 0;
            padding: 4px 8px;
          #geocode-input {
            width: 300px;
        </style>
    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css" />
        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script>
    
        <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
        <script src="https://unpkg.com/ol-popup@4.0.0"></script>
        <link rel="stylesheet" href="https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
    
      </head>
    
      <body>
    
        <div id="map"></div>
    
        <div class="search">
          <input id="geocode-input" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50"/>
          <button id="geocode-button">Geocode</button>
        </div>
    
        <script>
          const map = new ol.Map({ target: "map" });
            new ol.View({
              center: ol.proj.fromLonLat([151.2093, -33.8688]), // Sydney
              zoom: 13
          const apiKey = "YOUR_API_KEY";
          const basemapId = "ArcGIS:Navigation";
          const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
          const popup = new Popup();
          document.getElementById("geocode-button").addEventListener("click", () => {
            const query = document.getElementById("geocode-input").value;
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
            const center = ol.proj.transform(map.getView().getCenter(), "EPSG:3857", "EPSG:4326");
                singleLine: query,
                params: {
                  outFields: '*',
                  location: center.join(","),
                  outSR: 3857 // Request coordinates in Web Mercator to simplify displaying
              .then((response) => {
                const result = response.candidates[0];
                if (!result === 0) {
                  alert("That query didn't match any geocoding results.");
                  return;
                const coords = [result.location.x, result.location.y];
              .catch((error) => {
                alert("There was a problem using the geocoder. See the console for details.");
                console.error(error);
         </script>
    
      </body>
    
    </html>
  2. In the <style> section, style the div with absolute position in the top right corner of the map.

    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
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>OpenLayers Tutorials: Display a map</title>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
    
          .search {
            position: absolute;
            top: 20px;
            right: 20px;
          }
          #geocode-input, #geocode-button {
            font-size: 16px;
            margin: 0 2px 0 0;
            padding: 4px 8px;
          }
          #geocode-input {
            width: 300px;
          }
        </style>
    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css" />
        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script>
    
        <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
        <script src="https://unpkg.com/ol-popup@4.0.0"></script>
        <link rel="stylesheet" href="https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
    
      </head>
    
      <body>
    
        <div id="map"></div>
    
        <div class="search">
          <input id="geocode-input" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50"/>
          <button id="geocode-button">Geocode</button>
        </div>
    
        <script>
          const map = new ol.Map({ target: "map" });
            new ol.View({
              center: ol.proj.fromLonLat([151.2093, -33.8688]), // Sydney
              zoom: 13
          const apiKey = "YOUR_API_KEY";
          const basemapId = "ArcGIS:Navigation";
          const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
          const popup = new Popup();
          document.getElementById("geocode-button").addEventListener("click", () => {
            const query = document.getElementById("geocode-input").value;
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
            const center = ol.proj.transform(map.getView().getCenter(), "EPSG:3857", "EPSG:4326");
                singleLine: query,
                params: {
                  outFields: '*',
                  location: center.join(","),
                  outSR: 3857 // Request coordinates in Web Mercator to simplify displaying
              .then((response) => {
                const result = response.candidates[0];
                if (!result === 0) {
                  alert("That query didn't match any geocoding results.");
                  return;
                const coords = [result.location.x, result.location.y];
              .catch((error) => {
                alert("There was a problem using the geocoder. See the console for details.");
                console.error(error);
         </script>
    
      </body>
    
    </html>

Add a pop-up

You create a Popup to display the found address at its geocoded location. It is a type of Overlay so you add it to the map with map.addOverlay.

For a more advanced pop-up tutorial, see the Display a Pop-up tutorial.

  1. After the map initialization code, create a Popup and save it to a popup variable. Add it to the map with map.addOverlay.

    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
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>OpenLayers Tutorials: Display a map</title>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          .search {
            position: absolute;
            top: 20px;
            right: 20px;
          #geocode-input, #geocode-button {
            font-size: 16px;
            margin: 0 2px 0 0;
            padding: 4px 8px;
          #geocode-input {
            width: 300px;
        </style>
    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css" />
        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script>
    
        <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
        <script src="https://unpkg.com/ol-popup@4.0.0"></script>
        <link rel="stylesheet" href="https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
    
      </head>
    
      <body>
    
        <div id="map"></div>
    
        <div class="search">
          <input id="geocode-input" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50"/>
          <button id="geocode-button">Geocode</button>
        </div>
    
        <script>
          const map = new ol.Map({ target: "map" });
            new ol.View({
              center: ol.proj.fromLonLat([151.2093, -33.8688]), // Sydney
              zoom: 13
          const apiKey = "YOUR_API_KEY";
          const basemapId = "ArcGIS:Navigation";
          const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
    
          olms(map, basemapURL)
    
          const popup = new Popup();
          map.addOverlay(popup);
          document.getElementById("geocode-button").addEventListener("click", () => {
            const query = document.getElementById("geocode-input").value;
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
            const center = ol.proj.transform(map.getView().getCenter(), "EPSG:3857", "EPSG:4326");
                singleLine: query,
                params: {
                  outFields: '*',
                  location: center.join(","),
                  outSR: 3857 // Request coordinates in Web Mercator to simplify displaying
              .then((response) => {
                const result = response.candidates[0];
                if (!result === 0) {
                  alert("That query didn't match any geocoding results.");
                  return;
                const coords = [result.location.x, result.location.y];
              .catch((error) => {
                alert("There was a problem using the geocoder. See the console for details.");
                console.error(error);
         </script>
    
      </body>
    
    </html>

Call the geocoding service

When you click the button, call arcgisRest.geocode with the value of the search query. This uses the findAddressCandidates operation in the ArcGIS REST API to return a number of possible address candidates for your query.

For more control over geocoding, you can pass an IGeocodeOptions instead of a simple string.

  1. Attach a click event handler to the button.

    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
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>OpenLayers Tutorials: Display a map</title>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          .search {
            position: absolute;
            top: 20px;
            right: 20px;
          #geocode-input, #geocode-button {
            font-size: 16px;
            margin: 0 2px 0 0;
            padding: 4px 8px;
          #geocode-input {
            width: 300px;
        </style>
    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css" />
        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script>
    
        <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
        <script src="https://unpkg.com/ol-popup@4.0.0"></script>
        <link rel="stylesheet" href="https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
    
      </head>
    
      <body>
    
        <div id="map"></div>
    
        <div class="search">
          <input id="geocode-input" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50"/>
          <button id="geocode-button">Geocode</button>
        </div>
    
        <script>
          const map = new ol.Map({ target: "map" });
            new ol.View({
              center: ol.proj.fromLonLat([151.2093, -33.8688]), // Sydney
              zoom: 13
          const apiKey = "YOUR_API_KEY";
          const basemapId = "ArcGIS:Navigation";
          const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
          const popup = new Popup();
          map.addOverlay(popup);
    
          document.getElementById("geocode-button").addEventListener("click", () => {
    
            const query = document.getElementById("geocode-input").value;
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
            const center = ol.proj.transform(map.getView().getCenter(), "EPSG:3857", "EPSG:4326");
                singleLine: query,
                params: {
                  outFields: '*',
                  location: center.join(","),
                  outSR: 3857 // Request coordinates in Web Mercator to simplify displaying
              .then((response) => {
                const result = response.candidates[0];
                if (!result === 0) {
                  alert("That query didn't match any geocoding results.");
                  return;
                const coords = [result.location.x, result.location.y];
              .catch((error) => {
                alert("There was a problem using the geocoder. See the console for details.");
                console.error(error);
          });
         </script>
    
      </body>
    
    </html>
  2. Inside the click handler, create a new arcgisRest.ApiKey to access the geocoding service. Call arcgisRest.geocode with the user's search query. Set the params to include the center of the map and set outFields to * to return all fields.

    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
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>OpenLayers Tutorials: Display a map</title>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          .search {
            position: absolute;
            top: 20px;
            right: 20px;
          #geocode-input, #geocode-button {
            font-size: 16px;
            margin: 0 2px 0 0;
            padding: 4px 8px;
          #geocode-input {
            width: 300px;
        </style>
    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css" />
        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script>
    
        <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
        <script src="https://unpkg.com/ol-popup@4.0.0"></script>
        <link rel="stylesheet" href="https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
    
      </head>
    
      <body>
    
        <div id="map"></div>
    
        <div class="search">
          <input id="geocode-input" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50"/>
          <button id="geocode-button">Geocode</button>
        </div>
    
        <script>
          const map = new ol.Map({ target: "map" });
            new ol.View({
              center: ol.proj.fromLonLat([151.2093, -33.8688]), // Sydney
              zoom: 13
          const apiKey = "YOUR_API_KEY";
          const basemapId = "ArcGIS:Navigation";
          const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
          const popup = new Popup();
          document.getElementById("geocode-button").addEventListener("click", () => {
    
            const query = document.getElementById("geocode-input").value;
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
            });
            const center = ol.proj.transform(map.getView().getCenter(), "EPSG:3857", "EPSG:4326");
            arcgisRest
              .geocode({
                singleLine: query,
                authentication,
    
                params: {
                  outFields: '*',
                  location: center.join(","),
                  outSR: 3857 // Request coordinates in Web Mercator to simplify displaying
                }
              })
              .then((response) => {
                const result = response.candidates[0];
                if (!result === 0) {
                  alert("That query didn't match any geocoding results.");
                  return;
                const coords = [result.location.x, result.location.y];
              .catch((error) => {
                alert("There was a problem using the geocoder. See the console for details.");
                console.error(error);
         </script>
    
      </body>
    
    </html>

Show the result

If the query is successful, the candidates property will contain at least one value. To display a pop-up at the location, you use the popup.show method. This sets the pop-up location, and updates its content with an HTML stiring.

  1. Add a response handler. Inside, check that candidates contains at least one value. Use the location property to calculate and store coordinates as an array.

    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
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>OpenLayers Tutorials: Display a map</title>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          .search {
            position: absolute;
            top: 20px;
            right: 20px;
          #geocode-input, #geocode-button {
            font-size: 16px;
            margin: 0 2px 0 0;
            padding: 4px 8px;
          #geocode-input {
            width: 300px;
        </style>
    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css" />
        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script>
    
        <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
        <script src="https://unpkg.com/ol-popup@4.0.0"></script>
        <link rel="stylesheet" href="https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
    
      </head>
    
      <body>
    
        <div id="map"></div>
    
        <div class="search">
          <input id="geocode-input" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50"/>
          <button id="geocode-button">Geocode</button>
        </div>
    
        <script>
          const map = new ol.Map({ target: "map" });
            new ol.View({
              center: ol.proj.fromLonLat([151.2093, -33.8688]), // Sydney
              zoom: 13
          const apiKey = "YOUR_API_KEY";
          const basemapId = "ArcGIS:Navigation";
          const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
          const popup = new Popup();
          document.getElementById("geocode-button").addEventListener("click", () => {
            const query = document.getElementById("geocode-input").value;
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
            const center = ol.proj.transform(map.getView().getCenter(), "EPSG:3857", "EPSG:4326");
                singleLine: query,
                params: {
                  outFields: '*',
                  location: center.join(","),
                  outSR: 3857 // Request coordinates in Web Mercator to simplify displaying
                }
              })
    
              .then((response) => {
                const result = response.candidates[0];
                if (!result === 0) {
                  alert("That query didn't match any geocoding results.");
                  return;
                }
    
                const coords = [result.location.x, result.location.y];
    
              })
              .catch((error) => {
                alert("There was a problem using the geocoder. See the console for details.");
                console.error(error);
         </script>
    
      </body>
    
    </html>
  2. Call popup.show to position the pop-up at the geocoded location. Pass the result's LongLabel attribute to display the full address as the pop-up's HTML content. Call map.setCenter to center the map at the result.

    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
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>OpenLayers Tutorials: Display a map</title>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          .search {
            position: absolute;
            top: 20px;
            right: 20px;
          #geocode-input, #geocode-button {
            font-size: 16px;
            margin: 0 2px 0 0;
            padding: 4px 8px;
          #geocode-input {
            width: 300px;
        </style>
    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css" />
        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script>
    
        <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
        <script src="https://unpkg.com/ol-popup@4.0.0"></script>
        <link rel="stylesheet" href="https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
    
      </head>
    
      <body>
    
        <div id="map"></div>
    
        <div class="search">
          <input id="geocode-input" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50"/>
          <button id="geocode-button">Geocode</button>
        </div>
    
        <script>
          const map = new ol.Map({ target: "map" });
            new ol.View({
              center: ol.proj.fromLonLat([151.2093, -33.8688]), // Sydney
              zoom: 13
          const apiKey = "YOUR_API_KEY";
          const basemapId = "ArcGIS:Navigation";
          const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
          const popup = new Popup();
          document.getElementById("geocode-button").addEventListener("click", () => {
            const query = document.getElementById("geocode-input").value;
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
            const center = ol.proj.transform(map.getView().getCenter(), "EPSG:3857", "EPSG:4326");
                singleLine: query,
                params: {
                  outFields: '*',
                  location: center.join(","),
                  outSR: 3857 // Request coordinates in Web Mercator to simplify displaying
              .then((response) => {
                const result = response.candidates[0];
                if (!result === 0) {
                  alert("That query didn't match any geocoding results.");
                  return;
                const coords = [result.location.x, result.location.y];
    
                popup.show(coords, result.attributes.LongLabel);
                map.getView().setCenter(coords);
              .catch((error) => {
                alert("There was a problem using the geocoder. See the console for details.");
                console.error(error);
         </script>
    
      </body>
    
    </html>

Handle errors

It is good practice to handle situations where there is a problem accessing the service. This could happen due to network disruption or a problem with your API key, for instance.

  1. Check for issues accessing the geocoding service and alert the user.

    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
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>OpenLayers Tutorials: Display a map</title>
    
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          .search {
            position: absolute;
            top: 20px;
            right: 20px;
          #geocode-input, #geocode-button {
            font-size: 16px;
            margin: 0 2px 0 0;
            padding: 4px 8px;
          #geocode-input {
            width: 300px;
        </style>
    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css" />
        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script>
    
        <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script>
        <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
        <script src="https://unpkg.com/ol-popup@4.0.0"></script>
        <link rel="stylesheet" href="https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
    
      </head>
    
      <body>
    
        <div id="map"></div>
    
        <div class="search">
          <input id="geocode-input" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50"/>
          <button id="geocode-button">Geocode</button>
        </div>
    
        <script>
          const map = new ol.Map({ target: "map" });
            new ol.View({
              center: ol.proj.fromLonLat([151.2093, -33.8688]), // Sydney
              zoom: 13
          const apiKey = "YOUR_API_KEY";
          const basemapId = "ArcGIS:Navigation";
          const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
          const popup = new Popup();
          document.getElementById("geocode-button").addEventListener("click", () => {
            const query = document.getElementById("geocode-input").value;
            const authentication = new arcgisRest.ApiKey({
              key: apiKey
            const center = ol.proj.transform(map.getView().getCenter(), "EPSG:3857", "EPSG:4326");
                singleLine: query,
                params: {
                  outFields: '*',
                  location: center.join(","),
                  outSR: 3857 // Request coordinates in Web Mercator to simplify displaying
              .then((response) => {
                const result = response.candidates[0];
                if (!result === 0) {
                  alert("That query didn't match any geocoding results.");
                  return;
                const coords = [result.location.x, result.location.y];
                popup.show(coords, result.attributes.LongLabel);
                map.getView().setCenter(coords);
    
              })
    
              .catch((error) => {
                alert("There was a problem using the geocoder. See the console for details.");
                console.error(error);
              });
         </script>
    
      </body>
    
    </html>

Run the app

In CodePen, run your code to display the map.

In the input box, type "1 Lyon St." or "Starbucks" and then click the Geocode button to find it's location. If a location is found, the map will zoom to it and display a pop-up with the address.

What's next?

Learn how to use additional ArcGIS location services 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.