In this article, we use the layer definition ArcGIS javascript applied in ArcGIS Javascript. We know Layers are the contents of a map and they represent geographic data in ArcMap. Map layers include a wide range of information about people, the earth, life, and so on, and are composed of imagery, tiles, features, and more. while displaying these layers on the map, sometimes we need to limit the information to display on the map. This can be achieved by layer definition on ArcGIS Javascript API.

This article is about how to apply layer definitions on the feature layer to restrict feature display on the map.

 var featureLayer = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{ mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"], opacity: 0.5 });

What is layer definition ArcGIS Javascript?

Layer definitions are SQL expressions that limit the data shown on the map from the ArcGIS Javascript API. They are used to only display features that meet the specified criteria. we use definition expression with feature layer or dynamic layer with setDefinitionExpression() method.

How to use layer definitions ArcGIS Javascript with Feature Layer?

A Feature Layer is a single layer that can be created in Esri Leaflet from both Map Service or Feature Service published by ArcGIS Server or ArcGIS Enterprise portal items or from an array of client-side features.

Feature Layer contains all the attribute information, this makes things like creating popups really snappy because the client app already has all the information it needs.

when FeatureLayer is loads on the web map, they transfer large amounts of data from the server to the client. So if you want to load Feature Layer that has been displaying features with limited data on ArcMap use layer definitions.

The sample code given below the Feature layer contains oil and gas fields for the state of Kansas. In this example, layer definitions are used to only display features that meet the specified criteria, in this case, features with a value of ‘Yes’ for the PROD_GAS field.

The following code creates a new feature layer, that specifies the out fields and renderer. After that apply the definition expression using the featureLayer.setDefinitionExpression method.

Layer definitions on dynamic layer ArcGIS Javascript

Preview

Layer in a map service – [ON-DEMAND]

Sample Code

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"><title>Layer in a map service - [ON-DEMAND]</title><link href="https://js.arcgis.com/3.35/dijit/themes/soria/soria.css" rel="stylesheet"><link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css"><style> html, body, #mapDiv, .map.container { padding:0; margin:0; height:100%;}</style><script>var dojoConfig = { parseOnLoad:true };</script><script src="https://js.arcgis.com/3.35/"></script><script> var map, dialog; require([ "esri/map", "dojo/dom", "esri/layers/FeatureLayer", "dojo/dom-style", "dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"], function ( Map, dom, FeatureLayer, domStyle, TooltipDialog, dijitPopup) { map = new Map("mapDiv", { basemap: "streets-vector", center: [-99.395, 37.537], zoom: 10 }); var featureLayer = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{ mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"], opacity: 0.5 }); featureLayer.on("mouse-over", showTooltip); featureLayer.on("mouse-out", closeDialog); featureLayer.setDefinitionExpression("PROD_GAS='Yes'"); map.addLayer(featureLayer); function showTooltip(evt){ closeDialog(); var tipContent = "<table class='table table-bordered'> <tr><td>Status: </td><td>" + evt.graphic.attributes.STATUS + "</td> </tr><tr><td>Cummulative Gas:</td><td> " + evt.graphic.attributes.CUMM_GAS + " MCF" +"</td></tr><tr><td>Total Acres:</td><td> " + evt.graphic.attributes.APPROXACRE +"</td></tr><tr><td>Avg. Field Depth:</td><td> " + evt.graphic.attributes.AVGDEPTH + " meters</td></tr></table>";var dialog = new dijit.TooltipDialog({ id: "tooltipDialog", content: tipContent, style: "position: absolute; width: 350px;z-index:100"});dialog.startup();dojo.style(dialog.domNode, "opacity", 0.85);dijit.placeOnScreen(dialog.domNode, {x: evt.pageX, y: evt.pageY}, ["TL", "BL"], {x: 10, y: 10});}function closeDialog() { var widget = dijit.byId("tooltipDialog"); if (widget) { widget.destroy(); }}});</script></head><body class="soria"><div id="mapDiv"></div></body></html>