Set different search modes

You can geocode features within a feature layer using the Esri Leaflet Geocoder plugin. You can control how general or how strict you want the search to be by specifying the search mode.

Set different search modes to geocode features that match the start, end, or other parts of a query.
Use dark colors for code blocksCopy
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html>
  <head>
    <meta charset="utf-8" />
    <title>Set different search modes</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@3.0.12/dist/esri-leaflet.js"></script>
    <!-- Load Esri Leaflet Geocoder from CDN -->
    <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@3.1.4/dist/esri-leaflet-geocoder.css" crossorigin="" />
    <script src="https://unpkg.com/esri-leaflet-geocoder@3.1.4/dist/esri-leaflet-geocoder.js" crossorigin=""></script>
    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>
  </head>
  <body>
    <style>
      #selectContainer {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1000;
        background: white;
        padding: 1em;
      }

      #selectContainer select {
        font-size: 16px;
      }
    </style>

    <div id="map"></div>

    <div id="selectContainer" class="leaflet-bar">
      <label>
        Search Mode:
        <select id="searchMode">
          <option value="contain">contain</option>
          <option value="startWith">startWith</option>
          <option value="endWith">endWith</option>
          <option value="strict">strict</option>
        </select>
      </label>
    </div>
    <script>
      const accessToken = "YOUR_ACCESS_TOKEN";

      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);

      // searchMode can be 'contain', 'startWith', 'endWith', or 'strict'
      const gisDayProvider = L.esri.Geocoding.featureLayerProvider({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/GIS_DAY_Registration/FeatureServer",
        searchFields: ["event_name"],
        label: "GIS Day Events 2019",
        formatSuggestion: function (feature) {
          return feature.properties.event_name;
        },
        searchMode: "contain"
      });

      L.esri.Geocoding.geosearch({
        providers: [gisDayProvider]
      }).addTo(map);

      const searchMode = document.getElementById("searchMode");

      searchMode.addEventListener("change", function () {
        gisDayProvider.options.searchMode = searchMode.value;
      });
    </script>
  </body>
</html>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.