Query a feature layer (SQL)

Learn how to execute a SQL query to access polygon features in a feature layer.

A feature layer can contain a large number of features stored in ArcGIS. To access a subset of the features, you can execute a SQL or spatial query, or both at the same time. You can also return the attributes, geometry, or both attributes and geometry for each record. SQL and spatial queries are useful when a feature layer is very large and you just want to access a subset of the data.

In this tutorial, you perform server-side SQL queries to return a subset of the features from the LA County Parcel hosted feature layer. The feature layer contains over 2.4 million features. The resulting features are displayed as graphics on the map. A pop-up is also used to display feature attributes.

Prerequisites

You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.

Steps

Create a new pen

To get started, either complete the Display a map tutorial or .

Set the API key

To access ArcGIS location services, you need an API key.

Go to your dashboard to get an API key.

In CodePen, update apiKey to use your key.

Change line
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Esri Leaflet</title>

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.0/dist/esri-leaflet.js"></script>
  <script src="https://unpkg.com/esri-leaflet-vector@3.0.0/dist/esri-leaflet-vector.js"></script>

  <style>
    body { margin:0; padding:0; }
    #map {
        position: absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
        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 basemapEnum = "ArcGIS:Streets";

    const map = L.map('map', {
      minZoom: 2
    }).setView([34.02,-118.805], 13);

    L.esri.Vector.vectorBasemapLayer(basemapEnum, {
      apiKey: apiKey
    }).addTo(map);

  </script>

</body>

</html>

Query the feature layer

Add the following code to add a select element for the where clauses and to query the features each time the select element value changes.

Add an L.Control with the SQL where clauses.
Create the feature layer and add it to the map.
Bind the popup to the layer.
Create a handler to set the where clause on the layer.

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Esri Leaflet</title>

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.0/dist/esri-leaflet.js"></script>
  <script src="https://unpkg.com/esri-leaflet-vector@3.0.0/dist/esri-leaflet-vector.js"></script>

  <style>
    body { margin:0; padding:0; }
    #map {
      position: absolute;
      top:0;
      bottom:0;
      right:0;
      left:0;
      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 basemapEnum = "ArcGIS:Streets";

    const map = L.map('map', {
      minZoom: 2
    }).setView([34.02,-118.805], 13);

    L.esri.Vector.vectorBasemapLayer(basemapEnum, {
      apiKey: apiKey
    }).addTo(map);



    // Create the select dropdown and add to the top-right of the map
    L.Control.QueryControl = L.Control.extend({
      onAdd: function(map) {
        // Array of query where clauses
        const whereClauses = ["Choose a WHERE clause...", "UseType = 'Residential'","UseType = 'Government'","UseType = 'Irrigated Farm'","TaxRateArea = 10853","TaxRateArea = 10860","TaxRateArea = 08637","Roll_LandValue > 1000000","Roll_LandValue < 1000000"];
        // Create select
        const select = L.DomUtil.create("select","");
        select.setAttribute("id", "whereClauseSelect");
        select.setAttribute("style", "font-size: 16px;padding:4px 8px;");
        whereClauses.forEach(function(whereClause){
          let option = L.DomUtil.create("option");
          option.innerHTML = whereClause;
          select.appendChild(option);
        });
        return select;
      },

      onRemove: function(map) {
        // Nothing to do here
      }
    });

    L.control.queryControl = function(opts) {
      return new L.Control.QueryControl(opts);
    }

    L.control.queryControl({
      position: 'topright'
    }).addTo(map);

    // Add the Feature Layer to the map
    const parcels = L.esri.featureLayer({
      url: 'https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0',
      simplifyFactor: 0.5,
      precision: 4,
      where: '1 = 0',
      style: function(feature) {
        // https://leafletjs.com/reference-1.7.1.html#path-option
        return {
          opacity: 1.0,
          weight: 0.5,
          color: 'white',
          fillColor: '#19A1E6',
          fillOpacity: 0.5
         };
      }
    }).addTo(map);

    // Setup the Popup
    parcels.bindPopup(function (layer) {
      return L.Util.template('<b>Parcel {APN}</b>' +
          'Type: {UseType} <br>' +
          'Tax Rate City: {TaxRateCity}', layer.feature.properties);
    });

    // When the selected where clause changes, set the filter on the layer
    const select = document.getElementById('whereClauseSelect');
    select.addEventListener('change', () => {
      if(select.value !== '') {
        parcels.setWhere(select.value);
      }
    });

  </script>

</body>

</html>

Run the code

In CodePen, run your code to display the map.

When the map displays, you should be able to use the query selector to display parcels. Click on a parcel to show a pop-up with the feature's attributes.