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 access a feature service

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. Reference the MapLibre JS and CSS libraries.
4. Define a data source to access and query the feature layer.
5. Display the data in a layer.

Example

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 return the features in GeoJSON format.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
<script>

   map.addSource("trailheads", {
   type: "geojson",
   data: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0/query?f=pgeojson&where=1=1",
   });

   map.addLayer({
   id: "trailheads-circle",
   type: "circle",
   source: "trailheads",
   paint: {
      "circle-color": "hsla(0,0%,0%,0.75)",
      "circle-stroke-width": 1.5,
      "circle-stroke-color": "white",
   }
   });
</script>

Vector tile layers

If you want to access and display your data as vector tile data, you can publish a vector tile layer from a feature layer, and then display it in a map. Vector tile layers closely follow the Mapbox vector tile specification, but there a few important differences:

• URL endpoints end in /{z}/{y}/{x}.pbf, rather than /{z}/{x}/{y}.pbf.
• Each style may contain one source.
• The raster and hillshade layer types are not supported.

How to access the vector tile service

1. Import your data from a CSV, XLS, GeoJSON, or Shapefile file to create a hosted feature layer.
2. Style the feature layer using ArcGIS Online.
3. Create a vector tile service by publishing the feature layer as a vector tile layer.
4. Get the URL.
5. Reference the MapLibre JS and CSS libraries.
6. Set the source as the type vector and add the tiles.
7. Define the style of the vector tile layer, found in the Style tab of the item page in your developer dashboard.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
<script>

   map.addSource("parcels", {
   type: "vector",
   tiles: ["https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/tile/{z}/{y}/{x}.pbf"]
   });

   map.addLayer({
   id: "parcels-fill",
   type: "fill",
   source: "parcels",
   "source-layer": "Santa_Monica_Mountains_Parcels",
   paint: {
      "fill-color": "hsl(200, 80%, 50%)",
      "fill-opacity": 0.5,
      "fill-outline-color": "white"
   }
   });

</script>

Image tile layers

If you want to access and display your data as a tile layer, you can publish an image tile layer from a feature layer, and then display it in a map.

How to access the image tile service

1. 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 its item page > Publish > Tile layer.
3. Get the URL.
4. Reference the MapLibre JS and CSS libraries.
5. Define the source as the type raster and add the layer.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
<script>

   map.addSource("parcels", {
      type: "raster",
      tiles: [
      "https://server.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}.jpeg?token=" + apiKey
      ]
   });

   map.addLayer({
     id: "hillshade-raster",
     type: "raster",
     source: "hillshade"
   });

</script>

Tutorials

Add a feature layer

Add features from feature layers to a map.

Add a vector tile layer

Add a vector tile layer to a map.

Add an image tile layer

Add an image tile layer to a map.

Display a pop-up

Display feature attributes in a popup.