Data layers

Feature layer displaying road traffic data from a hosted feature layer

What is a data layer?

A data layer, also known as an operational layer, is a client-side layer that can access geographic data from a data source. You use a data layer to display geographic data on top of a basemap layer in a map or scene. The data source for the layer can be a data service or a file such as a Shapefile or GeoJSON file.

You can use data layers to:

Display feature or tile data from feature services, vector tile services, or image tile services.
Display layers with renders and symbols (data-driven styles).
Access data through SQL and spatial queries.
Provide access to data attributes for point, line, and polygon feature data.
Add, update, and delete feature data.

How a data layer works

A data layer provides access to geographic data that is displayed in a map or scene. Each layer references a file or service data source. The data source contains either as vector data (points, lines, polygons and attributes) or raster data (images). Different types of layers can access and display different types of data.

The data for a data layer is typically stored in the ArcGIS Platform as a data service. You can use feature services, vector tile services, and image tile services to host your data. Learn more in Data hosting.

To add a data layer to a map or scene, you typically add imagery or tile layers first, and then polygons, lines, and points layers last. A map or scene controls the order of the layers, and the map or scene view combines the layers to create the final display.

Figure 1: Data layers are added on top of a basemap layer.

Types of data layers

You can use different types of data layers to access and display different types of data in your applications. Data layers can access ArcGIS data sources and other types of data sources such as OGC data and files.

Different data layers provide different types of functionality. The functionality available is largely dependent on the capabilities of the API and the data source. For example, a feature layer can access a feature service and perform queries, edits, and data export, whereas a vector tile layer can only access tiles from a vector tile service.

ArcGIS data layers

The following layers work with ArcGIS data sources.

Layer	Data type	Display	Query	Edit	Offline*	Data sources
Feature layer	Feature	2D/3D	True	True	True	Feature service, shapefile, geodatabase
Vector tile layer	Vector Tile	2D/3D**	False	False	True	Vector tile service, vector tile package (.vtpk)
Feature collection layer	Feature	2D/3D	True	True	True	Portal item, web map, feature set / query result
Annotation layer***	Feature	2D	True	True	True	Feature service
Tile layer	Image Tile	2D/3D	False	False	True	Tile service, tile package (.tpk/.tpkx)
Raster/Imagery layer	Raster	2D/3D	False	False	True	Image service (ASRP/USRP, CRF, DTED, GeoTIFF/TIFF, HFA, HRE, IMG, JPEG, JPEG2000, NITF, PNG, RPF, SRTM (HGT), USGS DEM)
Scene layer	I3S	3D	False	False	True	Scene service
Map image layer	Image	2D/3D	False	False	True	Map service (Offline requires local server)
Stream layer	Feature	2D/3D	False	False	False	Stream service

* Offline layers can be used with the ArcGIS Runtime APIs.

** ArcGIS JavaScript only.

*** ArcGIS Runtime APIs only.

OGC data layers

The following layers work with OGC data sources.

Layer	Data type	Display	Query	Edit	Offline*	Data sources
Feature layer	Feature	2D/3D	True	True	True	WFS, GeoPackage
Raster layer	Raster	2D/3D	True	False	True	GeoPackage
KML layer	Feature/Image	2D/3D	True	True	True	KML file (.kml, .kmz)
WMS layer	Image	2D/3D	False	False	False	WMS service
WMTS layer	Image Tile	2D/3D	False	False	False	WMTS service
OGC feature layer	Feature	2D/3D	False	False	False	OGC API Features service

* Offline layers can be used with the ArcGIS Runtime APIs.

Other data layers

The following layers work with non-ArcGIS data sources.

Layer	Data type	Display	Query	Edit	Offline*	Data sources
CSV layer**	Feature	2D/3D	True	False	False	CSV file (.csv)
GeoJSON layer**	Feature	2D/3D	True	True	False	GeoJSON file or service
OpenStreetMap layer	Vector Tile	2D/3D	False	False	True	OSM Vector tile service
Vector tile layer	Vector Tile	2D/3D**	False	False	False	Vector tile service (Mapbox specification)
Web tile layer	Image Tile	2D/3D	False	False	False	{level},{row},{col} Image tile service
Raster/Imagery layer***	Raster	2D/3D	False	False	False	Raster files e.g. GeoTiff, Mr. Sid

* Offline layers can be used with the ArcGIS Runtime APIs.

