L.esri.Geocoding.Geosearch

Extends L.Control

L.esri.Geocoding.Geosearch is a control for auto-complete enabled search. You can find more information and the source code for this plugin here.

Constructor

Options

Events

Events from each provider will match the events fired by L.esri.Service.

Methods

Styling

For reference here is the internal DOM structure of the geocoder

1
2
3
4
5
6
7
<div className="geocoder-control leaflet-control">
    <input className="geocoder-control-input leaflet-bar">
    <ul className="geocoder-control-suggestions leaflet-bar">
        <li className="geocoder-control-suggestion geocoder-control-selected">The Selected Result</li>
        <li className="geocoder-control-suggestion">Another Result</li>
    </ul>
</div>

By default, ellipses are shown when the text of suggestions is too long. However, you may want to show the entire suggestions text.

The following CSS rule will show the entire suggestions text, broken onto multiple lines. You will need to add the rule in your own custom stylesheet associated with your project:

1
2
3
4
5
6
.geocoder-control-suggestions .geocoder-control-suggestion {
    overflow-wrap: break-word;
    word-break: break-all;
    overflow: visible;
    white-space: break-spaces;
}

Example

Live sample here.

Providers

The Geosearch control can also search for results from a variety of sources including Feature Layers and Map Services. This is done with plain text matching and is not "real" geocoding. But it allows you to mix custom results into a search box.

1
2
<link rel="stylesheet" href="./esri-leaflet-geocoder.css">
<script src="./esri-leaflet-geocoder.js"></script>

var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider({
    // API Key to be passed to the ArcGIS Online Geocoding Service - https://developers.arcgis.com
    apikey: 'YOUR_API_KEY'
});

var gisDay = L.esri.Geocoding.featureLayerProvider({
    url: 'https://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/GIS_Day_Final/FeatureServer/0',
    searchFields: ['Name', 'Organization'], // Search these fields for text matches
    label: 'GIS Day Events', // Group suggestions under this header
    formatSuggestion: function (feature) {
        return feature.properties.Name + ' - ' + feature.properties.Organization; // format suggestions like this.
    }
});

L.esri.Geocoding.Controls.geosearch({
    providers: [arcgisOnline, gisDay] // will geocode via ArcGIS Online and search the GIS Day feature service.
}).addTo(map);

Available Providers

• L.esri.Geocoding.arcgisOnlineProvider uses the ArcGIS geocoding service.
• L.esri.Geocoding.featureLayerProvider gets results by querying a Feature Layer for text matches.
• L.esri.Geocoding.mapServiceProvider uses the find and query methods of ArcGIS Server Map Services to get text matches.
• L.esri.Geocoding.geocodeServiceProvider uses an ArcGIS Server Geocode Service (and supports suggestions from ArcGIS Server 10.3+ enabled endpoints).

All providers share the following options:

arcgisOnlineProvider

geocodeServiceProvider

Results from the geocodeServiceProvider will have an additional properties key which will correspond with all the available fields in the service.

featureLayerProvider

featureLayerProvider Methods

Results from the featureLayerProvider will have an additional properties key which will contain all the information for the feature and a geojson key that will contain a GeoJSON representation of the feature.

mapServiceProvider

Results from the mapServiceProvider will have an additional properties key which will contain all the information for the feature and a geojson key that will contain a GeoJSON representation of the feature.

Events from each provider will match the events fired by L.esri.Service.

Results

Result Object

A single result from a provider. You should not rely on all these properties being present in every result object. Some providers may add additional properties.

The result object will also contain any additional properties from the provider. See the available providers for more information.