Esri/esri-leaflet-vector

Vector Tile Layers "Unimplemented type : 3" and Failed to load Sprites

mstiglingh opened this issue · 8 comments

mstiglingh commented

Describe the bug

We have a Vector Tile package that has been published to ArcGIS Online. We have created a secondary style of this package.
Both layer are shared with the entire Organization.

When adding the initial layer to a map as per sample supplied, the map renders without any problems, However when adding the secondary styled layer to the map it does not render

image

Reproduction

  L.esri.post("https://www.arcgis.com/sharing/rest/oauth2/token",
      {
        f: "json",
        client_id: "PRIVATE_CREDENTIALS",                 
        client_secret: "PRIVATE_CREDENTIALS",
        grant_type: "client_credentials"
      },
      function (error, result) {
        if (error) {
          throw error
        }          
        const map = L.map("map", {
        minZoom: 2
      });
    map.setView([-27, 27], 8);
    L.esri.Vector.vectorTileLayer("993b3e810d814760918716aa9633f713", {
      token: result.access_token,

    }).addTo(map);
  });

Logs

Events.js:100 wrong listener type: undefined
_on @ Events.js:100
on @ Events.js:44
_layerAdd @ Layer.js:108
whenReady @ Map.js:1477
addLayer @ Layer.js:172
addTo @ Layer.js:52
_asyncAdd @ VectorTileLayer.js:140
(anonymous) @ VectorTileLayer.js:127
fire @ Events.js:195
_createMaplibreLayer @ VectorTileLayer.js:107
(anonymous) @ VectorTileLayer.js:77
(anonymous) @ Util.js:100
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
p @ Request.js:142
n @ Util.js:68
(anonymous) @ Util.js:99
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
p @ Request.js:142
s @ Util.js:74
(anonymous) @ Util.js:86
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
p @ Request.js:142
a @ Util.js:142
(anonymous) @ Util.js:84
r @ Util.js:62
_createLayer @ VectorTileLayer.js:55
initialize @ VectorTileLayer.js:48
e @ Class.js:24
t.vectorTileLayer @ VectorTileLayer.js:145
(anonymous) @ VectorTile and App Auth.html:51
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
h @ Request.js:95
(anonymous) @ VectorTile and App Auth.html:35
maplibre-gl.js:31     GET https://www.arcgis.com/sharing/rest/content/items/993b3e810d814760918716aa9633f713/resources/sprites/sprite-1679474043120.json 403
(anonymous) @ maplibre-gl.js:31
q @ maplibre-gl.js:31
j @ maplibre-gl.js:31
t.getJSON @ maplibre-gl.js:31
(anonymous) @ maplibre-gl.js:35
_loadSprite @ maplibre-gl.js:35
_load @ maplibre-gl.js:35
(anonymous) @ maplibre-gl.js:35
requestAnimationFrame (async)
frame @ maplibre-gl.js:31
loadJSON @ maplibre-gl.js:35
_updateStyle @ maplibre-gl.js:35
setStyle @ maplibre-gl.js:35
Map @ maplibre-gl.js:35
_initGL @ MaplibreGLLayer.js:161
onAdd @ MaplibreGLLayer.js:44
_layerAdd @ Layer.js:114
whenReady @ Map.js:1477
addLayer @ Layer.js:172
addTo @ Layer.js:52
_asyncAdd @ VectorTileLayer.js:140
(anonymous) @ VectorTileLayer.js:127
fire @ Events.js:195
_createMaplibreLayer @ VectorTileLayer.js:107
(anonymous) @ VectorTileLayer.js:77
(anonymous) @ Util.js:100
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
p @ Request.js:142
n @ Util.js:68
(anonymous) @ Util.js:99
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
p @ Request.js:142
s @ Util.js:74
(anonymous) @ Util.js:86
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
p @ Request.js:142
a @ Util.js:142
(anonymous) @ Util.js:84
r @ Util.js:62
_createLayer @ VectorTileLayer.js:55
initialize @ VectorTileLayer.js:48
e @ Class.js:24
t.vectorTileLayer @ VectorTileLayer.js:145
(anonymous) @ VectorTile and App Auth.html:51
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
h @ Request.js:95
(anonymous) @ VectorTile and App Auth.html:35
maplibre-gl.js:31 Error: AJAXError:  (403): https://www.arcgis.com/sharing/rest/content/items/993b3e810d814760918716aa9633f713/resources/sprites/sprite-1679474043120.json
    at maplibre-gl.js:31:7853
