Introduction to data layers

A data layer, also known as an operational layer, is a client-side layer that can access geographic data from a data source. The data source for the layer can be a data service or a file such as GeoJSON.

The data for a data layer is typically stored in ArcGIS as a data service using ArcGIS tools. You can use data layers to display feature or tile data from feature, vector tile, or image tile services in your application.

Feature layers

If you have feature data containing geometry and attributes, you can import and publish it as feature layer in a feature service. To access the data, use the service URL to query the feature layer and return the features as GeoJSON. To display the features, you have to style the features on the client. It is important to note that feature layers may also contain styling information, which can be used to help style the layer.

To learn how to publish your data as a feature layer, go to the Import data as a feature layer tutorial in the Mapping APIs and location services guide.

How to publish and display a feature layer

To access and display a hosted feature layer, you use the OpenLayers VectorLayer and VectorSource classes.

  1. Import your data from a CSV, XLS, GeoJSON, or Shapefile file to create a hosted feature layer.
  2. Get the URL for the feature layer.
  3. In your code, reference the OpenLayers CSS, JS, and ol-mapbox-style libraries.
  4. Define a VectorSource to access and query the feature service to return GeoJSON features.
  5. Display the data in a VectorLayer and add the layer to your map.

Example

Display a feature layer (as GeoJSON)

This example demonstrates how to display a feature layer. To get GeoJSON features from a feature layer, you need to provide a URL that queries the feature service and returns the features in GeoJSON format.

Use dark colors for code blocksCopy
                         
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script>

    <script>

      olms(map, basemapURL).then(function (map) {

        const pointLayerName = "Trailheads";

        const pointSource = new ol.source.Vector({
          format: new ol.format.GeoJSON(),
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
          pointLayerName +
          "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=geojson"
        });

        const pointLayer = new ol.layer.Vector({
          source: pointSource
        });

        map.addLayer(pointLayer);
      });

    </script>

To learn more about using feature layers in OpenLayers, go to the Add a feature layer tutorial.

Vector tile layers

If you want to access and display your data as vector tile data, first import your tile data, or convert an existing feature layer into a vector tile layer, using ArcGIS Online to create a vector tile service.

Vector tile layers closely follow the Mapbox vector tile specification, but the URL endpoints end in /{z}/{y}/{x}.pbf, rather than /{z}/{x}/{y}.pbf.

How to publish and display a vector tile layer

To display the hosted layer in your application, you use the OpenLayers VectorTile and VectorTileLayer classes.

  1. Import your data from a CSV, XLS, GeoJSON, or Shapefile file to create a hosted feature layer.
  2. Style and publish the feature layer as a vector tile layer using ArcGIS Online.
  3. Get the URL for the vector tile layer.
  4. In your code, reference the OpenLayers CSS, JS, and ol-mapbox-style libraries.
  5. Define a VectorTile source to access and query the vector tile layer.
  6. Display the data in a VectorTileLayer and add the layer to your map.
  7. Define the style of the vector tile layer, found in the Style tab of the item page in your developer dashboard.

Example

Display a vector tile layer

Use dark colors for code blocksCopy
                                                             
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js"></script>

    <script>

      olms(map, basemapURL).then((map) => {

        const parcelsSource = new ol.source.VectorTile({
          format: new ol.format.MVT(),
          url: `https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/tile/{z}/{y}/{x}.pbf`
        });

        const parcelsLayer = new ol.layer.VectorTile({
          source: parcelsSource
        });

        map.addLayer(parcelsLayer);

      });

    </script>

To learn more about using vector tile layers in OpenLayers, go to the Add a vector tile layer tutorial..

Image tile layers

If you want to access and display an image tile layer, also known as a raster layer, you first use ArcGIS Online to upload the tile data or publish it from an existing feature layer.

How to publish and display an image tile layer

To display the layer, you use the OpenLayers XYZ and Tile layer classes.

  1. In the developer dashboard, import your data from a CSV, XLS, GeoJSON, or Shapefile file to create a hosted feature layer.
  2. Create a tile layer in ArcGIS Online by navigating to the feature layer's item page > Publish > Tile layer.
  3. Get the URL for the new tile layer.
  4. In your code, reference the OpenLayers CSS, JS, and ol-mapbox-style libraries.
  5. Define an XYZ source to access and query the vector tile layer.
  6. Display the data in a Tile layer and add the layer to your map.

Example

Display an image tile layer

Use dark colors for code blocksCopy
                                                                      
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type="text/javascript"></script>

    <script>

      olms(map, basemapURL)

        .then(function (map) {
          const hillshadeURL = "https://server.arcgisonline.com/ArcGIS/rest/services/Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}";

          const hillshadeSource = new ol.source.XYZ({
            url: hillshadeURL
          });

          const tileLayer = new ol.layer.Tile({
            source: hillshadeSource,
            opacity: 0.3
          });

          map.addLayer(tileLayer);

        });
    </script>

To learn more about using image tile layers in OpenLayers, go to the Add a raster tile layer tutorial.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.