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. You can use data layers to display feature or tile data from feature, vector tile, or image tile services.

Feature layers

If you have feature data with a geometry and attributes, you can import and publish it as feature layer in a feature service. To access the data, use a 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, however, that feature layers can also contain styling information, and this information can be used to help style the layer.

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.

Display a feature layer (as GeoJSON)

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
<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>

To learn more, go to the Import data as a feature layer and access and Add a feature layer tutorials.

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

Display a vector tile layer

This example demonstrates how you fetch the vector tiles and then use a layer of type fill to display the tiles.

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
<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>

To learn more, go to the Publish a vector tile layer and Add a vector tile layer tutorials..

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

Display an image tile layer

The example shows how to fetch the image (raster) tiles and then add a layer of type raster to the map.

Use dark colors for code blocksCopy
                  
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>

To learn more, 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.