Search for an address
Learn how to find an address or place using a search box and the geocoding service.
Geocoding is the process of converting address or place text to a location. The geocoding service provides address and place geocoding 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 account to access the developer dashboard and create an API key.
Steps
Create a new pen
- To get started, either complete the Display a map tutorial or .
Set the API key
To access location services, you need an API key or OAuth 2.0 access token.
Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.
In CodePen, update
apiKeyto use your key.Change line 1 2 3 4 5 6 7 8 9 10// const apiKey = "YOUR_API_KEY"; const basemapEnum = "ArcGIS:Streets"; const map = new mapboxgl.Map({ container: "map", // the id of the div element style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`, zoom: 12, // starting zoom center: [-118.805, 34.027] // starting location [longitude, latitude] });
Add references to ArcGIS REST JS
This tutorial uses ArcGIS REST JS for geocoding.
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
<script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script>
<script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
<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>
</head>
<body>
<div id="map"></div>
<script>
const apiKey = "YOUR_API_KEY";
const basemapEnum = "ArcGIS:Navigation";
const map = new mapboxgl.Map({
container: "map",
style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
zoom: 13,
center: [151.2093, -33.8688] // Sydney
});
class GeocodeControl {
onAdd(map) {
const template = document.createElement("template");
template.innerHTML = `
<div id="geocode-container">
<input id="geocode-input" class="mapboxgl-ctrl" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50" />
<button id="geocode-button" class="mapboxgl-ctrl">Geocode</button>
</div>
`;
return template.content;
}
}
const geocodeControl = new GeocodeControl();
map.addControl(geocodeControl, 'top-left');
document.getElementById("geocode-button").addEventListener("click", () => {
const query = document.getElementById("geocode-input").value;
const authentication = new arcgisRest.ApiKey({
key: apiKey
});
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 mapboxgl.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);
});
});
</script>
</body>
</html>Update the map
A navigation basemap layer is typically used in geocoding and routing applications. Update the basemap layer to use ArcGIS:Navigation.
Update the basemap and the map initialization to center on location
[151.2093, -33.8688], Sydney.Change line Change line 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<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" /> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <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> </head> <body> <div id="map"></div> <script> const apiKey = "YOUR_API_KEY"; const basemapEnum = "ArcGIS:Navigation"; const map = new mapboxgl.Map({ container: "map", style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`, zoom: 13, center: [151.2093, -33.8688] // Sydney }); class GeocodeControl { onAdd(map) { const template = document.createElement("template"); template.innerHTML = ` <div id="geocode-container"> <input id="geocode-input" class="mapboxgl-ctrl" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50" /> <button id="geocode-button" class="mapboxgl-ctrl">Geocode</button> </div> `; return template.content; } } const geocodeControl = new GeocodeControl(); map.addControl(geocodeControl, 'top-left'); document.getElementById("geocode-button").addEventListener("click", () => { const query = document.getElementById("geocode-input").value; const authentication = new arcgisRest.ApiKey({ key: apiKey }); 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 mapboxgl.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); }); }); </script> </body> </html>
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 Mapbox GL JS IControl interface.
Create a
GeocodeControlclass with anonAddfunction. Inside, create a<div>element with an<input>and a<button>inside. You can usedocument.createElementto create atemplatewith this HTML inside. Return this element.Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" /> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <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> </head> <body> <div id="map"></div> <script> const apiKey = "YOUR_API_KEY"; const basemapEnum = "ArcGIS:Navigation"; const map = new mapboxgl.Map({ container: "map", style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`, zoom: 13, center: [151.2093, -33.8688] // Sydney }); class GeocodeControl { onAdd(map) { const template = document.createElement("template"); template.innerHTML = ` <div id="geocode-container"> <input id="geocode-input" class="mapboxgl-ctrl" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50" /> <button id="geocode-button" class="mapboxgl-ctrl">Geocode</button> </div> `; return template.content; } } const geocodeControl = new GeocodeControl(); map.addControl(geocodeControl, 'top-left'); document.getElementById("geocode-button").addEventListener("click", () => { const query = document.getElementById("geocode-input").value; const authentication = new arcgisRest.ApiKey({ key: apiKey }); 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 mapboxgl.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); }); }); </script> </body> </html>Add the
geocodeControlelement to thetop-leftof the view.Add line. Add line. 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<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" /> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <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> </head> <body> <div id="map"></div> <script> const apiKey = "YOUR_API_KEY"; const basemapEnum = "ArcGIS:Navigation"; const map = new mapboxgl.Map({ container: "map", style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`, zoom: 13, center: [151.2093, -33.8688] // Sydney }); class GeocodeControl { onAdd(map) { const template = document.createElement("template"); template.innerHTML = ` <div id="geocode-container"> <input id="geocode-input" class="mapboxgl-ctrl" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50" /> <button id="geocode-button" class="mapboxgl-ctrl">Geocode</button> </div> `; return template.content; } } const geocodeControl = new GeocodeControl(); map.addControl(geocodeControl, 'top-left'); document.getElementById("geocode-button").addEventListener("click", () => { const query = document.getElementById("geocode-input").value; const authentication = new arcgisRest.ApiKey({ key: apiKey }); 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 mapboxgl.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); }); }); </script> </body> </html>Style the input box and button to be the same height.
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" /> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <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> </head> <body> <div id="map"></div> <script> const apiKey = "YOUR_API_KEY"; const basemapEnum = "ArcGIS:Navigation"; const map = new mapboxgl.Map({ container: "map", style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`, zoom: 13, center: [151.2093, -33.8688] // Sydney }); class GeocodeControl { onAdd(map) { const template = document.createElement("template"); template.innerHTML = ` <div id="geocode-container"> <input id="geocode-input" class="mapboxgl-ctrl" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50" /> <button id="geocode-button" class="mapboxgl-ctrl">Geocode</button> </div> `; return template.content; } } const geocodeControl = new GeocodeControl(); map.addControl(geocodeControl, 'top-left'); document.getElementById("geocode-button").addEventListener("click", () => { const query = document.getElementById("geocode-input").value; const authentication = new arcgisRest.ApiKey({ key: apiKey }); 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 mapboxgl.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); }); }); </script> </body> </html>
Call the geocoding service
When you click the button, call arcgisRest.geocode with the value of the search query. This uses the findAddressCandidates operation in the ArcGIS REST API 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.
Add line. Add line. Add line. 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<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" /> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <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> </head> <body> <div id="map"></div> <script> const apiKey = "YOUR_API_KEY"; const basemapEnum = "ArcGIS:Navigation"; const map = new mapboxgl.Map({ container: "map", style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`, zoom: 13, center: [151.2093, -33.8688] // Sydney }); class GeocodeControl { onAdd(map) { const template = document.createElement("template"); template.innerHTML = ` <div id="geocode-container"> <input id="geocode-input" class="mapboxgl-ctrl" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50" /> <button id="geocode-button" class="mapboxgl-ctrl">Geocode</button> </div> `; return template.content; } } const geocodeControl = new GeocodeControl(); map.addControl(geocodeControl, 'top-left'); document.getElementById("geocode-button").addEventListener("click", () => { const query = document.getElementById("geocode-input").value; const authentication = new arcgisRest.ApiKey({ key: apiKey }); 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 mapboxgl.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); }); }); </script> </body> </html>Inside the click handler, create a new
arcgisRest.ApiKeyto access the geocoding service. CallarcgisRest.geocodewith the user's search query. Set theparamsto include the center of the map and setoutFieldsto*to return all fields.Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" /> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <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> </head> <body> <div id="map"></div> <script> const apiKey = "YOUR_API_KEY"; const basemapEnum = "ArcGIS:Navigation"; const map = new mapboxgl.Map({ container: "map", style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`, zoom: 13, center: [151.2093, -33.8688] // Sydney }); class GeocodeControl { onAdd(map) { const template = document.createElement("template"); template.innerHTML = ` <div id="geocode-container"> <input id="geocode-input" class="mapboxgl-ctrl" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50" /> <button id="geocode-button" class="mapboxgl-ctrl">Geocode</button> </div> `; return template.content; } } const geocodeControl = new GeocodeControl(); map.addControl(geocodeControl, 'top-left'); document.getElementById("geocode-button").addEventListener("click", () => { const query = document.getElementById("geocode-input").value; const authentication = new arcgisRest.ApiKey({ key: apiKey }); 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 mapboxgl.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); }); }); </script> </body> </html>
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
candidatescontains at least one value. Use thelocationproperty to add a popup to the map and set the HTML of the popup toLongLabelto display the full address.To add a popup to the map, you use the
Popupclass in Mapbox GL JS. See the Display a pop-up tutorial for more information.Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" /> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <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> </head> <body> <div id="map"></div> <script> const apiKey = "YOUR_API_KEY"; const basemapEnum = "ArcGIS:Navigation"; const map = new mapboxgl.Map({ container: "map", style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`, zoom: 13, center: [151.2093, -33.8688] // Sydney }); class GeocodeControl { onAdd(map) { const template = document.createElement("template"); template.innerHTML = ` <div id="geocode-container"> <input id="geocode-input" class="mapboxgl-ctrl" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50" /> <button id="geocode-button" class="mapboxgl-ctrl">Geocode</button> </div> `; return template.content; } } const geocodeControl = new GeocodeControl(); map.addControl(geocodeControl, 'top-left'); document.getElementById("geocode-button").addEventListener("click", () => { const query = document.getElementById("geocode-input").value; const authentication = new arcgisRest.ApiKey({ key: apiKey }); 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 mapboxgl.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); }); }); </script> </body> </html>Use Mapbox GL JS's
panTomethod 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
jumpToinstead.Add line. 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<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" /> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <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> </head> <body> <div id="map"></div> <script> const apiKey = "YOUR_API_KEY"; const basemapEnum = "ArcGIS:Navigation"; const map = new mapboxgl.Map({ container: "map", style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`, zoom: 13, center: [151.2093, -33.8688] // Sydney }); class GeocodeControl { onAdd(map) { const template = document.createElement("template"); template.innerHTML = ` <div id="geocode-container"> <input id="geocode-input" class="mapboxgl-ctrl" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50" /> <button id="geocode-button" class="mapboxgl-ctrl">Geocode</button> </div> `; return template.content; } } const geocodeControl = new GeocodeControl(); map.addControl(geocodeControl, 'top-left'); document.getElementById("geocode-button").addEventListener("click", () => { const query = document.getElementById("geocode-input").value; const authentication = new arcgisRest.ApiKey({ key: apiKey }); 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 mapboxgl.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); }); }); </script> </body> </html>
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.
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
<script src="https://unpkg.com/@esri/arcgis-rest-geocoding@3.0.0/dist/umd/geocoding.umd.js"></script>
<script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
<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>
</head>
<body>
<div id="map"></div>
<script>
const apiKey = "YOUR_API_KEY";
const basemapEnum = "ArcGIS:Navigation";
const map = new mapboxgl.Map({
container: "map",
style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
zoom: 13,
center: [151.2093, -33.8688] // Sydney
});
class GeocodeControl {
onAdd(map) {
const template = document.createElement("template");
template.innerHTML = `
<div id="geocode-container">
<input id="geocode-input" class="mapboxgl-ctrl" type="text" placeholder="Enter an address or place e.g. 1 York St" size="50" />
<button id="geocode-button" class="mapboxgl-ctrl">Geocode</button>
</div>
`;
return template.content;
}
}
const geocodeControl = new GeocodeControl();
map.addControl(geocodeControl, 'top-left');
document.getElementById("geocode-button").addEventListener("click", () => {
const query = document.getElementById("geocode-input").value;
const authentication = new arcgisRest.ApiKey({
key: apiKey
});
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 mapboxgl.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);
});
});
</script>
</body>
</html>Run the app
In CodePen, run your code to display the map.
In the input box, type "1 King 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 ArcGIS location services in these tutorials:
Solution
Estimated time
10 minutes
Was this page helpful?
Solution
Estimated time
10 minutes