Hosted feature layers

Feature layers displaying trailhead, trail, and park data stored as hosted feature layers

What is a hosted feature layer?

A hosted feature layer is a reference to a feature layer in a feature service used to store your data. A feature layer is a spatially-enabled table that contains features with a geometry and attributes. Applications can use feature layers to access, query, edit, and display features in a map or scene.

You use a hosted feature layer when you want to:

Import files such as CSV, XLS, or Google Sheets with coordinate information.
Store collections of geometry and attribute data as features.
Access and display features in maps and scenes.
Securely share data with applications and users.
Optimize accessing and displaying large amounts of features.
Edit data and track edits.
Perform SQL or spatial queries.
Update or export data.
Use feature data in offline applications.

How a hosted feature layer works

You create a hosted feature layer by using data management tools to import files such as CSV, XLS, GeoJSON, Shapefile, and File Geodatabase files or by publishing feature data. When a hosted feature layer is created, an item and a feature layer in a feature service are created. The item ID is a unique identifier for the layer. You use an item page to manage a feature layer and a feature service to access the data.

Access hosted feature layers and feature services from your applications.

Manage a feature layer

An item page allows you to manage the properties and capabilities for a hosted feature layer. You can access an item page by signing in to your developer dashboard or ArcGIS Online. You can set properties such as the name, description, and tags, as well as sharing, editing, and index settings.

View a feature layer item page

To access an item page directly, use a portal search URL with the ID for the item. The portal URL for data hosted in the ArcGIS Platform is https://www.arcgis.com. To use this URL, the item must be shared publicly.

https://www.arcgis.com/home/item.html?id=<ID>

Example: https://www.arcgis.com/home/item.html?id=883cedb8c9fe4524b64d47666ed234a7

Access a feature layer

You can discover information about a feature layer by accessing the feature service endpoint with the layer ID. The ID is typically an integer such as "0" if there is only one layer in the feature service. Accessing the endpoint in a web browser allows you to view properties such as the name, geometry type, drawing information, extent, and fields. Most APIs will use the endpoint to perform other operations such as querying data.

Get feature layer properties

To access a feature layer or get properties, use the host, unique service ID, service name, and the layer ID.

https://<host>/<uniqueID>/ArcGIS/rest/services/<serviceName>/FeatureServer/<layerID>

Example: https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Trailheads/FeatureServer/0

Get feature layer data

To get feature layer data, use the host, unique service ID, service name, layer ID, and a query operation with parameters. You can provide a SQL or spatial query and the data can be returned as HTML, JSON, or GeoJSON.

https://<host>/<uniqueID>/ArcGIS/rest/services/<serviceName>/FeatureServer/0/query?<params>

Examples:

HTML: https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Trailheads/FeatureServer/0/query?where=1=1&outFields=*&f=html

JSON: https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Trailheads/FeatureServer/0/query?where=1=1&outFields=*&f=json

GeoJSON: https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Trailheads/FeatureServer/0/query?where=1=1&outFields=*&f=geojson

Examples

Display a feature layer

To display a hosted feature layer, you reference the layer by its URL or ID, and then add it to a map or scene. The API communicates with the feature service to retrieve data for the current visible extent. ArcGIS APIs optimize data access by utilizing feature service functionality such as spatial indexes and caching. APIs also need to specify which data attributes to return.

Steps

Create a map or scene.
Get the hosted feature layer URL.
Add the layer.

ArcGIS JS API

Esri Leaflet

Mapbox GL JS

OpenLayers

ArcGIS .NET API

ArcGIS Android API

ArcGIS iOS API

ArcGIS Java API

ArcGIS Qt API (C++)

ArcGIS Qt API (QML)

Go to tutorial

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS Developer Guide: Data layers (Feature layers)</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

<link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.21/"></script>

  <script>
    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer"
    ], (esriConfig, Map, MapView, FeatureLayer)=> {

      esriConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "arcgis-topographic" //Basemap service
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700], //Longitude, latitude
        zoom: 13,
        constraints: {
          snapToZoom: false
        }
      });

      const trailheadsLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_styled/FeatureServer/0"
      });
      map.add(trailheadsLayer);

      const trailsLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_styled/FeatureServer/0"
      });
      map.add(trailsLayer,0);

      const parksLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space_styled/FeatureServer/0"
      });
      map.add(parksLayer,0);


    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Query a feature layer (Spatial)

