Having trouble writing a working addProtocol for a raster layer

[jondoesntgit]

maplibre-gl-js version: 1.15.2 (I know this is old, but I haven't been able to make it work on a newer version as well)

browser: Firefox, Internet Explorer

Steps to Trigger Behavior

I tried looking everywhere (Stack Overflow, documentation, Github Issues, source code, ChatGPT) to make a working implementation of the addProtocol that allows me to write an arbitrary 256x256 array of RGB and load it on as a tile. After about 4 hours, I finally gave up. It appears that the API has changed over the last few years, but I for the life of me couldn't find out how to do it in any version of maplibre, and so I come to the devs for help.

Link to Demonstration

https://jsfiddle.net/jamwheeler/y7qmnf2b/21/

Expected Behavior

In the demonstration, I write a custom protocol that creates a 256x256 canvas, fills it with red pixels, and then returns the canvas either as a base64-encoded image, or as some ArrayBuffer. I've tried all sorts of ways to return the data from the addProtocol function, whether it's a JSON array with the data in a data or body key, trying to use the callback function on it (either as the only argument, or the second argument of four with the others being null, etc... I expect to see some red overlay over the world map.

Actual Behavior

No visual changes to the world map, but there appears to be errors in the console.

Ultimately, I want to write a heatmap over the world, with varying resolutions as I zoom in. The heatmap code will eventually be written in Rust and compiled to WebAssembly for performance reasons. I furthermore will want to be able to invalidate all of the tiles, so if there's a way a dev can point me to how to do that, I'd appreciate that a bunch. The hway that I'll invalidate them is by having an input text field that has some number on it. When the number changes, I need to regenerate all the tiles and invalidate the cache on all the other tiles.

[wipfli]

Maybe you can have a look at https://github.com/wipfli/maplibre-raster-preprocess. If I remember correctly, it is quite inefficient but does work...

[jondoesntgit]

Thanks @wipfli. Using your example, it now works with v1.15.2. See https://jsfiddle.net/jamwheeler/npg8rtmk/4/

However, it does not work with v4.5.0. It complains that callback is not a function. https://jsfiddle.net/jamwheeler/npg8rtmk/6

[acalcutt]

I am curious about this as well, how do we update this to work with the change from callbacks to promises in v4? I need to update my example as well since it also gets the callback error mentioned when used with maplibre-js v4

[HarelM]

the second parameter is now an abortController.
Simply change the addProtocol method to return a promise with byteArray.
Check out the example in the documentation:
https://maplibre.org/maplibre-gl-js/docs/API/functions/addProtocol/

[jondoesntgit]

Thanks. I got it working thanks your feedback.

I think the missing piece for me is that the arrayBuffer should contain some "file" data (the docs give the example of a vector pbf file, in my case its the contents of a png file). In my original attempts at using the documentation, I was converting a 256x256 RGBA pixel array represented as a Uint8Array to an arrayBuffer and passing that. In the working example below, I convert the canvas (which is a 256x256 RGBA pixel array) into a png file using canvas.toBlob, and then I convert the PNG file blob into an arrayBuffer.

https://jsfiddle.net/jamwheeler/npg8rtmk/25/