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.
To run this demo, you need to replace 'YOUR_API_KEY' with your API key. If you do not have an account then sign up for free at ArcGIS Developer.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Esri Leaflet Geocoder</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet"></script>
<!-- Esri Leaflet Geocoder -->
<link
rel="stylesheet"
href="https://unpkg.com/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css"
/>
<script src="https://unpkg.com/esri-leaflet-geocoder"></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.esri.basemapLayer("Streets").addTo(map);
// create the geocoding control and add it to the map
var searchControl = L.esri.Geocoding.geosearch({
providers: [
L.esri.Geocoding.arcgisOnlineProvider({
// API Key to be passed to the ArcGIS Online Geocoding Service
apikey: 'YOUR_API_KEY'
})
]
}).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>
L.esri.Geocoding.geosearch
a control for auto-complete enabled search
L.esri.Geocoding.geocodeService
A basic wrapper for ArcGIS Online geocoding services. Used internally by L.esri.Geocoding.geosearch
.
L.esri.Geocoding.geocode
An abstraction for submitting requests to turn addresses into locations.
L.esri.Geocoding.suggest
An abstraction for submitting requests for geocoding suggestions.
L.esri.Geocoding.reverseGeocode
An abstraction for submitting requests for address candidates associated with a particular location.
cd
into the esri-leaflet-geocoder
folder and install the dependencies with npm install
npm start
from the command line. This will compile minified source in a brand new dist
directory, launch a tiny webserver and begin watching the raw source for changes.debug/sample.html
should 'just work'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 use the ArcGIS geocoding service you need the following:
Powered by
Esri
in the map attribution. See Basemap attribution for more details.To determine if there is a cost associated with using the Esri Leaflet Geocoder and the ArcGIS geocoding service, if you have an ArcGIS Developer account, go to Pricing, or, if you have an ArcGIS Online account, go to Credits by Capability.
Note: To store geocoding results, pass forStorage: true
and a valid access token (see Esri Leaflet Get Started).
Copyright © 2013-2022 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 file.