Search for feature data (map service)

In addition to geocoding addresses and points of interest, you can also search features in map services for matching text. This demo relies on the Esri Leaflet Geocoder plugin.
Perform geocoding to search for features in a map service.
Use dark colors for code blocksCopy
<html>
  <head>
    <meta charset="utf-8" />
    <title>Search for feature layer data (feature service)</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>
    <div id="map"></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);

      const arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();

      L.esri.Geocoding.geosearch({
        providers: [
          arcgisOnline,
          L.esri.Geocoding.mapServiceProvider({
            label: "States and Counties",
            url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
            layers: [2, 3],
            searchFields: ["NAME", "STATE_NAME"]
          })
        ]
      }).addTo(map);
    </script>
  </body>
</html>