The Esri Leaflet Geocoder is a small series of API helpers and UI controls to interact with the ArcGIS Online geocoding services.
Take a look at the live demo.
<!DOCTYPE html>
<html>
<head>
<title>Esri Leaflet Geocoder</title>
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<!-- Esri Leaflet -->
<script src="//cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.7/esri-leaflet.js"></script>
<!-- Esri Leaflet Geocoder -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet.esri.geocoder/2.0.3/esri-leaflet-geocoder.css">
<script src="//cdn.jsdelivr.net/leaflet.esri.geocoder/2.0.3/esri-leaflet-geocoder.js"></script>
<!-- Make the map fill the entire page -->
<style>
#map {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<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);
var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();
// create the geocoding control and add it to the map
var searchControl = L.esri.Geocoding.geosearch({
providers: [arcgisOnline]
}).addTo(map);
// create an empty layer group to store the results and add it to the map
var results = 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));
}
});
</script>
</body>
</html>a control for auto-complete enabled search
A basic wrapper for ArcGIS Online geocoding services. Used internally by L.esri.Geocoding.geosearch.
An abstraction for submitting requests to turn addresses into locations.
An abstraction for submitting requests for geocoding suggestions.
An abstraction for submitting requests for address candidates associated with a particular location.
- Fork and clone Esri Leaflet Geocoder
cdinto theesri-leaflet-geocoderfolder- Install the dependencies with
npm install - The example at
/index.htmlshould 'just work' - Make your changes and create a pull request
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 allowed to store the results of any geocoding you do if you pass the
forStorageflag and a valid access token. - If you use this library in a revenue generating application or for government 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 2015 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
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)