Location timeline card to easily show location history

Share your Projects! Dashboards & Frontend
1

Hey all,

For a long time, I wasn’t really happy with the way I could view the location history of my persons / device trackers. So I made a new card, inspired by Google Maps’ location history timeline.

card_example
card_example505×711 98.4 KB

It’s called Location Timeline Card, and it builds a clean, timeline-style day view from your Home Assistant location history.

Instead of looking at raw GPS points, the card turns your device_tracker or person history into an easy-to-read story of the day:

  • It groups data into clear stays and moves
  • It shows zone names when someone is inside your zone.* entities
  • It can resolve locations outside zones to human-friendly names
  • It lets you quickly switch between days
  • Everything runs fully in the frontend, no extra backend integration required

You can optionally connect it to the Places integration for better location labels, and there’s also a fallback to OpenStreetMap reverse geocoding if needed.

Installation is available through HACS as a frontend dashboard card.

If you’d like to try it out or check the code, here’s the repo. Feedback, ideas, and feature requests are very welcome.

9 Likes
2

Very nice card, thanks for building and sharing @konewka17 !

Would it be possible for honor the user’s time format so I can have 24h time format instead of the AM/PM stuff format ?!

Thanks!

3

Super cool. Is there any way of changing the map with a dark theme?

1 Like
4

This is now fixed!

5

@ konewka17

This is fantastically fun and useful.
Thanks a bunch!

Any way of configuring the map size myself ?
It’s too small to be helpful for me.

Again :
good stuff.

1 Like
6

I would love to translate the strings to Dutch, to keep things aligned with my HA install.

7

@stefan1982 I’m still working on translation, bit stuck on how to implement

8

@CBY I released a new version where you can set the height of the map yourself!

9

@phipe implemented!

10

Brilliant, seems to work well in 1.6! Thanks :blush:

Another question/feature request - would it be possible to define the width of the line showing the route ? Currently it’s way thicker than the one in the default map card making it harder to “read” in detail.

11

You the man. I’ll try it right away.

Thanks a bunch!

1 Like
12

Fantastic! Works well.
For people trying don’t forget to do a full browser empty cache (or reboot).

Thanks again, we love your project / integration.

1 Like
13

Ok,

I’m not smart enough to figure this out. Not unusual with HA.

This is my yaml:

views:
  - type: sections
    sections:
      - type: grid
        cards:
          - type: heading
            heading: Map
            heading_style: title
          - type: custom:location-timeline-card
            entity: device_tracker.pixel_8a
            places_entity: null
            osm_api_key: [email protected]
            stay_radius_m: 75
            min_stay_minutes: 10
            grid_options:
              columns: full
        column_span: 1
    header:
      layout: center
      badges_position: top
      badges_wrap: wrap
      card:
        type: markdown
        content: |-
          # Hello doobes
          Text, text and more text
    max_columns: 1
    title: Home
    cards: []

Yet I get this screen:

image
image1647×953 84 KB

I have never been to Amsterdam. Much less today.

Even going back in time, there is no timeline.

How do I make the image larger?

Yes, I’m HA challenged.

Help?

14

Hi Christopher,

Here’s how to change the map size.
The feature was just added.

Forget (delete) the card_mod portion at the end

type: custom:location-timeline-card
entity: device_tracker.cby_phone
title: HEADING
places_entity: sensor.places_cby
osm_api_key: null
stay_radius_m: 50
min_stay_minutes: 3
map_height_px: 500
grid_options:
  columns: full
  rows: 5
card_mod:
  style: |
    .card-header {
      font-size: 10px !important;
      line-height: 12px !important; /* Keeps spacing tight */
      padding-top: 8px !important;  /* Adjusts vertical alignment */
      padding-bottom: 8px !important;
    }

image
image455×933 105 KB

Make sure you have the latest version and don’t forget to clear the browser cache
[ F12 in Chrome then Right click browser refresh - see this pic ]

image
image289×146 6.45 KB

If you only see Amsterdam, you need to move around before it updates. I had something similar too.

15

Thank you.

What is this:

I have no such sensor available.

16

Hey Doobes,

That’s my sensor I’ve created with OpenStreetMap. Replace this with yours.

OpenStreeetMap is free.
Once you do this it will work for you!

Cheers

CBY

18

Okay,

Got it all done.

The documentation on github was helpful.

I’m a photographer that will occasionally use Google Timeline data to geoposition images. Is it possible to do a daily dump of a timeline to a file, or database? That way instead of using a third party app, or downloading a Google timeline file, I could just grab the day of the photo shoot, do some handwaving to create a GPX file, and then I can use it in Digikam to georeference.

Nice work BTW, and sorry for my brain damage…

19

@phipe thanks! Could you add this as a feature request on github? That way I can keep track :slight_smile:

20

@stefan1982 Dutch and English translations now available. Feel free to submit a PR with other languages :slight_smile:

21

@doobes Sorry, this seems too specific to implement. If you’re feeling hacky, you could try and reverse engineer it from the browser console by selecting the <location-timeline-card> in the Developer Tools console, and then going to console and work with $0._cache or $0._getCurrentDayData().tracks. All data is there, but you’ll need to be comfortable working with Javascript and hacking around :wink: