5

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?

3

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

  • Thanks for your response. I am able to load the example 'bd505ce3efff479bb4e87b182f180159' just fine. However when I try to load my tiles: L.esri.Vector.layer('3c41cfb096844078a44adfe57819464a').addTo(map); I get a bunch of mapbox-gl.js errors. My arcgis online item is: carync.maps.arcgis.com/home/… so I'm assuming that my key is '3c41cfb096844078a44adfe57819464a' . Any ideas? – user3362424 Apr 10 '18 at 15:45
  • Yes, that's correct ID. – whyzar Apr 10 '18 at 16:51
  • is there something that need to be done in the ArcGIS Online side to make these vector tiles available to a leaflet app? – user3362424 Apr 10 '18 at 17:32
  • Are you able to post your full code? – whyzar Apr 10 '18 at 17:33
  • 1
    Yea sure thing, keep in mind, if this question is answered and you have a different one, be sure to close this one out and start a new thread that way others can view the thread and try to answer the specific question. – whyzar Apr 10 '18 at 18:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.