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 features containing geometry and attributes, you can import the data to create an ArcGIS feature layer in a feature service. To access the data, you can use the URL of the service to query and return features. You can style and display the results in a map or scene. Feature layers can also contain styling information as part of the service response.

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@3.2.1/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@3.2.1/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@3.2.1/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@3.2.1/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@3.2.1/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@3.2.1/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.