Heatmap layered with an image as background

[zhangyongzhe20 (Yong Zhe)]

Hi, I want to ask whether it's possible to customize the visualization in Kibana, which is using heatmap layering with an image as background. Something like the picture in the below. I'm new to the Vega and Kibana and tried some online tutorials but most of them related to heatmap and image features are not supported in the current vega-kibana version such as "mark type: image" in vega-lite and kde2d transform in Vega. So Appreciate it if someone can give me some guidance on how to make such visualization in Kibana.

[zhangyongzhe20 (Yong Zhe)]

It seems the heatmap density rendering feature is not supported yet. I tried use the "rect" to mimic a heatmap. But I don't know how to make the background image fill the whole canvas. Someone can give me some advice? Thanks.
The code I used:

    "scales": [
      {
        "name": "x",
        "type": "band",
        "domain": {"data": "feature_correlation", "field": "name"},
        "range": "width"
      },
      {
        "name": "y",
        "type": "band",
        "domain": {"data": "feature_correlation", "field": "key"},
        "range": "height"
      },
      {
        "name": "color",
        "type": "linear",
        "range": {"scheme": "yelloworangebrown"},
        "domain": {"data": "feature_correlation", "field": "value"},
        "zero": false, "nice": true
      }
    ],
  
    "axes": [
      {"orient": "bottom", "scale": "x", "domain": true},
      {"orient": "left", "scale": "y", "domain": true}
    ],
{  
          "type": "image", 
          "encode": {  
            "enter":{
              "url": {"value": "https://img.pngio.com/filefootball-field-105x68png-football-field-png-1050_680.jpg"
              }
            },
            "update": {
                "width": {"scale": "x", "band": 6},
                "height": {"scale": "y", "band": 6}
            }
       }
     }