How to overlay a second "map_source"?

[Photelegy]

First of all, thank you very, very much for this awsome lovelace-card!!!

How can I use a .PNG-image (with transparent parts) as an overlay over the "camera.xiaomi_cloud_map_extractor"?

Before I found this lovelace-card ("lovelace-xiaomi-vacuum-map-card") I tried it with the "picture-elements"-card to see where my cleaner exactly is in my home.
This is the code and how it looked:

type: picture-elements
image: /local/homeplan/HomePlan3OG_Wohnung_WHITE.png
elements:
  - type: custom:xiaomi-vacuum-map-card
    entity: vacuum.roborock_vacuum_s5e
    calibration_points: null
    camera_calibration: true
    map_source:
      camera: camera.xiaomi_cloud_map_extractor
      crop:
        top: -75
        bottom: 50
        left: -24
        right: -79
    calibration_source:
      camera: true
    hold_action:
      action: vacuum.roborock_vacuum_s5e
    style:
      left: 14%
      top: 25.5%
      transform: scale(1.79)
      opacity: 80%
  - type: image
    image: /local/homeplan/HomePlan3OG_Wohnung_transp.png?v=1
    style:
      left: 0%
      top: 0%
      transform: scale(1)
      opacity: 100%

Thank all of you for your ideas!!!

[PiotrMachowski]

What features do you want to have? Do you just need vacuum's location to be shown on picture-elements?

[Photelegy]

Wow, you are very fast at responding!

I want to have all the functionality of your awesome card.
So it would be "camera.xiaomi_cloud_map_extractor" on the bottom layer,
my "image" (transparent map) on top
and then the functionality of your "lovelace-xiaomi-vacuum-map-card" on top of that.

I just thought, that maybe there's a way to overlay my transparent map directly in the "xiaomi_cloud_map_extractor"?

At the moment I have two pages in your card (the idea is to combine them into one):

Thank you very much for your ideas and your help!!!

[LTKingChaos]

Nothing? Would like the same

[Cellivar]

Coming in super late here I wanted to show my solution to "floorplan image under the vacuum map" challenge. I'm using the Valetudo Vacuum Camera, and this pattern should work for the Extractor plugin as well since it renders similarly.

The basic idea is to use the floorplan image as the background-image of the map div element. By setting the appropriate values in card_mod you can center the image. Then it's a matter of adjusting the Valuetudo Vacuum Camera settings until the map is cropped exactly right. I also made the map more transparent so elements of the floorplan would show through better.

Here's the what the result looks like:

This is what the full card config looks like:

cards:
  - entities:
      - name: Valetudo
        type: weblink
        url: https://vacuum.squeak.house/
    type: entities
    show_header_toggle: false
    card_mod:
      style: |
        div {
          font-size: 19px
        }
  - type: custom:xiaomi-vacuum-map-card
    map_source:
      camera: camera.valetudo_camera
    calibration_source:
      camera: true
    entity: vacuum.valetudo_valetudo
    vacuum_platform: Hypfer/Valetudo
    internal_variables:
      topic: valetudo/Valetudo
    map_locked: true
    card_mod:
      style: |
        #map-zoomer-content {
          background: var(--map-card-zoomer-internal-background);
          background-image: url(/local/floorplans/ground_floor_crop.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
type: vertical-stack