Map card does not show up in main view of the sidebar view type

[Mincka]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

I use a panel (not the default_view) with the "Side bar" view type. If I add a map card in the main (left) area, it will not appear on browser refresh.
I need to go on another dashboard first, then go back to the panel with the map card and then it appears.
I thought it was fixed in #11834 but it's not. As leave this reference in case that could be somehow related.

If a map card is present in the default_view panel of the dashboard, it will work for it and other panels, configured as side bar view or not. Thanks oalbaf for this clarification.

Workaround

See this temporary workaround.

Describe the behavior you expected

The map card shows up on browser reload like other cards.

Steps to reproduce the issue

1. Create a new panel
2. Set it to Side bar View Type
3. Add a map card in the main area
4. Click done
5. CTRL+R
6. The map card does not appear
7. Switch to another Dashboard
8. Go back to the panel with the map card
9. The map card appears as expected

  - theme: Backend-selected
    title: Test Panel
    path: p
    type: sidebar
    badges: []
    cards:
      - type: map
        entities:
          - device_tracker.telephone_julien
          - device_tracker.telephone_morgane

What version of Home Assistant Core has the issue?

2022.3

What was the last working version of Home Assistant Core?

2022.2

In which browser are you experiencing the issue with?

Edge Version 99.0.1150.36 (Official build) (64-bit)

Which operating system are you using to run this browser?

Windows 10 19043.1586

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

None

Additional information

No response

[Mincka]

I tried your workaround of the map card in another panel of the same dashboard but it did not work in my case. 😔

[degrashopper]

I have the same problem as @Mincka in a chrome browser and in the ha companion app as well. I am currently running 2022.3.3

[oalbaf]

Same problem at 2023.3.6 version.

If you add a map card in default_view panel, the panel with map card in side view style will works well. But, if you have only a map card in other view side bar style panel the map card don't work.

Edit: you can create a hidden card map in default view with 100000:0.1 scale.

type: map
entities:
  - entity: device_tracker.some_device
aspect_ratio: '100000:0.1'
dark_mode: true

[Mincka]

Thanks for the aspect_ratio hack @oalbaf. It's a good enough workaround for now. 👍

[uj]

Same issue here after updating to newest version today, very frustrating

My dashboard is grid style, in a panel

The workaround does not work. If you create a new view with path default_view, make it a panel with a map, it does not make the original view work after a refresh. That is how I'm reading the workaround to be used.

[pedrolamas]

Experiencing the same issue as reported here... my config is here: https://github.com/pedrolamas/home-assistant-config/blob/master/config/lovelace/map.yaml

One thing I did notice is that if I click "..." and then select "Refresh" (available only when using YAML for lovelace), the map loads just fine, but nothing shows if I don't do this.

[ildar170975]

Map is not displayed even in case of using a view w/o a sidebar - but with using a custom:layout-card.
Select any different layout - vertical, horizontal etc - no map then.
See details here: thomasloven/lovelace-layout-card#193

[pedrolamas]

For the record, I can still reproduce this issue in the latest HA 2022.5.5

[QNimbus]

I'm experiencing this issue as well - the workaround suggested by @oalbaf does doesn't seem to work for me.

Edit: I'm on the following config:

Home Assistant Core 2022.6.4
Home Assistant Supervisor 2022.05.3
Home Assistant OS 8.1

Update: Turns out the workaround does not work (reliably) for me either.

[pedrolamas]

The workaround didn't work for me either...

@QNimbus can you (and everyone else here experiencing this problem) upvote the first post on this issue?

Not sure if the frontend devs watch that, but I guess it won't hurt anyway...

[ildar170975]

upvote the first post on this issue?

Every new post in the thread moving the issue to the top, I think - but this change will only be noticed if a person sorts a list by "last updated".

[alixjg]

I have the same issue. Map cards appear to be intermittent at best.
core-2022.6.7
supervisor-2022.05.3
Home Assistant OS 8.2

[direx1]

same issue but only in sidebar view

[nsuresh81]

I have the same issue too.
My dashboard is grid style in a panel.

