Search for an address | OpenLayers

Learn how to find an address.

Find the location of addresses with the Geocoding service using API key authentication

Geocoding is the process of converting address or place text to a location. The ArcGIS Geocoding service provides forward 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 Location Platform or ArcGIS Online account.

Steps

Get the starter app

Select a type of authentication and follow the steps to create a new app.

Choose API key authentication if you:

Want the easiest way to get started.
Want to build public applications that access ArcGIS Location Services and secure items.
Have an ArcGIS Location Platform or ArcGIS Online account.

Choose user authentication if you:

Want to build private applications.
Require application users to sign in with their own ArcGIS account and access resources their behalf.
Have an ArcGIS Online account.

To learn more about both types of authentication, go to Authentication.

You can choose one of the following to create a new CodePen:

Option 1: Complete the Display a map tutorial; or,
Option 2: Start from the Display a map tutorial .

Set up authentication

Create a new API key credential with the correct privileges to get an access token.

Go to the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges
  - Location services > Basemaps
  - Location services > Geocoding

Set developer credentials

Use the API key or OAuth developer credentials so your application can access ArcGIS services.

Update the accessToken variable to use your API key.

Expand
Use dark colors for code blocks
    /* Use for API key authentication */
    const accessToken = "YOUR_ACCESS_TOKEN";
Expand

In both the index.html and callback.html files, replace YOUR_CLIENT_ID and YOUR_REDIRECT_URL with the client ID and redirect URL of your OAuth credentials.

index.html
Use dark colors for code blocks
    /* Use for user authentication */
    const clientId = "YOUR_CLIENT_ID"; // Your client ID from OAuth credentials
    const redirectUri = ""YOUR_REDIRECT_URI""; // The redirect URL registered in your OAuth credentials
    const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
      clientId,
      redirectUri,
      portal: "https://www.arcgis.com/sharing/rest" // Your portal URL
    });

    const accessToken = session.token;

callback.html
Use dark colors for code blocks
    arcgisRest.ArcGISIdentityManager.completeOAuth2({
      clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
      redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
      portal: "https://www.arcgis.com/sharing/rest" // Your portal URL
    });

Run the app and ensure you can sign in successfully.

If you are unable to sign in, make sure you have the correct redirect URL and port. This URL varies based on your application and typically takes the format of https://<server>[:port]/callback.html or http://my-arcgis-app:/auth. For example, if you are running an application on http://127.0.0.1:5500/, set http://127.0.0.1:5500/callback.html as your redirect URL in the index.html and callback.html file and your developer credential. They all have to match!

Update the map

An arcgis/navigation basemap style is typically used in geocoding and routing applications. Update the basemap layer to use the style.

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

Expand
Use dark colors for code blocks
    map.setView(
      new ol.View({

        center: ol.proj.fromLonLat([151.2093, -33.8688]), // Sydney

        zoom: 13
      })
    );
Expand

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.

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

Expand
Use dark colors for code blocks
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.6.0/ol.css">
    <script src="https://cdn.jsdelivr.net/npm/ol@v10.6.0/dist/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@13.1.0/dist/olms.js"></script>

    <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
    <script
      src="https://unpkg.com/@esri/arcgis-rest-geocoding@4/dist/bundled/geocoding.umd.js"></script>

    <script src="https://unpkg.com/ol-popup@5.1.1/dist/ol-popup.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ol-popup@5.1.1/src/ol-popup.css">
Expand

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>.

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

Expand
Use dark colors for code blocks

  <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>
Expand

In the <style> section, style the div with absolute position in the top right corner of the map.

Expand
Use dark colors for code blocks
    <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;
    }
Expand

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 complete pop-up tutorial, go to Display a pop-up.

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

Expand
Use dark colors for code blocks
    const popup = new Popup();
    map.addOverlay(popup);
Expand

Call the Geocoding service

When you click the button, call arcgisRest.geocode with the value of the search query. This uses the findAddressCandidates operation from the Geocoding service 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.

Attach a click event handler to the button.

Expand
Use dark colors for code blocks
    const popup = new Popup();
    map.addOverlay(popup);

    document.getElementById("geocode-button").addEventListener("click", () => {

    });
Expand

Inside the click handler, create a new arcgisRest.ApiKeyManager 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.

Expand
Use dark colors for code blocks
    document.getElementById("geocode-button").addEventListener("click", () => {

      const query = document.getElementById("geocode-input").value;

      const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);

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

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 string.

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.

Expand
Use dark colors for code blocks
          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];

        })
Expand

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.

Expand
Use dark colors for code blocks
          const coords = [result.location.x, result.location.y];

          popup.show(coords, result.attributes.LongLabel);
          map.getView().setCenter(coords);
Expand

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.

Check for issues accessing the Geocoding service and alert the user.

Expand
Use dark colors for code blocks
          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);
        });
Expand

Run the app

Run the app.

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 location services in these tutorials:

Reverse geocode

Find the closest address to a clicked location on a map.

Find a route and directions

Find a route and directions from a start and finish location.