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 Location Platform or ArcGIS Online account.

Steps

Create a new pen

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

Get an access token

You need an access token with the correct privileges to access the resources used in this tutorial.

  1. Go to the Create an API key tutorial and create an API key with the following privilege(s):

    • Privileges
      • Location services > Basemaps
    • Item access
      • Note: If you are using your own custom data layer for this tutorial, you need to grant the API key credentials access to the layer item. Learn more in Item access privileges.
  2. Copy the API key access token to your clipboard when prompted.

  3. In CodePen, update the accessToken variable to use your access token.

    Use dark colors for code blocks
    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 accessToken = "YOUR_ACCESS_TOKEN";
    
          const basemapEnum = "arcgis/streets";
    
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            token: accessToken
          }).addTo(map);
    

To learn about the other types of authentication available, go to Types of authentication.

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
    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, {
            token: accessToken
          }).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
    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
    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
    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
    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.

  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
    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
    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.