To retrieve a sub-set of data for a hosted feature layer, you can query features using a spatial relation and a geometry. This example uses a spatial query to access a sub-set of parcels from a feature layer that contains 2.4 million features.

Steps

Create a map or scene.
Get the hosted feature layer URL.
Create and execute a spatial query.
Show the features.

ArcGIS JS API

Esri Leaflet

Mapbox GL JS

OpenLayers

ArcGIS .NET API

ArcGIS Android API

ArcGIS iOS API

ArcGIS Java API

ArcGIS Qt API (C++)

ArcGIS Qt API (QML)

Go to tutorial

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.21/"></script>
  <script>
    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/Sketch",
      "esri/layers/GraphicsLayer",
      "esri/layers/FeatureLayer"
    ],(esriConfig, Map, MapView, Sketch, GraphicsLayer, FeatureLayer)=> {

      esriConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "arcgis-topographic" //Basemap layer service
      });
      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.03000], //Longitude, latitude
        zoom: 13,
        constraints: {
          snapToZoom: false
        }
      });
      // Add sketch widget
      const graphicsLayerSketch = new GraphicsLayer();
      map.add(graphicsLayerSketch);
      const sketch = new Sketch({
        layer: graphicsLayerSketch,
        view: view,
        creationMode: "update" // Auto-select
      });
      view.ui.add(sketch, "top-right");
      // Add sketch events to listen for and execute query
      sketch.on("update", (event) => {
        // Create
        if (event.state == "start") {
          queryFeaturelayer(event.graphics[0].geometry);
        };
        if (event.state === "complete"){
          graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
        }
        // Change
        if (event.toolEventInfo && (event.toolEventInfo.type == "scale-stop" || event.toolEventInfo.type == "reshape-stop" || event.toolEventInfo.type == "move-stop")) {
          queryFeaturelayer(event.graphics[0].geometry);
        };
      });

      // Reference query layer
      const parcelLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
      });

      function queryFeaturelayer(geometry) {
        const parcelQuery = {
         spatialRelationship: "intersects", // Relationship operation to apply
         geometry: geometry,  // The sketch feature geometry
         outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // Attributes to return
         returnGeometry: true
        };
        parcelLayer.queryFeatures(parcelQuery)
        .then((results) => {
          displayResults(results);
        }).catch((error) => {
          console.log(error);
        });
      };

      // Show features (graphics)
      function displayResults(results) {
      // Create a blue polygon
        const symbol = {
          type: "simple-fill",
          color: [ 20, 130, 200, 0.5 ],
          outline: {
            color: "white",
            width: .5
          },
        };
        const popupTemplate = {
          title: "Parcel {APN}",
          content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}"
        };
        // Set symbol and popup
        results.features.map((feature) => {
          feature.symbol = symbol;
          feature.popupTemplate = popupTemplate;
          return feature;
        });
        // Clear display
        view.popup.close();
        view.graphics.removeAll();
       // Add features to graphics layer
        view.graphics.addMany(results.features);
      }
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Query a feature layer (SQL)

To retrieve a sub-set of data for a hosted feature layer, you can query features using a SQL where clause. This example uses a SQL where clause to access a sub-set of parcels from a feature layer that contains 2.4 million features.

Steps

Create a map or scene.
Get the hosted feature layer URL.
Create and execute a SQL query.
Show the features.

ArcGIS JS API

Esri Leaflet

Mapbox GL JS

OpenLayers

ArcGIS .NET API

ArcGIS Android API

ArcGIS iOS API

ArcGIS Java API

ArcGIS Qt API (C++)

ArcGIS Qt API (QML)