[Mincka]

@oalbaf, @uj , @ildar170975 and @nsuresh81 please add a thumbs up on the first post, this issue will gain attention more quickly. Thank you.

[nsuresh81]

Is there a solution for this?
A perfectly working Map gets broken for no reason, it's frustrating and I'm not able to display the map with my entities being tracked on my kiosk.

[Mincka]

Please read the first post with the workaround while waiting for a fix.

[nsuresh81]

@Mincka
Yes the workaround works. It's not an elegant solution, more of a hack, but it works.
For those still struggling, I used the "aspect_ratio" hack by @oalbaf to insert a hidden/dummy map in some horizontal / vertical stacks. Sample code below and you may change it as per your needs

square: true
columns: 1
type: grid
cards:

• type: horizontal-stack
  cards:
  • type: vertical-stack
    cards:
    • type: map
      entities:
      • device_tracker.google_maps_xxxxxxxxxxxxxxxxxxxxx
      • device_tracker.google_maps_yyyyyyyyyyyyyyyyyyyyy
        title: Person Tracker
• type: map
  entities:
  • device_tracker.google_maps_xxxxxxxxxxxxxxxxxxxxx
  • device_tracker.google_maps_yyyyyyyyyyyyyyyyyyyyy
    aspect_ratio: '100000:0.1'

[degrashopper]

@Mincka Yes the workaround works. It's not an elegant solution, more of a hack, but it works. For those still struggling, I used the "aspect_ratio" hack by @oalbaf to insert a hidden/dummy map in some horizontal / vertical stacks.

This fix is not working for me in the android companion app.
Maybe the new nabu casa frontend developer could have a look at this issue 😏

[Mincka]

This bug is still there in 2022.11.0b0.
And now the workaround card is visible because of the new theme.

[anthonws]

Workaround also doesn't work for me.
I can repro this anytime in Firefox, for example. But it also happens in other browsers, Android App, Fully Kiosk Browser, etc.
Each time I edit the card, it shows up. But after a refresh, it goes away immediately.

EDIT: I am also using custom-card and latest 2022.11 version.

[ildar170975]

Not using any workarounds - but getting this:

instead of this:

[jonostanck]

I have exactly the same problem. Workaround is not working for me.
I'm using bunch of custom cards.

[bakerkj]

I am having the same problem.

[wormuths]

Same here. Sometimes the map shows, other times not...

[ivancristina]

Exact same issue here

Workaround also doesn't work for me. I can repro this anytime in Firefox, for example. But it also happens in other browsers, Android App, Fully Kiosk Browser, etc. Each time I edit the card, it shows up. But after a refresh, it goes away immediately.

EDIT: I am also using custom-card and latest 2022.11 version.

[Mincka]

Please add thumbs up on the first post and hope someone will be assigned.

[karwosts]

Poked around and looked at this a bit. I compared the styles between two cases where map was displayed, and map was not displayed.

The only real difference in rendered html between the two was the root div under hui-map-card had "padding-bottom: 100%" in the case where it was working, and that style was not there in the case where it was not working.

I do not yet know where that comes from, exactly what it does, or why it is there sporadically. I attempted to add this manually to the style here in hui-map-card:

https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/cards/hui-map-card.ts#L400

  #root {
    position: relative;
    height: 100%;
    padding-bottom: 100%;
  }

I refreshed the page about 10 times after that and it seems to work every time for me, before this it was not working.

Anyone else (who has a frontend dev environment) want to test if that fixes the issue for them?

[karwosts]

A few more clues to add to the above. The padding-bottom seems to be derived from the aspect ratio.

If a 4:1 aspect ratio is chosen, then the padding-bottom added by the system is 25%, not 100%. It seems in some cases this is missing. If it is missing, and I add 100% to the root like in the above example, then the aspect ratio will render incorrectly (at 1:1) in the "buggy" load cases. That may be preferable to not showing at all, but it's still not a complete solution.

Need to look more at how aspect ratio is updating the padding-bottom, and why it is sometimes missing.