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

mstiglingh · 2023-07-21T10:20:46Z

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

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

[email protected]
[email protected]
[email protected]

Additional Information

No response

The text was updated successfully, but these errors were encountered:

gavinr-maps · 2023-07-21T14:42:20Z

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 · 2023-07-24T05:02:42Z

From within ArcGIS Online

Open the published Tile Layer(Hosted)
Selected Edit in Vector Tile Style Editor
Make some changes
Saved it as with a new name

gavinr-maps · 2023-07-24T19:05:45Z

Hi,

I created a Vector tile layer: https://arcgis.com/home/item.html?id=e3274f0c098544388d54d9d333998564
Added it using esri-leaflet-vector: https://jsbin.com/latuyoz/5/edit?html,output
Followed your steps above to modify the layer and save it as a separate layer: https://arcgis.com/home/item.html?id=b047bc7f7c264d08811180744216febc
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 · 2023-07-25T05:49:42Z

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 · 2023-07-25T15:03:07Z

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

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 · 2023-07-25T17:06:26Z

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:

Actual:

gavinr-maps · 2023-07-26T17:51:22Z

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 · 2023-10-17T16:09:34Z

The fix for this was released in v4.2.0.

gavinr-maps added the Comments Needed label Jul 21, 2023

gavinr-maps transferred this issue from Esri/esri-leaflet Jul 24, 2023

gavinr-maps removed the Comments Needed label Jul 25, 2023

gavinr-maps mentioned this issue Jul 26, 2023

Token not included in Sprite request when sprite property in style is a full URL #188

Closed

gavinr-maps closed this as completed Jul 26, 2023

gavinr-maps mentioned this issue Aug 7, 2023

Fix: Token with sprite and glyphs #192

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mstiglingh commented Jul 21, 2023 •

edited by gavinr-maps

Loading

gavinr-maps commented Jul 21, 2023

mstiglingh commented Jul 24, 2023

gavinr-maps commented Jul 24, 2023 •

edited

Loading

mstiglingh commented Jul 25, 2023

gavinr-maps commented Jul 25, 2023 •

edited

Loading

mstiglingh commented Jul 25, 2023 •

edited

Loading

gavinr-maps commented Jul 26, 2023

gavinr-maps commented Oct 17, 2023

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

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

Comments

mstiglingh commented Jul 21, 2023 • edited by gavinr-maps Loading

Describe the bug

Reproduction

Logs

System Info

Additional Information

gavinr-maps commented Jul 21, 2023

mstiglingh commented Jul 24, 2023

gavinr-maps commented Jul 24, 2023 • edited Loading

mstiglingh commented Jul 25, 2023

gavinr-maps commented Jul 25, 2023 • edited Loading

mstiglingh commented Jul 25, 2023 • edited Loading

gavinr-maps commented Jul 26, 2023

gavinr-maps commented Oct 17, 2023

mstiglingh commented Jul 21, 2023 •

edited by gavinr-maps

Loading

gavinr-maps commented Jul 24, 2023 •

edited

Loading

gavinr-maps commented Jul 25, 2023 •

edited

Loading

mstiglingh commented Jul 25, 2023 •

edited

Loading