Learn how to access the geocoding service.
In this tutorial, you find the location of an address using an input control that has autosuggest enabled.
Prerequisites
An ArcGIS Location Platform or ArcGIS Online account.
Steps
Get the starter app
Select a type of authentication below and follow the steps to create a new application.
Set up authentication
Create developer credentials in your portal for the type of authentication you selected.
Set developer credentials
Use the API key or OAuth developer credentials so your application can access location services.
Make the request
Copy and paste the code below, following the steps to make a request to the Geocoding service.
-
Reference the
arcgis-rest-request
andarcgis-rest-geocoding
libraries either through CDN, ES Modules, or Node JS. -
Define the parameters needed for the request.
-
Make a request to the Geocoding service and handle the results.
function performGeocode(magicKey) {
arcgisRest.geocode({
magicKey,
authentication
}).then((response) => {
console.log("Autosuggest results:", response);
result.textContent = JSON.stringify(response, null, 2);
});
}
input.addEventListener("input", () => {
selectedIndex = -1;
const text = input.value;
if (!text) {
suggestionsList.style.display = "none";
return;
}
arcgisRest.suggest(text, {
authentication,
params: {
location: {
x: -123.102,
y: 49.234,
spatialReference: { wkid: 4326 }
},
maxSuggestions: 5
}
}).then((response) => {
suggestionsList.innerHTML = "";
if (!response.suggestions || response.suggestions.length === 0) {
suggestionsList.style.display = "none";
return;
}
response.suggestions.forEach((s) => {
const li = document.createElement("li");
li.textContent = s.text;
li.addEventListener("click", () => {
input.value = s.text;
suggestionsList.style.display = "none";
performGeocode(s.magicKey)
});
suggestionsList.appendChild(li);
});
suggestionsList.style.display = "block";
});
});
Run the app
Run the app.
The result should look similar to this.What's next?
Learn how to use additional ArcGIS Location Services in these tutorials:
Search for an address
Search for addresses with autosuggest using the geocoding service.
Find a route and directions
Find a route and directions for an origin and destination by accessing the route service.
Find service areas
Create a service area that can be reached from a location within a drive time with the route service.