The Esri Leaflet Geocoder is a small series of API helpers and UI controls to interact with the ArcGIS Online geocoding services.
Currently Esri Leaflet Geocoder is in development. Use at your own risk.
Despite sharing a name and a namespace with Esri Leaflet, Esri Leaflet Geocoder does not require Esri Leaflet. It is however tested with Esri Leaflet and will work just fine with our without it.
Take a look at the live demo at http://esri.github.io/esri-leaflet-geocoder/
<!DOCTYPE html>
<html>
<head>
<title>Esri Leaflet Geocoder</title>
<!-- Load Leaflet from their CDN -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet-src.js"></script>
<!-- Make the map fill the entire page -->
<style>
#map {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<script src="dist/esri-leaflet-geocoder.js"></script>
<link rel="stylesheet" href="dist/esri-leaflet-geocoder.css" />
</head>
<body>
<div id="map"></div>
<a href="https://github.com/Esri/esri-leaflet-geocoder"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
<script>
var map = L.map('map').setView([45.5165, -122.6764], 12);
var tiles = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
// create the geocoding control and add it to the map
var searchControl = new L.esri.Controls.Geosearch().addTo(map);
// create an empty layer group to store the results and add it to the map
var results = new L.LayerGroup().addTo(map);
// listen for the results event and add every result to the map
searchControl.on("results", function(data){
results.clearLayers();
for (var i = data.results.length - 1; i >= 0; i--) {
results.addLayer(L.marker(data.results[i].latlng));
};
});
searchControl.on("error", function(e){
console.log(e);
});
</script>
</body>
</html>Extends L.Control
| Constructor | Options | Description |
|---|---|---|
new L.esri.Controls.Geosearch(options)L.esri.Controls.geosearch(options) |
<GeosearchOptions> |
Creates a new Geosearch control. |
| Option | Type | Default | Description |
|---|---|---|---|
position |
String |
topleft |
On of the valid Leaflet control positions. |
zoomToResult |
Boolean |
true |
If true the map will zoom the result after geocoding is complete. |
useMapBounds |
Boolean or Integer |
11 |
Determines if the geocoder should begin using the bounds of the map to enchance search results. If true the geocoder will always return results in the current map bounds. If false it will always search the world. If an integer like 11 is passed in a search will use the bounds of the map for searching if the map is at a zoom level equal or greater than the integer. |
collapseAfterResult |
Boolean |
true |
If the geocoder is expanded after a result this will collapse it. |
expanded |
Boolean |
true |
Start the control in an expanded state. |
maxResults |
Integer |
25 |
The maximum number of results to return from a geocoding request. Max is 50. |
containerClass |
String |
"geocoder-control" |
Used for styling the geocoder. See the styling guide for more details. |
inputClass |
String |
"geocoder-control-input" |
Used for styling the geocoder. See the styling guide for more details. |
suggestionsWrapperClass |
String |
"geocoder-control-suggestions" |
Used for styling the geocoder. See the styling guide for more details. |
selectedSuggestionClass |
String |
"geocoder-control-selected" |
Used for styling the geocoder. See the styling guide for more details. |
expandedClass |
String |
"geocoder-control-expanded" |
Used for styling the geocoder. See the styling guide for more details. |
| Method | Options | Description |
|---|---|---|
clear() |
null |
Clears the text currently in the geocoder and collapses it if collapseAfterResult is true. |
| Event | Data | Description |
|---|---|---|
load |
null |
A generic event fired when a request to the geocoder starts. |
loading |
null |
A generic event fired when a request to the geocoder finished. |
results |
<ResultsEvent> |
Fired when a result is returned from the geocoder. |
error |
ErrorEvent |
Fired when the geocoding service returns an error. |
Styling the geocoder is possible by changing the containerClass, inputClass, suggestionsWrapperClass, selectedSuggestionClass and expandedClass options. By changing these options to the classes you want to use for styling and then writing your own CSS.
For reference here is the internal structure of the geocoder...
<div class="geocoder-control leaflet-control">
<input class="geocoder-control-input leaflet-bar">
<ul class="geocoder-control-suggestions leaflet-bar">
<li class="geocoder-control-selected">The Selected Result</li>
<li class="geocoder-control-selected">Another Result</li>
</ul>
</div>| Property | Type | Description |
|---|---|---|
bounds |
L.LatLngBounds |
The bounds arround this suggestion. Good for zooming to results like cities and states. |
latlng |
L.LatLng |
The center of the result. |
results |
[<ResultObject>] |
An array of result objects. |
A single result from the geocoder. You should not rely on all these properties being present in every result object.
| Property | Type | Description |
|---|---|---|
text |
String |
The text that was passed to the geocoder. |
bounds |
L.LatLngBounds |
The bounds arround this suggestion. Good for zooming to results like cities and states. |
latlng |
L.LatLng |
The center of the result. |
name |
String |
Name of the geocoded place. Usually something like "Paris" or "Starbucks". |
match |
String |
What was matched internally in the geocoder. Cooresponded to the Addr_type field in the geocoding service. |
country |
String |
The country the geocoded place is located in. |
region |
String |
The largest administrative area for a country that the geocoded palce is in, typically a state or province. |
subregion |
String |
The next largest administrative area for a the geocoded place, typically a county or region. |
city |
String |
The city the geocoded place is located in. |
address |
String |
Complete address returned for the geocoded place. The format is based on address standards for the country within which the address is located. |
A basic wrapper for ArcGIS Online geocoding services. Used internally by L.esri.Controls.Geosearch.
| Constructor | Options | Description |
|---|---|---|
new L.esri.Services.Geocoding(options)L.esri.Controls.geosearch(options) |
<GeosearchOptions> |
Creates a new Geosearch control. |
| Option | Type | Default | Description |
|---|---|---|---|
url |
String |
<WorldGeocodeServiceURL> |
Defaults to the ArcGIS World Geocoding service. |
outFields |
String |
"Subregion, Region, PlaceName, Match_addr, Country, Addr_type, City, Place_addr" | The fields from the service that you would like returned. |
| Method | Options | Description |
|---|---|---|
geocode(text, object, callback) |
<GeocodeOptions> |
Geocodes the specified text with the passed [<GeocodeOptions>``](#geocode-options). callbackwill be calledresponse` as the first parameter. |
suggest(text, object, callback) |
<SuggestOptions> |
Suggests results for text with the given <SuggestOptions>. callback will be called with response as the first parameter. |
| Event | Data | Description |
|---|---|---|
load |
null |
A generic event fired when a request to the geocoder begins. |
loading |
null |
A generic event fired when a request to the geocoder is finished. |
The geocode method can accept any options from the Geocode service with the exception of text.
The suggest method can accept any options from the Suggest service with the exception of text.
- Fork and clone Esri Leaflet Geocoder
cdinto theesri-leaflet-geocoderfolder- Instal the dependancies with
npm install - The example at
/index.htmlshould work - Make your changes and create a pull request
Despite sharing a name and a namespace the Esri Leaflet Geocoder does not require Esri Leaflet. It only requires Leaflet.
- Geocoding Service Documentation
- ArcGIS for Developers
- ArcGIS REST Services
- ArcGIS for JavaScript API Resource Center
- twitter@esri
Find a bug or want to request a new feature? Please let us know by submitting an issue.
Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.
In order the use the ArcGIS Online Geocoding Service you should signup for an ArcGIS for Developers account or purchase an ArcGIS Online Organizational Subscription.
- Once you have an account you are good to go. Thats it!
- Your users can search for as many places as they want. Esri defines this as "Geosearch" and its free. You only consume credits when you want to store the result of geocodes.
- You are not allowed to store the results of any geocoding you do. There is a
forStorageflag which you can set that will allow this. There is an issue for including theforStorageflag - If you use this library in a revenue generating application or for goverment use you must upgrade to a paid account. You are not allowed to generate revenue while on a free plan.
This information is from the ArcGIS for Developers Terms of Use FAQ and the ArcGIS Online World Geocoder documentation
Copyright 2013 Esri
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
A copy of the license is available in the repository's license.txt file.
[](Esri Tags: ArcGIS Web Mapping Leaflet Geocoding) [](Esri Language: JavaScript)