I have created a Vector Tile Package using ArcGIS Pro and uploaded it to ArcGIS Online. I am trying to load the layer into a leaflet map using the Leaflet.VectorGrid plugin. It successfully loads but the scale and placement is completely wrong. Not sure how I can correct this?

var marketsLayer = "https://tiles.arcgis.com/tiles/h0BmE0o8GsC3mnT9/arcgis/rest/services/markets_test/VectorTileServer/tile/{z}/{y}/{x}.pbf";
var marketTilesPbfLayer = L.vectorGrid.protobuf(marketsLayer).addTo(polys);

var map = L.map('map', {
    crs: L.CRS.EPSG4326,
    center: [78.0103677, -97.0166037],
    zoom: 4,
    layers: [grayscale, polys]

var baseMaps = {
    "Grayscale": grayscale,
    "Streets": streets

var overlayMaps = {
    "polys": polys

L.control.layers(baseMaps, overlayMaps).addTo(map);

enter image description here

The polygons display but the basemap indicates they are placed incorrectly. Furthermore the vector tile service diplays properly in ArcGIS Pro and Online maps?

  • Can you add picture of correct overlay? This might help finding the reason for misplaced overlay in Leaflet. – TomazicM Oct 9 '19 at 18:22

Your Answer

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

Browse other questions tagged or ask your own question.