Query a feature layer

You can use a SQL query to return selected features from a feature layer. For more explanation, visit the tutorial.

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
89
90
91
92
<!--

To run this demo, you need to replace 'YOUR_ACCESS_TOKEN' with an access token from ArcGIS that has the correct privileges.

To get started, sign up for a free ArcGIS Location Platform account or a free trial of ArcGIS Online and create developer credentials.

https://developers.arcgis.com/documentation/security-and-authentication/get-started/

-->

<html>
  <head>
    <meta charset="utf-8" />
    <title>Query a feature layer</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 Renderers from CDN -->
    <script src="https://unpkg.com/esri-leaflet-renderers@3.0.0" crossorigin=""></script>
    <!-- Load Esri Leaflet Vector from CDN -->
    <script src="https://unpkg.com/esri-leaflet-vector@4.2.3/dist/esri-leaflet-vector.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>
      #query {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1000;
        background: white;
        padding: 1em;
      }

      #query select {
        font-size: 16px;
      }
    </style>
    <div id="map"></div>
    <div id="query" class="leaflet-bar">
      <label>
        Zoning District:
        <select id="district">
          <!-- make sure to encase string values in single quotes for valid sql -->
          <option value="1=1">Any</option>
          <option value="UseType='Commercial'">Commercial</option>
          <option value="UseType='Residential'">Residential</option>
          <option value="UseType='Government'">Government</option>
          <option value="UseType='Industrial'">Industrial</option>
          <option value="UseType='Institutional'">Institutional</option>
        </select>
      </label>
    </div>
    <script>
      const accessToken = "YOUR_ACCESS_TOKEN";

      const map = L.map("map").setView([34.0227, -118.4877], 14);

      L.esri.Vector.vectorBasemapLayer("arcgis/navigation", {
        token: accessToken
      }).addTo(map);

      const zoning = L.esri
        .featureLayer({
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_public_parcels/FeatureServer/0",
          simplifyFactor: 0.5,
          precision: 4
        })
        .addTo(map);

      const zoningDistrict = document.getElementById("district");

      zoningDistrict.addEventListener("change", function () {
        zoning.setWhere(zoningDistrict.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.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close