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 provides address and place geocoding as well as reverse geocoding.
Esri Leaflet provides a geocoder to access the geocoding service. In this tutorial, you use the Geosearch control to search for addresses and places.
Prerequisites You need an ArcGIS Developer or ArcGIS Online 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
55
56
57
58
const map = L.map( "map" , {
minZoom : 2
})
map.setView([ 34.02 , - 118.805 ], 13 );
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Streets" ;
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
Reference the geocoder Reference the Esri Leaflet Geocoder plugin and its CSS stylesheet.
Expand
Use dark colors for code blocks
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
<!-- Load Leaflet from CDN -->
< link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin = "" />
< script src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@3.0.10/dist/esri-leaflet.js" > </ script >
< script src = "https://unpkg.com/esri-leaflet-vector@4.0.2/dist/esri-leaflet-vector.js" > </ script >
<!-- Load Esri Leaflet Geocoder from CDN -->
< link rel = "stylesheet" href = "https://unpkg.com/esri-leaflet-geocoder@3.1.4/dist/esri-leaflet-geocoder.css" >
< script src = "https://unpkg.com/esri-leaflet-geocoder@3.1.4/dist/esri-leaflet-geocoder.js" > </ script >
Update the map A navigation basemap layer is typically used in geocoding and routing applications. Update the basemap layer to use ArcGIS:.
Update the basemap style and change the map view to center on location [151.2093, -33.8688], Sydney.
Expand
Use dark colors for code blocks
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
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Navigation" ;
const map = L.map( "map" , {
minZoom : 2
})
map.setView([- 33.8688 , 151.2093 ], 14 ); // Sydney
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
Add the Geosearch control Use the Geosearch
Add the control to the topright corner of the map. Create placeholder text and set usefalse.
Expand
Use dark colors for code blocks
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
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 ,
}).addTo(map);
Set the providers to arcgis in order to access the geocoding service. Set your api and the lat and lng so that the geocoder returns the geocoded results for Sydney first.
Expand
Use dark colors for code blocks
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
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);
Run your app, and interact with the auto-complete enabled search control.
Display results You can display the resultsMarkerPopup
Add a Layer
Expand
Use dark colors for code blocks
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
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);
Create an event handler to access the data from the search results. Call the clearLayer
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
91
92
93
94
95
96
const results = L.layerGroup().addTo(map);
searchControl.on( "results" , ( data ) => {
results.clearLayers();
});
Create a loop that adds the coordinates of a selected search results to a Marker
Expand
Use dark colors for code blocks
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
const results = L.layerGroup().addTo(map);
searchControl.on( "results" , ( data ) => {
results.clearLayers();
for ( let i = data.results.length - 1 ; i >= 0 ; i--) {
const marker = L.marker(data.results[i].latlng);
results.addLayer(marker);
}
});
Add a lng variable that stores the rounded search result coordinates. Append the bindmarker to display the coordinates and address of the result.
More info To learn more about using pop-ups with Esri Leaflet, go to the Display a pop-up tutorial.
Expand
Use dark colors for code blocks
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
const results = L.layerGroup().addTo(map);
searchControl.on( "results" , ( data ) => {
results.clearLayers();
for ( let i = data.results.length - 1 ; i >= 0 ; i--) {
const marker = L.marker(data.results[i].latlng);
const lngLatString = ` ${ Math .round(data.results[i].latlng.lng * 100000 ) / 100000 } , ${
Math .round(data.results[i].latlng.lat * 100000 ) / 100000
} ` ;
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:
