[GIS] Adding ArcGIS Online vector tile service in Leaflet map

Question

I am trying to add an arcgis online served vector tiles service to a Leaflet map. I am using ( https://github.com/Leaflet/Leaflet.VectorGrid ) to add the vector tiles to a Leaflet v1.3.1 map application.

I am able to add ESRI layers into the Leaflet map using the following simplified code:

var esriTilesUrl = "https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf";

var esriTilesPbfLayer = L.vectorGrid.protobuf(esriTilesUrl);

esriTilesPbfLayer.addTo(map);

However, when I try to add my arcgis online vector tiles to the leaflet map using the same code

var esriTilesUrl =  "https://tiles.arcgis.com/tiles/l4TwMwwoiuEVRPw9/arcgis/rest/services/CaryHouseHolds/VectorTileServer/tile/{z}/{y}/{x}.pbf";    

var esriTilesPbfLayer = L.vectorGrid.protobuf(esriTilesUrl);

esriTilesPbfLayer.addTo(map);

I get the following error:

GET https://tiles.arcgis.com/tiles/l4TwMwwoiuEVRPw9/arcgis/rest/services/CaryHouseHolds/VectorTileServer/tile/13/3222/2303.pbf 404 ()

What is the correct url to use to consume arcgis online vector tiles?

Answer 1

I would suggest referencing Esri Leaflet in general for leaflet and Esri related code.

In regards to the Esri Vector Tile Layer You can use this option and construct.

Constructor:
L.esri.Vector.layer( id, , options)

Description:
key refers to the specific vector tile layer you'd like to add.

L.esri.Vector.Layer is used to display vector tile services and attributes data providers appropriately.

Options L.esri.Vector.Layer accepts all options.

Methods L.esri.Vector.Layer` inherits all methods from.

Example <script src="./esri-leaflet-vector.js"></script> var map = L.map('map').setView([37.75,-122.45], 12); L.esri.Vector.layer('bd505ce3efff479bb4e87b182f180159').addTo(map);