lightningmap.yaml

////change the geo to yours in the url///
type: custom:button-card
variables:
  lightningmap: 1.1.1
template:
  - variable_template
  - body_template
styles:
  grid:
    - grid-template-areas: |
        "title title" 
        "message message"
    - grid-template-rows: min-content auto
  card:
    - background: black
    - background-size: cover
  custom_fields:
    message:
      - font-size: "[[[ return variables.var_font_size ]]]"
      - align-self: center
      - justify-self: center
      - width: 100%
      - height: 100%
      - position: relative
      - display: flex
      - flex-direction: column
      - justify-content: center
      - text-align: center
      - transform: scale(140%)
custom_fields:
  title:
    card:
      type: custom:button-card
      icon: mdi:clock
      name: "[[[ return variables.var_current_time ]]]"
      tap_action:
        action: navigate
        navigation_path: clock
      hold_action:
        action: navigate
        navigation_path: vloerplan
      styles:
        card:
          - background-color: transparent
          - border-width: 0px
          - width: auto
          - padding: 5px
        grid:
          - grid-template-areas: "\"i n\""
          - grid-template-rows: min-content min-content
          - grid-template-columns: 90px auto
        name:
          - font-size: 8vh
          - font-weight: bold
          - color: white
          - text-shadow: 2px 2px black
        icon:
          - filter: drop-shadow(2px 2px 2px black)
          - width: 12vh
          - color: white
  message:
    card:
      type: iframe
      url: >-
        https://map.blitzortung.org/index.php?interactive=0&NavigationControl=1&FullScreenControl=0&Cookies=0&InfoDiv=0&MenuButtonDiv=1&ScaleControl=1&LinksCheckboxChecked=1&LinksRangeValue=10&MapStyle=0&MapStyleRangeValue=0&AudioCheckboxChecked=1&DetectorsCheckboxChecked=1&Advertisment=#10/51.908710/4.35252
      aspect_ratio: 50%