esri-leaflet

<!DOCTYPE html>      <html class="not-ie">  <head> <meta charset="utf-8"> <title>L.esri.Layers.FeatureLayer | Esri Leaflet</title> <meta name="description" content="Esri Leaflet"> <meta name="viewport" content="width=device-width">   <link href='//fonts.googleapis.com/css?family=Vollkorn:400italic,700italic,400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Code+Pro:300"> <link href='//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>  <link rel="stylesheet" href="../../css/style.css">  <link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.7/leaflet.css" />  <script src="//cdn.jsdelivr.net/leaflet/0.7.7/leaflet.js"></script>  <script src="../../js/esri-leaflet-src.js"></script> <script src="//cdn.jsdelivr.net/jsdelivr-rum/latest/jsdelivr-rum.min.js"></script>  <script src="//localhost:35729/livereload.js"></script>  <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-44963317-3', 'auto'); ga('send', 'pageview'); </script>  </head> <body> <div class="page-content "> <div class="container"> <a class="site-nav" href="../../" class="left logo">Esri Leaflet</a> <nav class="right"> <a class="site-nav" href="../../examples/">Examples</a> <a class="site-nav" href="../../api-reference/">API Reference</a> <a class="site-nav" href="../../download/">Download</a> <a class="site-nav" href="https://github.com/Esri/esri-leaflet">View on GitHub</a> </nav> </div> <div id="background-map" class="background-map"></div> <div class="container white"> <aside class="sidebar"> <h5>L.esri.Layers</h5> <nav> <a href="../../api-reference/layers/basemap-layer.html">BasemapLayer</a> <a href="../../api-reference/layers/feature-layer.html">FeatureLayer</a> <a href="../../api-reference/layers/tiled-map-layer.html">TiledMapLayer</a> <a href="../../api-reference/layers/dynamic-map-layer.html">DynamicMapLayer</a> <a href="../../api-reference/layers/image-map-layer.html">ImageMapLayer</a> <a href="../../api-reference/layers/clustered-feature-layer.html">ClusteredFeatureLayer</a> <a href="../../api-reference/layers/heatmap-feature-layer.html">HeatmapFeatureLayer</a> </nav> <h5>L.esri.Tasks</h5> <nav> <a href="../../api-reference/tasks/query.html">Query</a> <a href="../../api-reference/tasks/find.html">Find</a> <a href="../../api-reference/tasks/identify-features.html">Identify Features</a> <a href="../../api-reference/tasks/identify-image.html">Identify Image</a> <a href="../../api-reference/tasks/task.html">Task</a> </nav> <h5>Misc.</h5> <nav> <a href="../../api-reference/request.html">Request</a> <a href="../../api-reference/util.html">Util</a> <a href="../../api-reference/events.html">Events</a> </nav> <h5>Base Classes</h5> <nav> <a href="../../api-reference/services/image-service.html">ImageService</a> <a href="../../api-reference/services/feature-layer.html">FeatureLayerService</a> <a href="../../api-reference/services/map-service.html">MapService</a> <a href="../../api-reference/services/service.html">Service</a> </nav> </aside> <div class="main-content"> <h1 id="l-esri-layers-featurelayer">L.esri.Layers.FeatureLayer</h1> <p><code>L.esri.Layers.FeatureLayer</code> is used to visualize and query vector geographic data hosted in both ArcGIS Online and published using ArcGIS Server.</p> <p>Feature Layers are provided by Feature Services which can contain multiple layers. Feature Layers expose vector geographic information as a web service that can be visualized, styled, queried and edited.</p> <p>Here is a sample Feature Service URL</p> <pre><code>http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Neighborhoods_pdx/</code></pre> <p>This particular service contains only one Feature Layer. Here is the Feature Layer URL</p> <pre><code>http://services.arcgis.com/rOo16HdIMeOBI4Mb/ArcGIS/rest/services/Neighborhoods_pdx/FeatureServer/0</code></pre> <p>Note that the Feature Layer URL ends in <code>/FeatureServer/{LAYER_ID}</code>.</p> <p>You can create a new empty feature service with a single layer on the <a href="https://developers.arcgis.com/en/hosted-data/#/new">ArcGIS for Developers website</a> or you can use ArcGIS Online to <a href="https://developers.arcgis.com/tools/csv-to-feature-service/">create a Feature Service from a CSV or Shapefile</a>.</p> <h3 id="constructor">Constructor</h3> <table> <thead> <tr> <th>Constructor</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class="nobr">L.esri.featureLayer(<nobr class="param"><span><Object></span> <code>options</code></nobr>)</code></td> <td>You must pass a <code>url</code> to a <a href="http://resources.arcgis.com/en/help/arcgis-rest-api/#/Layer/02r3000000w6000000/">Feature Layer</a> in your <code>options</code></td> </tr> </tbody> </table> <h3 id="options">Options</h3> <table> <thead> <tr> <th>Option</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>url</code></td> <td><code>String</code></td> <td><strong>Required</strong> The URL to the <a href="http://resources.arcgis.com/en/help/arcgis-rest-api/#/Layer/02r3000000w6000000/">Feature Layer</a>.</td> </tr> <tr> <td><code>pointToLayer(<nobr class="param"><span><<a href="http://geojson.org/geojson-spec.html#feature-objects">GeoJSON Feature</a>></span> <code>feature</code></nobr>, <nobr class="param"><span><<a href="http://leafletjs.com/reference.html#latlng">LatLng</a>></span> <code>latlng</code></nobr>)</code></td> <td><code>Function</code></td> <td>Function that will be used for creating layers for GeoJSON points (if not specified, simple markers will be created).</td> </tr> <tr> <td><code>style(<nobr class="param"><span><<a href="http://geojson.org/geojson-spec.html#feature-objects">GeoJSON Feature</a>></span> <code>feature</code></nobr>, <nobr class="param"><span><<a href="http://leafletjs.com/reference.html#ilayer">ILayer</a>></span> <code>layer</code></nobr>)</code></td> <td><code>Function</code></td> <td>Function that will be used to get style options for vector layers created for GeoJSON features.</td> </tr> <tr> <td><code>onEachFeature(<nobr class="param"><span><<a href="http://geojson.org/geojson-spec.html#feature-objects">GeoJSON Feature</a>></span> <code>feature</code></nobr>, <nobr class="param"><span><<a href="http://leafletjs.com/reference.html#ilayer">ILayer</a>></span> <code>layer</code></nobr>)</code></td> <td><code>Function</code></td> <td>Provides an opportunity to introspect individual GeoJSON features in the layer.</td> </tr> <tr> <td><code>where</code></td> <td><code>String</code></td> <td>An optional expression to filter features server side. String values should be denoted using single quotes ie: <code>where: "FIELDNAME = 'field value'";</code> More information about valid SQL can be found <a href="http://resources.arcgis.com/en/help/main/10.2/index.html#/SQL_reference_for_query_expressions_used_in_ArcGIS/00s500000033000000/">here</a>.</td> </tr> <tr> <td><code>minZoom</code></td> <td><code>Integer</code></td> <td>Minimum zoom level of the map that features will display. example: <code>minZoom:0</code></td> </tr> <tr> <td><code>maxZoom</code></td> <td><code>Integer</code></td> <td>Maximum zoom level of the map that features will display. example: <code>maxZoom:19</code></td> </tr> <tr> <td><code>cacheLayers</code></td> <td><code>Boolean</code></td> <td>Will remove layers from the internal cache when they are removed from the map.</td> </tr> <tr> <td><code>fields</code></td> <td><code>Array</code></td> <td>An array of metadata names to pull from the service. Includes all fields by default. You should always specifcy the name of the unique id for the service. Usually either <code>'FID'</code> or <code>'OBJECTID'</code>.</td> </tr> <tr> <td><code>from</code></td> <td><code>Date</code></td> <td>When paired with <code>to</code> defines the time range of features to display. Required the Feature Layer to be time enabled.</td> </tr> <tr> <td><code>to</code></td> <td><code>Date</code></td> <td>When paired with <code>from</code> defines the time range of features to display. Required the Feature Layer to be time enabled.</td> </tr> <tr> <td><code>timeField</code></td> <td><code>false</code></td> <td>The name of the field to lookup the time of the feature. Can be an object like <code>{start:'startTime', end:'endTime'}</code> or a string like <code>'created'</code>.</td> </tr> <tr> <td><code>timeFilterMode</code></td> <td><code>'client'</code> or </code>'server'</code></td> <td>Determines where features are filtered by time. By default features will be filtered by the server. If set to <code>'client'</code> all features are loaded and filtered on the client before display.</td> </tr> <tr> <td><code>simplifyFactor</code></td> <td><code>Integer</code></td> <td>How much to simplify polygons and polylines. More means better performance, and less means more accurate representation.</td> </tr> <tr> <td><code>precision</code></td> <td><code>Integer</code></td> <td>How many digits of precision to request from the server. <a href="http://en.wikipedia.org/wiki/Decimal_degrees">Wikipedia</a> has a great reference of digit precision to meters.</td> </tr> <tr> <td><code>token</code></td> <td><code>String</code></td> <td>If you pass a token in your options it will be included in all requests to the service.</td> </tr> <tr> <td><code>proxy</code></td> <td><code>String</code></td> <td>URL of an <a href="https://developers.arcgis.com/javascript/jshelp/ags_proxy.html">ArcGIS API for JavaScript proxies</a> or <a href="https://github.com/Esri/resource-proxy">ArcGIS Resource Proxies</a> to use for proxying POST requests.</td> </tr> <tr> <td><code>useCors</code></td> <td><code>Boolean</code></td> <td>If this service should use CORS when making GET requests.</td> </tr> </tbody> </table> <h3 id="events">Events</h3> <table> <thead> <tr> <th>Event</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>loading</code></td> <td><a href="../../api-reference/events.html#loading-event"><<code>LoadingEvent</code>></a></td> <td>Fires when new features start loading.</td> </tr> <tr> <td><code>load</code></td> <td><a href="../../api-reference/events.html#load-event"><<code>LoadEvent</code>></a></td> <td>Fires when all features in the current bounds of the map have loaded.</td> </tr> <tr> <td><code>createfeature</code></td> <td><a href="../../api-reference/events.html#feature-create"><<code>CreateFeatureEvent</code>></a></td> <td>Fired when a feature from the Feature Layer is loaded for the first time.</td> </tr> <tr> <td><code>removefeature</code></td> <td><a href="../../api-reference/events.html#feature-remove"><<code>RemoveFeatureEvent</code>></a></td> <td>Fired when a feature on the layer is removed from the map.</td> </tr> <tr> <td><code>addfeature</code></td> <td><a href="../../api-reference/events.html#feature-add"><<code>AddFeatureEvent</code>></a></td> <td>Fired when a previously removed feature is added back to the map.</td> </tr> </tbody> </table> <p><code>L.esri.Layers.FeatureLayer</code> also fires all <a href="../../api-reference/services/feature-layer.html"><code>L.esri.Services.FeatureLayer</code></a> events.</p> <p>In addition to the events above, <code>L.esri.Layers.FeatureLayer</code> also fires the following <a href="http://leafletjs.com/reference.html#event-objects">Mouse Events</a> <code>click</code>, <code>dblclick</code>, <code>mouseover</code>, <code>mouseout</code>, <code>mousemove</code>, and <code>contextmenu</code> and the following the <a href="http://leafletjs.com/reference.html#event-objects">Popup Events</a> <code>popupopen</code> and <code>popupclose</code></p> <h3 id="methods">Methods</h3> <table> <thead> <tr> <th>Method</th> <th>Returns</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>setStyle(<nobr class="param"><span><<a href="http://leafletjs.com/reference.html#path-options">PathOptions</a>></span> <code>style</code></nobr>)</code><br><br><code>setStyle(<nobr class="param"><span><Function></span> <code>style</code></nobr>)</code></td> <td><code>this</code></td> <td>Sets the given path options to each layer that has a <code>setStyle</code> method. Can also be a <code>Function</code> that will receive a <code>feature</code> argument and should return <a href="http://leafletjs.com/reference.html#path-options">Path Options</a> <pre><code class="language-javascript">featureLayer.setStyle({ color: 'white' })</code></pre> <pre><code class="language-javascript">featureLayer.setStyle(function(feature){ return { weight: feature.properties.pixelWidth }; })</code></pre> </td> </tr> <tr> <td><code>setFeatureStyle(<nobr class="param"><span><String or Integer></span> <code>id</code></nobr>, <nobr class="param"><span><Function or <a href="http://leafletjs.com/reference.html#path-options">Path Options</a>a>></span> <code>[object Object]</code></nobr>)</code></td> <td><code>this</code></td> <td>Changes the style on a specfic feature.</td> </tr> <tr> <td><code>resetStyle(<nobr class="param"><span><String or Integer></span> <code>undefined</code></nobr>)</code></td> <td><code>this</code></td> <td>Given the ID of a feature, reset that feature to the original style.</td> </tr> <tr> <td><code>bindPopup(<nobr class="param"><span><Function></span> <code>fn</code></nobr>, <nobr class="param"><span><<a href="http://leafletjs.com/reference.html#popup-options">PopupOptions</a>></span> <code>popupOptions</code></nobr>)</code></td> <td><code>this</code></td> <td> Defines a function that will return HTML to be bound to a popup on each feature. <pre class="js"><code>featureLayer.bindPopup(function(features){ return "Name: " + features.properties.NAME; });</code></pre> </td> </tr> <tr> <td><code>unbindPopup()</code></td> <td><code>this</code></td> <td>Removed a popup previously bound with <code>bindPopup</code>.</td> </tr> <tr> <td><code>eachFeature(<nobr class="param"><span><Function></span> <code>fn</code></nobr>, <nobr class="param"><span><Object></span> <code>context</code></nobr>)</code></td> <td><code>this</code></td> <td> Calls the passed function against every feature. The function will be passed the layer that represents the feature. <pre class="js"><code>featureLayer.eachFeature(function(layer){ console.log( layer.feature.properties.NAME); });</code></pre> </td> </tr> <tr> <td><code>getFeature(<nobr class="param"><span><String or Integer></span> <code>undefined</code></nobr> id)</code></td> <td><code>Layer</code></td> <td>Given the id of a Feature return the layer on the map that represents it. This will usually be a Leaflet vector layer like <a href="http://leafletjs.com/reference.html#polyline">Polyline</a> or <a href="http://leafletjs.com/reference.html#polygon">Polygon</a>, or a Leaflet <a href="http://leafletjs.com/reference.html#marker">Marker</a>.</td> </tr> <tr> <td><code>getWhere()</code></td> <td><code>String</code></td> <td>Returns the current <code>where</code> setting</td> </tr> <tr> <td><code>setWhere(<nobr class="param"><span><String></span> <code>where</code></nobr>, <nobr class="param"><span><Function></span> <code>callback</code></nobr>, <nobr class="param"><span><Object></span> <code>context</code></nobr>)</code></td> <td><code>this</code></td> <td>Sets the new <code>where</code> option and refreshes the layer to reflect the new <code>where</code> filter. Accepts an optional callback and function context.</td> </tr> <tr> <td><code>getTimeRange()</code></td> <td><code>Array</code></td> <td>Returns the current time range as an array like <code>[from, to]</code></td> </tr> <tr> <td><code>setTimeRange(<nobr class="param"><span><Date></span> <code>from</code></nobr>, <nobr class="param"><span><Date></span> <code>to</code></nobr>, , <nobr class="param"><span><Function></span> <code>callback</code></nobr>, <nobr class="param"><span><Object></span> <code>context</code></nobr>)</code></td> <td><code>this</code></td> <td>Sets the current time filter applied to features. An optional callback is run upon completion if <code>timeFilterMode</code> is set to <code>'server'</code>. Also accepts function context as the last argument.</td> </tr> <tr> <td><code>authenticate(<nobr class="param"><span><String></span> <code>token</code></nobr>)</code></td> <td><code>this</code></td> <td>Authenticates this service with a new token and runs any pending requests that required a token.</td> </tr> <tr> <td><code>query()</code></td> <td><code>this</code></td> <td> Returns a new <a href=""><code>L.esri.services.Query</code></a> object that can be used to query this layer. Your callback function will be passed a <a href="http://geojson.org/geojson-spec.html#feature-collection-objects">GeoJSON FeatureCollection</a> with the results or an error. <pre class="js"><code> featureLayer.query() .within(latlngbounds) .where("Direction = 'WEST'") .run(function(error, featureCollection){ console.log(featureCollection); }); </code></pre> </td> </tr> <tr> <td><code>metadata(<nobr class="param"><span><Function></span> <code>callback</code></nobr>, <nobr class="param"><span><Object></span> <code>context</code></nobr>)</code></td> <td><code>this</code></td> <td> Requests metadata about this Feature Layer. Callback will be called with <code>error</code> and <code>metadata</code>. <pre class="js"><code>featureLayer.metadata(function(error, metadata){ console.log(metadata); });</code></pre> </td> </tr> <tr> <td><code>addFeature(<nobr class="param"><span><<a href="http://geojson.org/geojson-spec.html#feature-objects">GeoJSON Feature</a>></span> <code>feature</code></nobr>, <nobr class="param"><span><Function></span> <code>callback</code></nobr>, <nobr class="param"><span><Object></span> <code>context</code></nobr>)</code></td> <td><code>this</code></td> <td> Adds a new feature to the feature layer. this also adds the feature to the map if creation is successful. <ul> <li>Requires authentication as a user who has permission to edit the service in ArcGIS Online or the user who created the service.</li> <li>Requires the <code>Create</code> capability be enabled on the service. You can check if creation exists by checking the metadata of your service under capabilities.</li> </ul> </td> </tr> <tr> <td><code>updateFeature(<nobr class="param"><span><<a href="http://geojson.org/geojson-spec.html#feature-objects">GeoJSON Feature</a>></span> <code>feature</code></nobr>, <nobr class="param"><span><Function></span> <code>callback</code></nobr>, <nobr class="param"><span><Object></span> <code>context</code></nobr>)</code></td> <td><code>this</code></td> <td> Update the provided feature on the Feature Layer. This also updates the feature on the map. <ul> <li>Requires authentication as a user who has permission to edit the service in ArcGIS Online or the user who created the service.</li> <li>Requires the <code>Update</code> capability be enabled on the service. You can check if this operation exists by checking the metadata of your service under capabilities.</li> </ul> </td> </tr> <tr> <td><code>deleteFeature(<nobr class="param"><span><String or Integer></span> <code>id</code></nobr>, <nobr class="param"><span><Function></span> <code>callback</code></nobr>, <nobr class="param"><span><Object></span> <code>context</code></nobr>)</code></td> <td><code>this</code></td> <td> Remove the feature with the provided id from the feature layer. This will also remove the feature from the map if it exists. <ul> <li>Requires authentication as a user who has permission to edit the service in ArcGIS Online or the user who created the service.</li> <li>Requires the <code>Delete</code> capability be enabled on the service. You can check if this operation exists by checking the metadata of your service under capabilities.</li> </ul> </td> </tr> <tr> <td><code>deleteFeatures(<nobr class="param"><span><Array of String or Integers></span> <code>ids</code></nobr>, <nobr class="param"><span><Function></span> <code>callback</code></nobr>, <nobr class="param"><span><Object></span> <code>context</code></nobr>)</code></td> <td><code>this</code></td> <td> Removes an array of features with the provided ids from the feature layer. This will also remove the features from the map if they exist. <ul> <li>Requires authentication as a user who has permission to edit the service in ArcGIS Online or the user who created the service.</li> <li>Requires the <code>Delete</code> capability be enabled on the service. You can check if this operation exists by checking the metadata of your service under capabilities.</li> </ul> </td> </tr> </tbody> </table> <h3 id="example">Example</h3> <pre><code class="language-js"><span class="keyword">var</span> map = L.map(<span class="string">'map'</span>).setView([<span class="number">45.53</span>,-<span class="number">122.64</span>], <span class="number">14</span>); L.esri.basemapLayer(<span class="string">"Streets"</span>).addTo(map); <span class="keyword">var</span> busStops = L.esri.featureLayer(<span class="string">'http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/stops/FeatureServer/0/'</span>).addTo(map);</code></pre> <p><a href="http://github.com/esri/esri-leaflet/edit/master/site/source/pages/api-reference/layers/feature-layer.md">Edit this page on GitHub</a></p> </div> <div style='clear:both;'></div> </div> <div class="container centered-text"> <p class="copyright">Esri Leaflet is a project from the <a href="http://pdx.esri.com">Esri PDX R&D Center</a> and the <a href="https://github.com/Esri/esri-leaflet/graphs/contributors">Esri Community</a></p> </div> </div> <script src="../../js/script.js"></script> </body> </html>