Search for an address
Learn how to find an address or place with a search widget and the Geocoding service.
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. Use the Search
widget to access the Geocoding service and perform interactive searches.
In this tutorial, you use the Search
widget to search for addresses and places.
Prerequisites
You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.
Steps
Create a new pen
- To get started, either complete the Display a map tutorial or .
Set the API key
To access ArcGIS services, you need an API key.
Go to your dashboard to get an API key.
In CodePen, set the
api
to your key, so it can be used to access basemap layer and location services.Key Use dark colors for code blocks Change line
Add modules
In the
require
statement, add theSearch
module.Use dark colors for code blocks Add line. Change line
Update the map
A streets basemap layer is typically used in geocoding applications. Update the basemap
property to use the arcgis-navigation
basemap layer and change the position of the map to center on Seattle.
Update the
basemap
property fromarcgis-topographic
toarcgis-navigation
.Use dark colors for code blocks Change line Update the
center
property to[-122.3321, 47.6062]
and set thezoom
property to12
to center on Seattle.Use dark colors for code blocks Change line Change line
Add a Search widget
The Search
widget is a visible control that allows you to interactively search for addresses and places. It provides suggestions as you type and allows you to select a result. When you select a result, it zooms to a location and displays a pop-up with the address information. By default, the widget uses a locator
and source
that accesses the Geocoding service.
Create a
Search
widget. Set theview
property toview
.Use dark colors for code blocks Add line. Add line. Add line. Add the widget to the top right corner of the view. Learn more about adding UI components to the
view
in DefaultUI.Use dark colors for code blocks Add line.
Run the app
In CodePen, run your code to display the map.
Try searching for the following locations:
The map should display a Search
widget and that allows you to interactively search for addresses and places.
What's next?
Learn how to use additional API features and ArcGIS services in these tutorials: