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.
<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="initial-scale=1,maximum-scale=1,user-scalable=no" /><title>Esri Leaflet</title><!-- Load Leaflet from CDN --><linkrel="stylesheet"href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="crossorigin=""/><scriptsrc="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="crossorigin=""></script><!-- Load Esri Leaflet from CDN --><scriptsrc="https://unpkg.com/esri-leaflet@3.0.0/dist/esri-leaflet.js"></script><scriptsrc="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><divid="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 clausesconst 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 selectconst 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) {
returnnew L.Control.QueryControl(opts);
}
L.control.queryControl({
position: 'topright' }).addTo(map);
// Add the Feature Layer to the mapconst 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-optionreturn {
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 layerconst 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.