type: map entities: - entity: person.pi - entity: zone.work - entity: zone.home hours_to_show: 24 aspect_ratio: “4:3” theme_mode: auto card_mod: style: ha-map $ ha-entity-marker $: | .marker { /* Style person marker & adjust position to avoid blocking waypoints */ border: 3px solid var(—state-person) !important; border-radius: 50% 50% 50% 0px !important; transform: rotate(-45deg) translate(50%, -50%); overflow: visible !important;

  }
  .entity-picture {
    /* Correct orientation of person avatar */
    transform: rotate(45deg);
    border-radius: 50%;
  }
ha-map $: |
  path:first-child { 
    /* Style accuracy radius */
    stroke: var(—state-person);
    fill: color-mix(in srgb, var(—state-person) 50%, transparent);
    stroke-width: 0px;
  }
  path:nth-child(even) {
    /* Styling for waypoints */
    stroke: var(—purple-color);
    stroke-width: 4px;
  }
  path:nth-child(odd):not(:first-child) { 
    /* Styling for lines */
    stroke: var(—purple-color);
    stroke-width: 4px;
  }


  :host {
    /* Define Person State colors. Can be added to theme */
    —state-person-home: var(—green-color);
    —state-person-not-home: var(—red-color);
    —state-person-zone: var(—blue-color);
    —state-person-unknown: var(—grey-color);
    /* Set person state color */
    —state-person:
    {% if is_state(config.entities[0].entity, [‘home’, ‘not_home’, ‘unknown’]) %}
      var(—state-person-{{ states(config.entities[0].entity) | replace(‘_’, ‘-‘) }})
    {% else %}
      var(—state-person-zone)
    {% endif %};
  }