** ArcGIS JavaScript API only.

*** ArcGIS Runtime APIs only.

Examples

Display feature data from a feature service

This example uses a feature layer to access and display features from a feature service. A feature layer is used to display points, lines, or polygons from a layer in a feature service. To access attribute values, they need to be requested from the service. You can also override the default symbols for the features by using a renderer. Learn more about renderers in Styles and data visualiziation.

Steps

Create a map or scene.
Create a feature layer and reference a feature service with a URL or item ID.
Add the feature layer to the map or scene.

Map

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>
    <!-- ArcGIS Mapping APIs and Location Services Developer Guide
    Learn more: https://developers.arcgis.com/documentation/mapping-apis-and-location-services/maps/
    -->
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>
    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer"
    ], function(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>

Scene

ArcGIS JS API

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: Scene (Feature layer)</title>
   <!-- ArcGIS Mapping APIs and Location Services Developer Guide
    Learn more: https://developers.arcgis.com/documentation/mapping-apis-and-location-services/maps/
    -->
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>

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

      esriConfig.apiKey = "YOUR-API-KEY";

      const scene = new Map({
        basemap: "arcgis-topographic", //Basemap layer service
        ground: "world-elevation" //Elevation service
      });

      const view = new SceneView({
        container: "viewDiv",
        map: scene,
        camera: {
          position: {
            x: -118.808, //Longitude
            y: 33.961, //Latitude
            z: 2000 // Meters
          },
          tilt: 75
        }
      });

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

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

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

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

Display tile data from a vector tile service

This example uses a vector tile layer to access and display data from a vector tile service. The layer works with the service to access the tile data as well as the styles for the data. The styles can also be overridden on the client to change how the layer is displayed in a map or scene.

Steps

Create a map or scene.
Create a vector tile layer and reference a vector tile service with a URL or item ID.
Add the layer to the map or scene.

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"
    />
    <!-- ArcGIS Mapping APIs and Location Services Guide
  Learn more: https://developers.arcgis.com/documentation/mapping-apis-and-location-services/maps/
  -->
<title>ArcGIS Developer Guide: Display tile data from a vector tile service</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

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

<script>
  require([
    "esri/config",
    "esri/Map",
    "esri/layers/VectorTileLayer",
    "esri/views/MapView"

  ], function (esriConfig,Map, VectorTileLayer, MapView) {

    esriConfig.apiKey = "YOUR-API-KEY";

    const vtlLayer = new VectorTileLayer({
      url: "https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_Styled/VectorTileServer/resources/styles/root.json",
      opacity: 0.75
    });

    const map = new Map({
      basemap: "arcgis-light-gray",
      layers: [vtlLayer]
    });


    const view = new MapView({
      container: "viewDiv",
      center: [-118.52664, 34.04509],
      zoom: 13,
      map: map,
      constraints: {
        snapToZoom: false
      }
    });
  });
</script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>

Display data from a GeoJSON file

This example uses a GeoJSON layer to access and display data in a GeoJSON file. The file contains features with a geometry (point, line, or polygon) and attributes. When features are loaded by the layer, they can be styled and the data can be accessed like features in feature layers.

Steps

Get the URL to the hosted GeoJSON data file.
Create the layer and set the URL.
Add the layer to a map or scene.

ArcGIS JS API

Esri Leaflet

Mapbox GL JS

OpenLayers

Go to sample

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!-- ArcGIS Mapping APIs and Location Services Guide
  Learn more: https://developers.arcgis.com/documentation/mapping-apis-and-location-services/maps/
-->
<title>ArcGIS Developer Guide: Map (GeoJSON data)</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

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

    <script>
      require([
        "esri/config",
        "esri/Map",
        "esri/layers/GeoJSONLayer",
        "esri/views/MapView"

   //If GeoJSON files are not on the same domain as your website, a CORS enabled server or a proxy is required.

      ], function (esriConfig,Map, GeoJSONLayer, MapView) {

        // Earthquake information to appear when point is clicked
        const template = {
          title: "Earthquake Info",
          content: "Magnitude {mag} {type} hit {place} on {time}",
          fieldInfos: [
            {
              fieldName: "time",
              format: {
                dateFormat: "short-date-short-time"
              }
            }
          ]
        };

        const renderer = {
          type: "simple",
          field: "mag",
          symbol: {
            type: "simple-marker",
            color: "orange",
            outline: {
              color: "white"
            }
          },
          visualVariables: [
            {
              type: "size",
              field: "mag",
              stops: [
                {
                  value: 2.5,
                  size: "4px"
                },
                {
                  value: 8,
                  size: "40px"
                }
              ]
            }
          ]
        };

        const geojsonLayer = new GeoJSONLayer({
          url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
          copyright: "USGS Earthquakes"
        });

        esriConfig.apiKey = "YOUR-API-KEY";

        const map = new Map({
          basemap: "arcgis-light-gray",
          layers: [geojsonLayer]
        });


        geojsonLayer.popupTemplate = template;
        geojsonLayer.renderer = renderer;

        // Add the map to a new view
        const view = new MapView({
          container: "viewDiv",
          center: [-168, 46],
          zoom: 3,
          map: map,
          constraints: {
            snapToZoom: false
          }
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Display data from a WMS service

This example uses a WMS layer to display data from an OpenGIS® Web Map Service Interface Standard (WMS) service. The layer displays geo-registered map images from one or more distributed geospatial databases. For more information about this service and specification, visit OGC WMS.

Steps

Get the URL to the WMS service.
Create the layer and set the URL. Define which sublayers to display.
Add the layer to a map or scene as a basemap or data layer.

ArcGIS JS API

ArcGIS .NET API

ArcGIS Android API

ArcGIS iOS API

ArcGIS Java API

ArcGIS Qt API (C++)

ArcGIS Qt API (QML)

Go to sample

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
<title> ArcGIS Developer Guide: Scene (WMS data)</title>
     <!-- ArcGIS Mapping APIs and Location Services Developer Guide
    Learn more: https://developers.arcgis.com/documentation/mapping-apis-and-location-services/maps/
    -->
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

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

    <script>
      require([
        "esri/config",
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/WMSLayer"
      ], function (esriConfig,Map, SceneView, WMSLayer) {

        const layer = new WMSLayer({
          url: "https://ows.terrestris.de/osm/service",
          sublayers: [
            {
              name: "OSM-WMS" //OpenStreetMap WMS by terrestris GmbH and Co. KG.
            }
          ]
        });

        const map = new Map({
          basemap: {
            baseLayers: [layer]
          }
        });


        //Add map to new 3d view
        const view = new SceneView({
          container: "viewDiv",
          map: map,
          constraints: {
            snapToZoom: false
          }
        });
      });

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

Tutorials

Display a map

Create and display a map with the basemap layer service.

Display a scene

Display a scene with the basemap layer service.

Add a point, line, and polygon

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

Add a feature layer

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

Display a web map

Create and display a map from a web map.

Display a web scene

Create and display a scene from a web scene.

Change the basemap layer

Switch a basemap layer from streets to satellite imagery.

Services

Basemap layer service

Access streets, satellite, and other basemap styles for maps and scenes.

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

	2D Display	3D Display	Basemap layers	Data layers	Graphics	Web maps	Web scenes
ArcGIS JS API	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported
ArcGIS Android API	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported
ArcGIS iOS API	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported
ArcGIS Java API	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported
ArcGIS .NET API	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported
ArcGIS Qt API	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported
ArcGIS Python API	Fully supported	Not supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported
Esri Leaflet	Fully supported	Not supported	Fully supported	Feature layer, Image tile layer	Leaflet Layers	Plug-in	Not supported
MapBox GL JS	Fully supported	Not supported	Fully supported	Feature layer, Image tile layer	Mapbox Layers	Not supported	Not supported
OpenLayers	Fully supported	Not supported	Fully supported	Feature layer, Image tile layer	OpenSource Layers	Not supported	Not supported
ArcGIS REST JS	Not supported	Not supported	Direct access and authentication	Direct access and authentication	Not supported	Direct access and authentication	Direct access and authentication

Full supportPartial support (see notes)Not supported

Tools

Developer dashboard

Manage API keys, service usage, and data for your applications in the ArcGIS Developers website.

ArcGIS Online

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

Map Viewer

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

Scene Viewer

Create, explore, and share web scenes for 3D applications.

Vector tile style editor

Style vector tile basemap layers for applications.

ArcGIS Pro

Explore, visualize, and analyze both 2D and 3D data with desktop GIS tools.

DocumentationMapping APIs and location services

Data layers

Was this page helpful?

Was this page helpful?

Was this page helpful?