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 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 an ArcGIS Developer or ArcGIS Online account to access the developer dashboard and create an API key.

Steps

Create a new pen

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

Set the API key

To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.

  1. Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

  2. In CodePen, update apiKey to use your key.

    Use dark colors for code blocks
                                                              
    Change line
    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
          const map = L.map("map", {
            minZoom: 2
          })
    
          map.setView([34.02, -118.805], 13);
    
          const apiKey = "YOUR_API_KEY";
    
          const basemapEnum = "ArcGIS:Streets";
    
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            apiKey: apiKey
          }).addTo(map);
    

Create a SQL selector

ArcGIS feature layers support a standard SQL query where clause. Use a drop-down select element to provide a list of SQL queries for the LA County Parcels feature layer.

  1. Create a QueryControl using the L.Control class. Create an on onAdd function that contains each where clause. The selector containing the where clauses will not be removed from the map.

    Expand
    Use dark colors for code blocks
                                                                                                                         
    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.
    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
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            apiKey: apiKey
          }).addTo(map);
    
    
    
          L.Control.QueryControl = L.Control.extend({
            onAdd: function (map) {
              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"
              ];
    
            },
    
            onRemove: function (map) {
              // Nothing to do here
            }
          });
    
    Expand
  2. Create a select dropdown to display the whereClauses.

    Expand
    Use dark colors for code blocks
                                                                                                                         
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
          L.Control.QueryControl = L.Control.extend({
            onAdd: function (map) {
              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"
              ];
    
              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
            }
          });
    
    Expand
  3. Add the QueryControl to the map.

    Expand
    Use dark colors for code blocks
                                                                                                                         
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
            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);
    
    Expand

Add the parcel layer

Use the FeatureLayer class to access the LA County Parcel feature layer. Since you are performing a server-side query, you can hide the features until a SQL query is selected.

  1. Create a FeatureLayer and set the url with the LA County Parcel service URL.

    Expand
    Use dark colors for code blocks
                                                                                                                         
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
          L.control
            .queryControl({
              position: "topright"
            })
            .addTo(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,
    
            })
            .addTo(map);
    
    Expand
  2. Hide all features in the layer using a layer definition.

    Expand
    Use dark colors for code blocks
                                                                                                                         
    Add line.
    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
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
          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"
    
            })
            .addTo(map);
    
    Expand

Execute the query

The parcels feature layer layer definition changes when you choose an option from the selector. You can access the chosen where clause with the value property of the select element.

The maximum number of features returned by a query for hosted feature layers is 2000. To return more, you need to detect the request exceeded the maximum feature amount with exceededTransferLimit, and then use the resultOffset parameter to make multiple requests with the appropriate offset values. To learn more, visit the REST services documentation.

  1. Add a change event handler to the select element. Inside, use setWhere to change the layer definition.

    Expand
    Use dark colors for code blocks
                                                                                                                         
    Add line.Add line.Add line.Add line.Add line.Add line.
    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
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
          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"
    
            })
            .addTo(map);
    
          const select = document.getElementById("whereClauseSelect");
          select.addEventListener("change", () => {
            if (select.value !== "") {
              parcels.setWhere(select.value);
            }
          });
    
    Expand
  2. Create a pop-up using the bindPopup method. Set its contents dynamically based on the currently clicked feature.

    Expand
    Use dark colors for code blocks
                                                                                                                         
    Add line.Add line.Add line.
    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
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
          const select = document.getElementById("whereClauseSelect");
          select.addEventListener("change", () => {
            if (select.value !== "") {
              parcels.setWhere(select.value);
            }
          });
    
          parcels.bindPopup(function (layer) {
              return L.Util.template("<b>Parcel {APN}</b>" + "Type: {UseType} <br>" + "Tax Rate City: {TaxRateCity}", layer.feature.properties);
          });
    
        </script>
    
    Expand

Run the app

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.

What's next?

Learn how to use additional ArcGIS location services in these tutorials:

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