Query a feature layer

You can use a SQL query to return selected features from a feature layer. For more explanation, visit the tutorial.
Use dark colors for code blocksCopy
<!--

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>