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 into a location . The Geocoding service can search for an address or a place and perform reverse geocoding . Use the Esri Leaflet Geocoder module to access the Geocoding service and perform interactive searches.
In this tutorial, you use the Esri Leaflet Geocoder Geosearch control to search for addresses and places.
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 use this pen . Set the API key To access location services , you need an API key or OAuth 2.0 access token . To learn how to create and scope your key, visit the Create an API key tutorial.
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 api to use your key.
Use dark colors for code blocks
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
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Streets" ;
const map = L.map( "map" , {
minZoom : 2
}).setView([ 34.02 , - 118.805 ], 13 );
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
Reference the geocoder Import the Esri Leaflet Geocoder module from the CDN.
Expand
Use dark colors for code blocks
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
<!-- Load Esri Leaflet Geocoder from CDN -->
< link rel = "stylesheet" href = "https://unpkg.com/esri-leaflet-geocoder@^3.0.0/dist/esri-leaflet-geocoder.css" ">
< script src = "https://unpkg.com/esri-leaflet-geocoder@^3.0.0/dist/esri-leaflet-geocoder.js" > </ script >
Add code to find addresses Add the following code to add the Esri Leaflet Geocoder control to the map:
Change the basemap layer to Navigation and set the location to Sydney. Create the geocoder and add it to the map. Create a group for the marker. Use a handler to add the result as a marker. Expand
Use dark colors for code blocks
Change line Change 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. 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. 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
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Navigation" ;
const map = L.map( "map" , {
minZoom : 2
}).setView([- 33.8688 , 151.2093 ], 14 ); // Sydney
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
const searchControl = L.esri.Geocoding.geosearch({
position : "topright" ,
placeholder : "Enter an address or place e.g. 1 York St" ,
useMapBounds : false ,
providers : [
L.esri.Geocoding.arcgisOnlineProvider({
apikey : apiKey,
nearby : {
lat : - 33.8688 ,
lng : 151.2093
}
})
]
}).addTo(map);
const results = L.layerGroup().addTo(map);
searchControl.on( "results" , ( data ) => {
results.clearLayers();
for ( let i = data.results.length - 1 ; i >= 0 ; i--) {
const lngLatString = ` ${ Math .round(data.results[i].latlng.lng * 100000 ) / 100000 } , ${
Math .round(data.results[i].latlng.lat * 100000 ) / 100000
} ` ;
const marker = L.marker(data.results[i].latlng);
marker.bindPopup( `<b> ${lngLatString} </b><p> ${data.results[i].properties.LongLabel} </p>` );
results.addLayer(marker);
marker.openPopup();
}
});
Run the app In CodePen , run your code to display the map.
Click on the geocoder control and enter an address or place such as "Starbucks". When you select a result, the map will zoom to its location.
What's next? Learn how to use additional ArcGIS location services in these tutorials:
