Introduction to data layers

Data layers provide a way to manage and access your own data as data services. You can host data as feature layers, vector tile layers, or image tile layers. Each layer type is supported by a data service. Once published, you can use Esri Leaflet to access the layers and display them in a map.

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

You can use Esri Leaflet to access a hosted feature layer with the L.esri.FeatureLayer class, which extends L.Layer. To access the class, reference the main Esri Leaflet plugin.

Steps

  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 Esri Leaflet plugin.
  4. Create the L.esri.featureLayer class and set the URL with the layer ID.
  5. Add the layer to the map.

Example

Display a feature layer

Use dark colors for code blocks
         
1
2
3
4
5
6
7
8
9
<script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-oUArlxr7VpoY7f/dd3ZdUL7FGOvS79nXVVQhxlg6ij4Fhdc4QID43LUFRs7abwHNJ0EYWijiN5LP2ZRR2PY4hQ=="
    crossorigin=""></script>

<script>
  const trailheads = L.esri.featureLayer({
    url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
  }).addTo(map);
</script>

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

Vector tile layers

To access and display a vector tile layer, you use the L.esri.Vector.vectorTileLayer plugin, which extends L.Layer.

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 using the plugin.

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. Create a vector tile service by publishing the feature layer as a vector tile layer in ArcGIS Online.
  3. Get the URL.
  4. Reference the Esri Leaflet and the vector plugins.
  5. Create the L.esri.Vector.vectorTileLayer class and set the service URL.

Example

Display a vector tile layer

Use dark colors for code blocks
             
1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-oUArlxr7VpoY7f/dd3ZdUL7FGOvS79nXVVQhxlg6ij4Fhdc4QID43LUFRs7abwHNJ0EYWijiN5LP2ZRR2PY4hQ=="
    crossorigin=""></script>

<script src="https://unpkg.com/esri-leaflet-vector@3.1.1/dist/esri-leaflet-vector.js"
    integrity="sha512-7rLAors9em7cR3/583gZSvu1mxwPBUjWjdFJ000pc4Wpu+fq84lXF1l4dbG4ShiPQ4pSBUTb4e9xaO6xtMZIlA=="
    crossorigin=""></script>

<script>
L.esri.Vector.vectorTileLayer(
  "https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer"
).addTo(map);
</script>

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

Image tile layers

To display an image tile layer, you use the L.esri.tiledMapLayer class.

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 Esri Leaflet plugin.
  5. Create the L.esri.tiledMapLayer class and set the service URL in your application.

Example

Display an image tile layer

Use dark colors for code blocks
           
1
2
3
4
5
6
7
8
9
10
11
<script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-oUArlxr7VpoY7f/dd3ZdUL7FGOvS79nXVVQhxlg6ij4Fhdc4QID43LUFRs7abwHNJ0EYWijiN5LP2ZRR2PY4hQ=="
    crossorigin=""></script>

<script>
  L.esri
    .tiledMapLayer({
      url: "https://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"
    })
    .addTo(map);
</script>

To learn more, go to the Add an image 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.