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.

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
<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.8.0/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin=""></script>
    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js"></script>
    <!-- Load Esri Leaflet Geocoder from CDN -->
    <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@3.1.3/dist/esri-leaflet-geocoder.css" crossorigin="" />
    <script src="https://unpkg.com/esri-leaflet-geocoder@3.1.3/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 apiKey = "YOUR_API_KEY";

      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>

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