Suggestions displayed as characters are added using a widget and the geocoding serivce
Autosuggest, also known as autocomplete , is the process of using incomplete text to search for place names and addresses. For example, you can search for "New Y", "Dodgers S", and "Cali" to get a list of suggested place names that match.
You can use autosuggest to build applications that:
Autocomplete addresses and places as you type. Provide a list of suggestions for incomplete address and place names. Refine place names and addresses to improve geocoding accuracy. You can get address and place name suggestions by making an HTTP request to the geocoding service suggest operation or by using client APIs . Specify the address or place name text, and optionally, additional parameters to refine the search.
You can provide text for a partial place name or a partial address to get search results. Typically 2-3 characters are needed to start searching.
To refine the search and improve accuracy, you can provide additional information such as the location , search extent , category , and country code .
The geocoding service parses the text and uses all of the parameters provided to return a set of suggestions . Each suggestion contains text (address or place name), isCollection (single distinct place or multiple with the same name or category), and magicKey (search identifier) properties.
1
https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?<parameters>
Name Description Examples textThe partial address or place name. Different formats are supported. text=starbutext=100, main sttext=New Y
Additional parameters: Refine the search by using parameters such as location, searchExtent, category, and countryCode.
This example finds suggestions for the string New Y. To find the actual address and location for a suggestion, you have to pass each text and magicKey value to the geocoding service. Most APIs provide a LocatorTask to access the service.
Reference the geocoding service .
Set the text to search for.
Set the API key.
The response is a set of suggestions (max of 5) containing the text and magicKey properties. Use these properties to search for the complete address with a location.
ArcGIS JS API ArcGIS JS API Esri Leaflet Mapbox GL JS OpenLayers ArcGIS REST JS ArcGIS .NET API ArcGIS Android API ArcGIS iOS API ArcGIS Java API ArcGIS Qt API (C++) ArcGIS Qt API (QML) Show more lines
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" >
< title > ArcGIS Developer Guide: Forward geocoding </ title >
<!-- ArcGIS Mapping APIs and Location Services Developer Guide
Learn more: https://developers.arcgis.com/documentation/mapping-apis-and-services/search/
-->
< style >
html , body , #viewDiv {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
}
</ style >
< link rel = "stylesheet" href = "https://js.arcgis.com/4.20/esri/themes/light/main.css" >
< script src = "https://js.arcgis.com/4.20/" > </ script >
< script >
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/Graphic" ,
"esri/rest/locator" ,
], ( esriConfig, Map , MapView, Graphic, locator )=> {
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-light-gray" , //Basemap layer service
});
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [- 25 , 30 ],
zoom : 2 ,
constraints : {
snapToZoom : false
}
});
view.popup.actions = [];
const select = document .createElement( "select" , "" );
select.setAttribute( "class" , "esri-widget esri-select" );
select.setAttribute(
"style" ,
"width: 275px; font-family: 'Avenir Next'; font-size: 1em"
);
const option = document .createElement( "option" );
option.innerHTML = "See suggestions for \"New Y\"..." ;
select.appendChild(option);
view.ui.add(select, "top-right" );
view.when( () => {
locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer" ;
const params = {
text : "New Y" , // Suggestion text
};
locator.suggestLocations(locatorUrl, params).then( ( response ) => {
// Show a list of the suggestions
response.forEach( ( suggestion ) => {
showSuggestion(suggestion.text, suggestion.magicKey);
});
// When a suggestion is selected, geocode to find its location
select.addEventListener( "change" , ( event ) => {
const text = event.target.innerHTML;
const magicKey = event.target.value;
geocodeSuggestion(text, magicKey);
});
});
});
function showSuggestion ( text, magicKey ) {
const option = document .createElement( "option" );
option.innerHTML = text;
option.value = magicKey;
select.appendChild(option);
}
function geocodeSuggestion ( suggestionText, magicKey ) {
const params = {
SingeLine : suggestionText, // suggestion text
address : {
magicKey : magicKey, // suggestion magic key
},
outFields : [ "PlaceName" , "Place_addr" , "LongLabel" ],
};
// Geocode suggestion and show location
locator.addressToLocations(locatorUrl,params).then( ( results ) => {
showSearchResult(results);
});
}
function showSearchResult ( results ) {
if (!results.length) {
return ;
}
const result = results[ 0 ];
view.graphics.removeAll();
const graphic = new Graphic({
symbol : {
type : "simple-marker" ,
color : "#000000" ,
size : "8px" ,
outline : {
color : "#ffffff" ,
width : "1px" ,
},
},
geometry : result.location,
attributes : result.attributes,
popupTemplate : {
title : "{PlaceName}" ,
content :
"{LongLabel}" +
"<br><br>" +
result.location.longitude.toFixed( 5 ) +
"," +
result.location.latitude.toFixed( 5 ),
},
});
view.graphics.add(graphic);
view.popup.open({
features : [graphic],
location : result.location,
});
view.goTo({
target : result.location,
zoom : 13 ,
});
}
});
</ script >
</ head >
< body >
< div id = "viewDiv" > </ div >
</ body >
</ html >
Show more lines
Request Response
1
2
3
4
curl https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer \
-d 'f=pjson' \
-d 'text=New Y' \
-d 'token=<ACCESS_TOKEN>'
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
{
"suggestions" : [
{
"text" : "New York, NY, USA" ,
"magicKey" : "dHA9MCNsb2M9NzUwOTc4OCNsbmc9MzMjcGw9MjcxNjU1MyNsYnM9MTQ6MjM4MTIyMzc=" ,
"isCollection" : false
},
{
"text" : "New York, USA" ,
"magicKey" : "dHA9MCNsb2M9NzMxOTEwOCNsbmc9MzMjcGw9MjU5OTMyMyNsYnM9MTQ6MjM4MTIyMzc=" ,
"isCollection" : false
},
{
"text" : "New York international Airport, New York, NY, USA" ,
"magicKey" : "dHA9MCNsb2M9OTc0ODU4OCNsbmc9MzMjcGw9MzYwNTMyOSNsYnM9MTQ6MjM4MTMzMTk=" ,
"isCollection" : false
},
{
"text" : "New York Stad, Nouvieau York, NY, USA" ,
"magicKey" : "dHA9MCNsb2M9OTc0ODY4OCNsbmc9MzMjcGw9MzYwNzI0MyNsYnM9MTQ6MjM4MTMwOTc=" ,
"isCollection" : false
},
{
"text" : "New York Mills, NY, USA" ,
"magicKey" : "dHA9MCNsb2M9NzUwMTA0MyNsbmc9MzMjcGw9MjcxMzU0MyNsYnM9MTQ6MjM4MTI4NDA=" ,
"isCollection" : false
}
]
}
Show more lines
Search for addresses, businesses, and places around the world.
Geocoding Reverse Geocoding Batch Geocoding Place/POI Search Autosuggest UI Component ArcGIS API for JavaScript Fully supported Fully supported Fully supported Fully supported Fully supported Fully supported ArcGIS API for Android Fully supported Fully supported Fully supported Fully supported Fully supported Not supported ArcGIS API for iOS Fully supported Fully supported Fully supported Fully supported Fully supported Not supported ArcGIS API for Java Fully supported Fully supported Fully supported Fully supported Fully supported Not supported ArcGIS API for .NET Fully supported Fully supported Fully supported Fully supported Fully supported Not supported ArcGIS API for Qt Fully supported Fully supported Fully supported Fully supported Fully supported Not supported ArcGIS API for Python Fully supported Fully supported Fully supported Fully supported Fully supported Not supported Esri Leaflet Fully supported Fully supported Access via ArcGIS REST JS Fully supported Fully supported Fully supported MapBox GL JS Access via ArcGIS REST JS Access via ArcGIS REST JS Access via ArcGIS REST JS Access via ArcGIS REST JS Access via ArcGIS REST JS Not supported OpenLayers Access via ArcGIS REST JS Access via ArcGIS REST JS Access via ArcGIS REST JS Access via ArcGIS REST JS Access via ArcGIS REST JS Not supported ArcGIS REST JS Fully supported Fully supported Fully supported Fully supported Fully supported Not supported
Developer dashboard Manage API keys, service usage, and data with the ArcGIS Developers website.
ArcGIS Online Create, manage, and share content and data with cloud-based GIS tools.
Map Viewer Create, explore, and share web maps for 2D applications.
Scene Viewer Create, explore, and share web scenes for 3D applications.
ArcGIS Pro Explore, visualize, and analyze both 2D and 3D data with desktop GIS tools.
