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.

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
      const map = L.map("map").setView([40.91, -96.63], 4);

      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

      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: accessToken,
            nearby: {
              lat: -33.8688,
              lng: 151.2093
            }
          })
        ]
      }).addTo(map);

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.

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.