fire @ maplibre-gl.js:31
(anonymous) @ maplibre-gl.js:35
u @ maplibre-gl.js:35
(anonymous) @ maplibre-gl.js:35
(anonymous) @ maplibre-gl.js:31
Promise.then (async)
(anonymous) @ maplibre-gl.js:31
Promise.then (async)
(anonymous) @ maplibre-gl.js:31
q @ maplibre-gl.js:31
j @ maplibre-gl.js:31
t.getJSON @ maplibre-gl.js:31
(anonymous) @ maplibre-gl.js:35
_loadSprite @ maplibre-gl.js:35
_load @ maplibre-gl.js:35
(anonymous) @ maplibre-gl.js:35
requestAnimationFrame (async)
frame @ maplibre-gl.js:31
loadJSON @ maplibre-gl.js:35
_updateStyle @ maplibre-gl.js:35
setStyle @ maplibre-gl.js:35
Map @ maplibre-gl.js:35
_initGL @ MaplibreGLLayer.js:161
onAdd @ MaplibreGLLayer.js:44
_layerAdd @ Layer.js:114
whenReady @ Map.js:1477
addLayer @ Layer.js:172
addTo @ Layer.js:52
_asyncAdd @ VectorTileLayer.js:140
(anonymous) @ VectorTileLayer.js:127
fire @ Events.js:195
_createMaplibreLayer @ VectorTileLayer.js:107
(anonymous) @ VectorTileLayer.js:77
(anonymous) @ Util.js:100
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
p @ Request.js:142
n @ Util.js:68
(anonymous) @ Util.js:99
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
p @ Request.js:142
s @ Util.js:74
(anonymous) @ Util.js:86
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
p @ Request.js:142
a @ Util.js:142
(anonymous) @ Util.js:84
r @ Util.js:62
_createLayer @ VectorTileLayer.js:55
initialize @ VectorTileLayer.js:48
e @ Class.js:24
t.vectorTileLayer @ VectorTileLayer.js:145
(anonymous) @ VectorTile and App Auth.html:51
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
h @ Request.js:95
(anonymous) @ VectorTile and App Auth.html:35
maplibre-gl.js:31     GET https://www.arcgis.com/sharing/rest/content/items/993b3e810d814760918716aa9633f713/resources/sprites/sprite-1679474043120.png 403
(anonymous) @ maplibre-gl.js:31
q @ maplibre-gl.js:31
j @ maplibre-gl.js:31
Z @ maplibre-gl.js:31
J @ maplibre-gl.js:31
(anonymous) @ maplibre-gl.js:35
_loadSprite @ maplibre-gl.js:35
_load @ maplibre-gl.js:35
(anonymous) @ maplibre-gl.js:35
requestAnimationFrame (async)
frame @ maplibre-gl.js:31
loadJSON @ maplibre-gl.js:35
_updateStyle @ maplibre-gl.js:35
setStyle @ maplibre-gl.js:35
Map @ maplibre-gl.js:35
_initGL @ MaplibreGLLayer.js:161
onAdd @ MaplibreGLLayer.js:44
_layerAdd @ Layer.js:114
whenReady @ Map.js:1477
addLayer @ Layer.js:172
addTo @ Layer.js:52
_asyncAdd @ VectorTileLayer.js:140
(anonymous) @ VectorTileLayer.js:127
fire @ Events.js:195
_createMaplibreLayer @ VectorTileLayer.js:107
(anonymous) @ VectorTileLayer.js:77
(anonymous) @ Util.js:100
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
p @ Request.js:142
n @ Util.js:68
(anonymous) @ Util.js:99
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
p @ Request.js:142
s @ Util.js:74
(anonymous) @ Util.js:86
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
p @ Request.js:142
a @ Util.js:142
(anonymous) @ Util.js:84
r @ Util.js:62
_createLayer @ VectorTileLayer.js:55
initialize @ VectorTileLayer.js:48
e @ Class.js:24
t.vectorTileLayer @ VectorTileLayer.js:145
(anonymous) @ VectorTile and App Auth.html:51
s.onreadystatechange @ Request.js:74
XMLHttpRequest.send (async)
h @ Request.js:95
(anonymous) @ VectorTile and App Auth.html:35
maplibre-gl.js:31 Image "MEA/Roads:2/0-ZAF" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.
m @ maplibre-gl.js:31
_notify @ maplibre-gl.js:35
getImages @ maplibre-gl.js:35
getImages @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Image "MEA/Roads:2/0-Rest" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.
m @ maplibre-gl.js:31
_notify @ maplibre-gl.js:35
getImages @ maplibre-gl.js:35
getImages @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31
maplibre-gl.js:31 Error {message: 'Unimplemented type: 3'}
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
fire @ maplibre-gl.js:31
_tileLoaded @ maplibre-gl.js:35
s @ maplibre-gl.js:35
processTask @ maplibre-gl.js:31
receive @ maplibre-gl.js:31