Go to tutorial

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (SQL)</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    };
    .esri-ui-corner .esri-component.esri-widget--panel {
    width: 230px !important;
};
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.21/"></script>
  <script>
    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
    ], (esriConfig, Map, MapView, FeatureLayer)=> {

      esriConfig.apiKey = "YOUR_API_KEY";

      const map = new Map({
        basemap: "arcgis-topographic" //Basemap layer service
      });
      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.03000], //Longitude, latitude
        zoom: 13,
        constraints: {
          snapToZoom: false
        }
      });
      // SQL query array
      const parcelLayerSQL = ["Choose a SQL where clause...", "UseType = 'Residential'",  "UseType = 'Government'", "UseType = 'Irrigated Farm'", "TaxRateArea = 10853", "TaxRateArea = 10860", "TaxRateArea = 08637", "Roll_LandValue > 1000000", "Roll_LandValue < 1000000"];
      let whereClause = parcelLayerSQL[0];
      // Add SQL UI
      const select = document.createElement("select","");
      select.setAttribute("class", "esri-widget esri-select");
      select.setAttribute("style", "width: 200px; font-family: 'Avenir Next'; font-size: 1em");
      parcelLayerSQL.forEach(function(query){
        let option = document.createElement("option");
        option.innerHTML = query;
        option.value = query;
        select.appendChild(option);
      });
      view.ui.add(select, "top-right");
       // Listen for changes
      select.addEventListener('change', (event) => {
        whereClause = event.target.value;
        queryFeatureLayer(view.extent);
      });

      // Get query layer and set up query
      const parcelLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
      });

      function queryFeatureLayer(extent) {
        const parcelQuery = {
         where: whereClause,  // Set by select element
         spatialRelationship: "intersects", // Relationship operation to apply
         geometry: extent, // Restricted to visible extent of the map
         outFields: ["APN","UseType","TaxRateCity","Roll_LandValue"], // Attributes to return
         returnGeometry: true
        };
        parcelLayer.queryFeatures(parcelQuery)
        .then((results) => {
          displayResults(results);
        }).catch((error) => {
          console.log(error.error);
        });
      };

      function displayResults(results) {
        // Create a blue polygon
        const symbol = {
          type: "simple-fill",
          color: [ 20, 130, 200, 0.5 ],
          outline: {
            color: "white",
            width: .5
          },
        };
        const popupTemplate = {
          title: "Parcel {APN}",
          content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}"
        };
        // Assign styles and popup to features
        results.features.map((feature) => {
          feature.symbol = symbol;
          feature.popupTemplate = popupTemplate;
          return feature;
        });
        // Clear display
        view.popup.close();
        view.graphics.removeAll();
        // Add features to graphics layer
        view.graphics.addMany(results.features);
      };
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Tutorials

Add a feature layer

Access and display point, line, and polygon features from a feature service

Add a vector tile layer

Access and display a vector tile layer in a map.

Add an image tile layer

Access and display an image tile layer in a map.

Style a feature layer

Use symbols and renderers to style feature layers.

Query a feature layer (spatial)

Execute a spatial query to get features from a feature layer.

Query a feature layer (SQL)

Execute a SQL query to access polygon features from a feature layer.

Edit feature data

Add, update, and delete features in a feature service.

Display a pop-up

Format a pop-up to show attributes in a feature layer.

Services

Feature service

Add, update, delete, and query feature data.

Vector tile service

Store and access vector tile data.

Image tile service

Store and access image tile data.

API support

	Import and create data	Manage data access	Manage data properties
Developer dashboard		¹	²
ArcGIS Online
Map Viewer	³	⁴	⁵
Scene Viewer		⁶	⁷
ArcGIS Pro (desktop)

Full supportPartial supportNo support

1. Layers only.
2. Layers and services only.
3. Create layers.
4. Web maps only.
5. Web maps and layers only.
6. Web scenes only.
7. Web scenes and layers only.

	Import and create data	Query data	Edit data
ArcGIS API for JavaScript
ArcGIS Runtime API for Android
ArcGIS Runtime API for iOS
ArcGIS Runtime API for Java
ArcGIS Runtime API for .NET
ArcGIS Runtime API for Qt
ArcGIS API for Python
Esri Leaflet		¹	¹
MapBox GL JS		¹	¹
OpenLayers		¹	¹
ArcGIS REST JS	²

Full supportPartial supportNo support

1. Requires ArcGIS REST JS
2. Authentication and portal access.

Tools

Developer dashboard

Manage API keys, service usage, and data with the ArcGIS Developers website.

ArcGIS Online

Create, manage, and share content and data with cloud-based GIS tools.

Map Viewer

Create, explore, and share web maps for 2D applications.

Data hostingData management NextVector tile layer

DocumentationMapping APIs and services

Hosted feature layers

Was this page helpful?

Was this page helpful?