[Bug] Custom marker image on Map Widget not always loading, console shows error

Describe the bug I am using the map widget to show the location of 18 devices. I added a custom function for the markers to show an image instead of the default pin icon. The image is selected based on changes in the telemetry data, see function code below:

// FUNCTIONS
function rotateSquareImage(imageBase64, rotation) {

    let img = new Image();
    img.src = imageBase64;

    let canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Translate origin to center, rotate at origin, move back origin and draw
    let canvasCtx = canvas.getContext("2d");
    canvasCtx.translate(Math.floor(img.width / 2), Math.floor(img.height / 2));
    canvasCtx.rotate(rotation * (Math.PI / 180));
    canvasCtx.drawImage(img, -Math.floor(img.width / 2), -Math.floor(img.width / 2));

    return canvas.toDataURL("image/png", 1);
}

// Default image
var res = {
    url: images[0],
    size: 40
}

// Add rotation
var rotation = dsData[dsIndex]['rotation']
var elevation = dsData[dsIndex]['deltaElevation'] * -1
var alarm = dsData[dsIndex]['alarmHigh']
var warning = dsData[dsIndex]['warningHigh']
//console.log(rotation, elevation, alarm, warning)

if (rotation && elevation && alarm && warning) {
    console.log('at rotation')

    if (elevation >= alarm) {
        res.url = rotateSquareImage(images[3], rotation);
    }
    else if (elevation >= warning && elevation < alarm) {
        res.url = rotateSquareImage(images[2], rotation);
    }
    else {
        res.url = rotateSquareImage(images[1], rotation);
    }
}

return res;

This work sometimes, but other times I get this error in the console polyfills.6d09cdca7f8342e3da77.js and the marker image is not shown, but instead the default pin icon. It seems that it get stucks loading and then throw the error.

Event {isTrusted: true, type: 'error', target: img, currentTarget: null, eventPhase: 0, …}
isTrusted: true
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
path: (5) [img, body.tb-default, html, document, Window]
returnValue: true
srcElement: img
target: img
timeStamp: 3714.800000011921
type: "error"
[[Prototype]]: Event

Your Server Environment

• cloud.thingsboard.io

Your Client Environment

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 107.0.5304.110 (Official Build) (x86_64)

To Reproduce Steps to reproduce the behavior:

1. Create many devices ( > 20) and show them in the Map Widget.
2. Add a custom marker function to change the default marker icon to an image based on telemetry.
3. Refresh webpage until error appear, specially when loading is slow.
4. See error in the console as an Uncaught Event.

Expected behavior I would expect the marker icon to be always the default image that I defined in my custom marker function.

Screenshots Default pin marker in widget

My image marker based on custom function

[devaskim]

You cannot activate debug mode neither for single widget, nor for whole ALL. I meant to locally build and run only UI container. In such mode browser’s Devtool will show more detailed information where the error occurred. Before build you need to set valid TB domain here

[Civilduino]

It is some problem with the canvas tag, but I found a better solution that seems to work! thanks to this post. I found this for the color too, but I haven’t been able to make the color work. I am not sure about which attribute is the correct one for the color.

Here is the function if you want to play with rotating your markers 😉

// color = HEX format
//function imageColorRotate(svgBase64, color, rotation) {
function imageColorRotate(svgBase64, rotation) {

    let img = new Image()
    img.src = svgBase64

    // Strip "data:image/svg+xml;base64," to get encoded SVG
    let encoded = svgBase64.substring(26);
    // Decode Base64
    let decoded = atob(encoded);

    // Create an HTML element from decoded SVG
    let wrapper = document.createElement('div');
    wrapper.innerHTML = decoded;

    let newSvg = wrapper.childNodes[1];
    // Set up new color
    //newSvg.setAttribute("fill", color);
    // Rotate
    let rotate = "rotate(" + Math.floor(rotation) + Math.floor(img.width / 2) + Math.floor(img.height / 2) + ")"
    newSvg.setAttribute("transform", rotate);

    let newSvgBase64 = "data:image/svg+xml;base64," + btoa(wrapper.innerHTML)
    wrapper.remove()

    return newSvgBase64
}