Cannot draw Zones or add points in Card / TypeError: Cannot read properties of null (reading 'toString')

[devhopsde]

Checklist

• [X] I have updated the card to the latest version available
• [X] I have cleared the cache of my browser
• [X] I have checked if the problem is already reported

The problem

Cannot draw Zones or add points in Xiaomi Vacuum Map Card. My Card is shown, No go and no Mop Areas are shown too. But when in cliock on the "+" Button, i get an "Uncaught (in promise) TypeError: Cannot read properties of null (reading 'toString')" Error and nothing happens.

i can control my Dreame F9 within Home Assistant.

What version of a card has described problem?

v2.0.11

What was the last working version card?

No response

What vacuum model do you have problems with?

vacuum.dreame.p2008

Which integration do you use to control your vacuum (link)?

https://github.com/al-one/hass-xiaomi-miot

What browser (browsers/apps) does have this problem?

Chrome, Brave, Android Firefox

What version of Home Assistant do you use?

2022.8.2

What type of installation are you running?

Home Assistant Container

Card's configuration

type: custom:xiaomi-vacuum-map-card
entity: vacuum.dreame_p2008_a819_robot_cleaner
title: karte
language: de
debug: true
calibration_source:
  camera: true
map_locked: false
map_modes:
  - template: vacuum_clean_zone
  - template: vacuum_goto
  - template: vacuum_follow_path
map_source:
  camera: camera.xiaomi_cloud_map_extractor
vacuum_platform: default

Javascript errors shown in the browser's console (if applicable)

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'toString')
    at xr.render (xiaomi-vacuum-map-card.js?hacstag=1933720442011:555:11018)
    at xiaomi-vacuum-map-card.js?hacstag=1933720442011:940:92
    at Array.map (<anonymous>)
    at xiaomi-vacuum-map-card.js?hacstag=1933720442011:940:81
    at Bn (xiaomi-vacuum-map-card.js?hacstag=1933720442011:123:12332)
    at Vr.render (xiaomi-vacuum-map-card.js?hacstag=1933720442011:938:23)
    at Vr.update (xiaomi-vacuum-map-card.js?hacstag=1933720442011:23:405)
    at Vr.performUpdate (xiaomi-vacuum-map-card.js?hacstag=1933720442011:11:5057)
    at Vr.scheduleUpdate (xiaomi-vacuum-map-card.js?hacstag=1933720442011:11:4704)
    at Vr._$E_ (xiaomi-vacuum-map-card.js?hacstag=1933720442011:11:4612)

Additional information

I always get "Uncaught (in promise) TypeError: Cannot read properties of null (reading 'toString') at xr.render" Errors...

My Camera Config in configuration.yaml:

camera:
  - platform: xiaomi_cloud_map_extractor
    force_api: dreame
    host: !secret vacuum_host
    token: !secret xiaomi_vacuum_token
    username: !secret xiaomi_cloud_username
    password: !secret xiaomi_cloud_password
    country: "de"
    draw: ['all']
    attributes:
      - calibration_points
    auto_update: true
    scan_interval: 10

[PiotrMachowski]

Can you check calibration points?

[mattiaskagstrom]

I just had this issue on version 2.1.2 where i could draw or place goto-points. if i however "unlocked" the mapped and zoomed all the way out, i could draw and place points again.

Card configuration:

type: custom:xiaomi-vacuum-map-card
map_source:
  camera: camera.xiaomi_cloud_map_extractor
  crop:
    top: 150
    left: 150
    right: 150
    bottom: 150
calibration_source:
  camera: true
entity: vacuum.ludde
vacuum_platform: default
map_modes:
  - template: vacuum_clean_zone
  - template: vacuum_goto
  - template: vacuum_clean_segment
    predefined_selections:
      - id: '16'
        icon:
          name: mdi:broom
          x: 23225
          'y': 28525
        label:
          text: Hall
          x: 23225
          'y': 28525
          offset_y: 35
        outline:
          - - 20956
            - 27956
          - - 25250
            - 27956
          - - 25250
            - 29600
          - - 20956
            - 29600
      - id: '17'
        icon:
          name: mdi:broom
          x: 19225
          'y': 27225
        label:
          text: Vardagsrum
          x: 19225
          'y': 27225
          offset_y: 35
        outline:
          - - 17250
            - 25100
          - - 21200
            - 25100
          - - 21200
            - 29350
          - - 17250
            - 29350
      - id: '18'
        icon:
          name: mdi:broom
          x: 21950
          'y': 25875
        label:
          text: Kök
          x: 21950
          'y': 25875
          offset_y: 35
        outline:
          - - 21200
            - 25100
          - - 22700
            - 25100
          - - 22700
            - 26650
          - - 21200
            - 26650
      - id: '19'
        icon:
          name: mdi:broom
          x: 24250
          'y': 26700
        label:
          text: Badrum
          x: 24250
          'y': 26700
          offset_y: 35
        outline:
          - - 23500
            - 25300
          - - 25000
            - 25300
          - - 25000
            - 28100
          - - 23500
            - 28100
      - id: '20'
        icon:
          name: mdi:broom
          x: 26725
          'y': 27350
        label:
          text: Sovrum
          x: 26725
          'y': 27350
          offset_y: 35
        outline:
          - - 25050
            - 25250
          - - 28400
            - 25250
          - - 28400
            - 29450
          - - 25050
            - 29450
map_locked: true
two_finger_pan: false

[PiotrMachowski]

@mattiaskagstrom which browser do you use?

[mattiaskagstrom]

@PiotrMachowski I'm on Chrome

[PiotrMachowski]

Does the problem still exist in v2.2.0?