System Info

leaflet@1.9.4
esri-leaflet@3.0.10
esri-leaflet-vector@4.1.0

Additional Information

No response

gavinr-maps commented

Thank you for reporting this issue.

created a secondary style of this package .... However when adding the secondary styled layer to the map it does not render

Can you please post the steps you followed to create this "secondary style" so I can attempt to do the same thing to see if the issue happens for me?

Thank you!

mstiglingh commented

From within ArcGIS Online

  1. Open the published Tile Layer(Hosted)
  2. Selected Edit in Vector Tile Style Editor
  3. Make some changes
  4. Saved it as with a new name
gavinr-maps commented

Hi,

  1. I created a Vector tile layer: https://arcgis.com/home/item.html?id=e3274f0c098544388d54d9d333998564
  2. Added it using esri-leaflet-vector: https://jsbin.com/latuyoz/5/edit?html,output
  3. Followed your steps above to modify the layer and save it as a separate layer: https://arcgis.com/home/item.html?id=b047bc7f7c264d08811180744216febc
  4. Added it using esri-leaflet-vector: https://jsbin.com/latuyoz/7/edit?html,output

It seems like that all works for me and I do not get an error. Could you please follow those steps and see if it causes the issue for you? Perhaps this issue is specific to your layer.

mstiglingh commented

Hi,

I have ran a few more tests, it seems like the problem only occurs when I have the primary style, secondary style and package shared with organization only, If I share it all publicly I am able to access the layer successfully,

gavinr-maps commented

Thanks for the response. When I set the sharing settings to "Organization" on my items referenced in my previous comment, and I add a second parameter for the token ({token: '...'}) to L.esri.Vector.vectorTileLayer(), the layer loads fine visually, but I do get an error (but not the same error as you):

image

Even though it is not the same error as you (Unimplemented type : 3), I'm wondering if this is the core issue that if fixed would also fix your issue.

mstiglingh commented

It could be, and would kind of make sense, as i got the 403 on sprites as well, but I have a feeling the problem might be 2 part. I noticed that there are some tiles on my map that draws but defiantly not all and my first get would be the labelling as you see below that is the first thing to pop out as missing. The layer in question is a clients layer, would there be value in me getting permission to share you credentials to access the layer to test with?

Leaflet:
image

Actual:
image

gavinr-maps commented

Thank you for the additional information. I've created a simplified issue with replication case in #188 as a replacement for this issue, so I'm closing this one. Thanks!

gavinr-maps commented

The fix for this was released in v4.2.0.