Search for an address | MapLibre GL JS

Learn how to search for an address.

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

The ArcGIS Geocoding service allows to search for an address or a place, find candidate matches, and return complete addresses with a location.

In this tutorial, use the MapLibre ArcGIS plugin to display a map and ArcGIS REST JS to access the Geocoding service. 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 to follow the steps to get an access token with these 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 blocksCopy
    /* 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 blocksCopy
    /* 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 blocksCopy
    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!

Add references to ArcGIS REST JS

This tutorial uses ArcGIS REST JS to access the geocoding service.

In the <head> element, add references to the ArcGIS REST JS request and geocoding libraries.

Expand
Use dark colors for code blocks

  <head>
    <title>MapLibre ArcGIS tutorial: Search for an address</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <!-- Load MapLibre GL JS from CDN -->
    <script src="https://unpkg.com/maplibre-gl@5.23.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@5.23.0/dist/maplibre-gl.css" rel="stylesheet">
    <!-- Load MapLibre ArcGIS from CDN -->
    <script src="https://unpkg.com/@esri/maplibre-arcgis@1.1.0/dist/umd/maplibre-arcgis.min.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>
Expand

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 blocksCopy
    const map = new maplibregl.Map({
      container: "map",
      zoom: 13,

      center: [151.2093, -33.8688] // Sydney

    });

    const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, {
      style: "arcgis/navigation",
      token: accessToken
    });
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>.

To add the <div> element as a Map control, you create an object that implements the MapLibre GL JS IControl interface.

Create a GeocodeControl class with an onAdd function. Inside, create a <div> element with an <input> and a <button> inside. You can use document.createElement to create a template with this HTML inside. Return this element.

Expand
Use dark colors for code blocks
    const map = new maplibregl.Map({
      container: "map",
      zoom: 13,

      center: [151.2093, -33.8688] // Sydney

    });

    const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, {
      style: "arcgis/navigation",
      token: accessToken
    });

    class GeocodeControl {
      onAdd() {
        const template = document.createElement("template");
        template.innerHTML = `
            <div id="geocode-container">
              <input id="geocode-input" class="maplibregl-ctrl" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50" />
              <button id="geocode-button" class="maplibregl-ctrl">Geocode</button>
            </div>
          `;

        return template.content;
      }
    }
Expand

Add the geocodeControl element to the top-left of the view.

Expand
Use dark colors for code blocks
        return template.content;
      }
    }

    const geocodeControl = new GeocodeControl();
    map.addControl(geocodeControl, "top-left");
Expand

Style the input box and button to be the same height.

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


    #geocode-container {
      display: inline-flex;
      margin: 20px;
    }

    #geocode-input,
    #geocode-button {
      font-size: 16px;
      margin: 0 2px 0 0;
      padding: 4px 8px;
    }

    #geocode-input {
      width: 300px;
    }

    </style>
Expand

Call the geocoding service

When you click the button, call geocode with the value of the search query. This uses the findAddressCandidates operation in the geocoding service.

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 geocodeControl = new GeocodeControl();
    map.addControl(geocodeControl, "top-left");

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

      arcgisRest
        .geocode({
          singleLine: query,
          authentication,
          params: {
            location: map.getCenter().toArray().join(","), // center of map as longitude,latitude
            outFields: "*" // return all fields
          }
        })

    });
Expand

Show the result

If the query is successful, the candidates property will contain at least one value. To display the first candidate on the map, create a pop-up and add it to the map.

Add a response handler. Inside, check that candidates contains at least one value. Use the location property to add a popup to the map and set the HTML of the popup to LongLabel to display the full address.

To add a popup to the map, you use the Popup class in MapLibre GL JS. See the Display a pop-up tutorial for more information.

Expand
Use dark colors for code blocks
      arcgisRest
        .geocode({
          singleLine: query,
          authentication,
          params: {
            location: map.getCenter().toArray().join(","), // center of map as longitude,latitude
            outFields: "*" // return all fields
          }
        })

        .then((response) => {

          const result = response.candidates[0];
          if (!result) {
            alert("That query didn't match any geocoding results.");
            return;
          }
          const lngLat = [result.location.x, result.location.y];

          new maplibregl.Popup().setLngLat(lngLat).setHTML(result.attributes.LongLabel).addTo(map);

        })
Expand

Use MapLibre GL JS's panTo method to center the map at the result.

This transitions the map smoothly from the current location to the result. To instantly reposition the map to that location, you could use jumpTo instead.

Expand
Use dark colors for code blocks
          new maplibregl.Popup().setLngLat(lngLat).setHTML(result.attributes.LongLabel).addTo(map);

          map.panTo(lngLat);
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
          new maplibregl.Popup().setLngLat(lngLat).setHTML(result.attributes.LongLabel).addTo(map);

          map.panTo(lngLat);

        })

        .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 King St." or "Starbucks" and then click the Geocode button to find its 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.

Map showing a calculated driving route through downtown Toronto with turn‑by‑turn directions.

Find a route and directions

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