Query a feature layer (spatial)

Learn how to execute a spatial query to access polygon features from a feature service.

A feature layer can contain a large number of features stored in ArcGIS. To access a subset of these features, you can execute an SQL or spatial query, either together or individually. The results can contain the attributes, geometry, or both for each record. SQL and spatial queries are useful when a feature layer is very large and you want to access only a subset of its data.

In this tutorial, you sketch a feature on the map and use ArcGIS REST JS to perform a spatial query against the LA County Parcels hosted feature layer. The layer contains ±2.4 million features. The spatial query returns all of the parcels that intersect the sketched feature. 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);
    

Add script references

In addition to Leaflet and Esri Leaflet, reference the Leaflet Geoman plugin. The plugin allows you to create point, line, and polygon graphics on the map.

  1. Add <script> and <link> tags to reference the libraries.
    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
        <!-- Load Leaflet from CDN -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin="" />
        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin=""></script>
    
        <!-- Load Esri Leaflet from CDN -->
        <script src="https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js"></script>
        <script src="https://unpkg.com/esri-leaflet-vector@4.0.0/dist/esri-leaflet-vector.js"></script>
    
        <!-- Load Leaflet Geoman from CDN -->
        <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />
        <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
    
    Expand

Add the parcels layer

Use the FeatureLayer class to perform a query against the LA County Parcels feature layer. Since you are performing a server-side query, you can hide the features.

  1. Create a FeatureLayer object with the LA County Parcels hosted feature layer as its source.

    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
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            apiKey: apiKey
          }).addTo(map);
    
          var 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
          var 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" // Hide the feature layer until queried
    
          })
          .addTo(map);
    
    Expand

Set up the Geoman toolbar

You can use the Leaflet Geoman toolbar to create point, line, and polygon geometries via a user interface.

  1. Add map.pm.addControls to create the Geoman toolbar. Hide all buttons except for drawMarker, drawPolyline, and drawPolygon.

    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
          var 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" // Hide the feature layer until queried
    
          })
          .addTo(map);
    
          map.pm.addControls({
            position:'topleft',
            // Customize the visible tools
            editControls:false,
            drawRectangle:false,
            drawCircle:false,
            drawCircleMarker:false,
            drawText:false
          });
    
    
    Expand
  2. Set map.pm.setGlobalOptions to define the style properties for the drawn geometries.

    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
          map.pm.addControls({
            position:'topleft',
            // Customize the visible tools
            editControls:false,
            drawRectangle:false,
            drawCircle:false,
            drawCircleMarker:false,
            drawText:false
          });
    
          map.pm.setGlobalOptions({
            pathOptions: {
              weight: 2,
              color: "#4d4d4d",
              fillColor: "#808080",
              fillOpacity: 0.2,
              dashArray:[4, 4]}
          });
    
    Expand
  3. Click Run at the top right to test your code. You should be able to sketch a point, line, or polygon.

Get the drawn feature

Leaflet Geoman emits a pm:create event when you have finished sketching a feature. You can listen to this event to respond to the newly created feature.

  1. Add an event handler for the pm:create event. Format its output to access the new layer object.

    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
          map.pm.setGlobalOptions({
            pathOptions: {
              weight: 2,
              color: "#4d4d4d",
              fillColor: "#808080",
              fillOpacity: 0.2,
              dashArray:[4, 4]}
          });
    
          map.on("pm:create", ({shape,layer}) => {
    
          });
    
    Expand
  2. Remove the previousLayer with the remove method. Set previousLayer to the newly drawn layer.

    Expand
    Use dark colors for code blocks
                                                                                                                      
    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
          var previousLayer;
    
          map.on("pm:create", ({shape,layer}) => {
    
            if (previousLayer) {
              previousLayer.remove();
            }
            previousLayer = layer;
    
          });
    
    Expand

Run the query

Use the FeatureLayer.query method to find features in the LA County Parcels feature layer that instersect the sketched geometry.

The maximum number of features returned by a query for hosted feature layers is 2000, except when using ids without setting a limit. To learn more, visit the ArcGIS services documentation.

  1. Convert the sketched feature into GeoJSON to access its geometry. Create a query on the parcels layer that returns all parcels intersecting the sketched geometry.

    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
          var previousLayer;
    
          map.on("pm:create", ({shape,layer}) => {
    
            if (previousLayer) {
              previousLayer.remove();
            }
            previousLayer = layer;
    
            var feature = layer.toGeoJSON();
            parcels
              .query()
              .intersects(feature.geometry)
              .limit(2000)
    
          });
    
    Expand
  2. Return the feature ids. Display the results with the setWhere method.

    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
            var feature = layer.toGeoJSON();
            parcels
              .query()
              .intersects(feature.geometry)
              .limit(2000)
    
              .ids(function (error, queryResult) {
                parcels.setWhere("OBJECTID IN (" + queryResult.join(",") + ")");
              });
    
    Expand
  3. Create a pop-up using bindPopup. 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
            var feature = layer.toGeoJSON();
            parcels
              .query()
              .intersects(feature.geometry)
              .limit(2000)
    
              .ids(function (error, queryResult) {
                parcels.setWhere("OBJECTID IN (" + queryResult.join(",") + ")");
              });
    
          });
    
          parcels.bindPopup(function (layer) {
            return L.Util.template("<b>Parcel {APN}</b>" + "Type: {UseType} <br>" + "Tax Rate City: {TaxRateCity}", layer.feature.properties);
          });
    
    Expand

Run the app

In CodePen, run your code to display the map.

When you click on the map to draw a polygon, a spatial query will run against the feature layer and display all land parcels that intersect the boundary of the feature. You can click on a parcel to see a pop-up with information about the parcel.

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.