load sprite json with custom protocol does not JSON parse ArrayData

[halset]

maplibre-gl-js version: main branch

browser: Safari

Steps to Trigger Behavior

1. Add custom protocol using maplibregl.addProtocol('internal'...
2. Have a style with a sprite using that protocol.
3. Observe that sprite is fetched, but that none of the icons can be used in the map.

Link to Demonstration

https://jsbin.com/jusasoy/5/edit?html,output

Expected Behavior

See the map with 3 red circles that each have an airplane icon in them.

Actual Behavior

Can see map with 3 red circles, but without airplane icons.

[halset]

Here is a patch that works, but I do not know if this is the place to solve this.

diff --git a/src/style/load_sprite.ts b/src/style/load_sprite.ts
index 391317442..6252c4c9a 100644
--- a/src/style/load_sprite.ts
+++ b/src/style/load_sprite.ts
@@ -64,7 +64,14 @@ async function doOnceCompleted(
         result[spriteName] = {};
 
         const context = browser.getImageCanvasContext((await imagesMap[spriteName]).data);
-        const json = (await jsonsMap[spriteName]).data;
+        const jsonResponseData = (await jsonsMap[spriteName]).data;
+
+        var json
+        if (jsonResponseData instanceof ArrayBuffer) {
+            json = JSON.parse(new TextDecoder().decode(jsonResponseData as ArrayBuffer));
+        } else {
+            json = jsonResponseData;
+        }
 
         for (const id in json) {
             const {width, height, x, y, sdf, pixelRatio, stretchX, stretchY, content, textFitWidth, textFitHeight} = json[id];

[halset]

It is also possible to work around this problem by parsing the JSON in the addProtocol callback.

    // internal:// links handled generally, but not by maplibre. this is an attempt to work around that problem
    maplibregl.addProtocol('internal', async (params, abortController) => {
        const t = ...;
        if (t.status == 200 || t.status == 0) {
            const buffer = await t.arrayBuffer();
            
            // work around https://github.com/maplibre/maplibre-gl-js/issues/5002
            if (params.url.includes("sprite") && params.url.endsWith(".json")) {
                const parsedJSON = JSON.parse(new TextDecoder().decode(buffer));
                return {'data': parsedJSON}
            }
            
            return {'data': buffer}
        } else {
            throw new Error('got status: ' + t.status + ' ' + t.statusText + ' for: ' + params.url);
        }
    });

[HarelM]

You need the addProtocol to act differently based on the request type, hare's a hack I did just now:

maplibregl.addProtocol('internal', async (params, abortController) => {
        const fixedUrl = params.url.replace('internal://', 'https://')
        const t = await fetch(fixedUrl);
        if (t.status == 200 || t.status == 0) {
          if (fixedUrl.includes(".json")) {
            const text = await t.text();
            return {
                'data': JSON.parse(text)
            }
          } else {
            const buffer = await t.arrayBuffer();
            return {
                'data': buffer
            }
          }
        } else {
            throw new Error('got status: ' + t.status + ' ' + t.statusText + ' for: ' + params.url);
        }
    });

[halset]

Yes, I am using that workaround now as seen in #5003 (comment).

This was very confusing for me. Seems like raster tiles, vector tiles and sprite images can be returned as raw data, but json has to be parsed.

It would make more sense to me if json also could be returned as raw data. Perhaps it would make more sense to other new users to custom protocol handling as well.

However, with the workaround, I have a working solution. So it is not that important to fix for me.