Device tracker map for Home Assistant (similar to the Google Maps Timeline)

covrig · February 11, 2018, 8:02pm

Tracking and mapping one or more devices using Home Assistant, Google Sheets, Google Maps Api, and IFTTT. Similar to Google Maps Timeline feature.

Displays the history of a Home Assistant device tracker (e.g. phones) on a Google map. Uses Google Sheets as data storage.
I am aware, that all this could be done a lot easier with a small python script and a local file or sending a PUT REST to Google Sheets or even using the local history. I prepared this as a small training project that goes through a lot of stuff.
You can also ignore most of the stuff in the git and just feed a local CSV file to the map.

Features:

Now with multiple devices!
Date filters: day, period (you can go back in time as long as you want);
Markers: on/off;
Polylines: on/off;
Distance traveled;
Heatmap: +/- radius, +/- intensity, opacity, gradient color;
Auto resize, recenter;
Code can be easily customized to add/remove features (e.g. add filter for multiple devices);
Can be used as a panel iframe or as a custom state card iframe - using my custom iframe state card (it’s a html file);
Disabled more-info card.
Terrible setup procedure!

498×554 164 KB

1079×483 517 KB

769×571 40.8 KB

atomicpapa · February 11, 2018, 9:01pm

Will this work for multiple devices? i.e. our phones

covrig · February 11, 2018, 10:06pm

For now it’s one device per map (any type of device that feeds coordinates). If you send data without any device tag (like now), from multiple devices to the same Google sheets file it will be a bit of a mess.
You either: create a different map for each device or send a device tag together with the other data and create a filter in the html to organize it a little. If there is enough interest I will implement proper multiple device support. Myself, i don’t need it (for now).
--
It supports multiple devices now.

Coolie1101 · February 13, 2018, 5:06am

Hey, just implemented your setup for the panel iframe, but no map shows up on the front end, there are three entries in the google sheet, and I get the following in console.

I went over the configuration a couple times.

covrig · February 13, 2018, 7:12am

Do you see the map? See if the html works in jsbin.

Coolie1101 · February 13, 2018, 7:33am

No map on frontend or jsbin

covrig · February 13, 2018, 7:56am

It could be something small. Are you sure you did’t have an extra : in your html?
It could be that you don’t have a good Google Maps API key. Does this work: https://jsbin.com/zejuxih/edit?html,output? <- Insert your API key.
If yes, do you see the line?

ReneNulschDE · February 13, 2018, 9:50am

Hi,

this is a cool solution.

Here is a small, dirty, not-final adjustment with direct integration in the HA history API.

var URL = 'https://YOURHAURL/api/history/period/2018-02-06T07:41:28.321Z?api_password=YOURPASSWORD&filter_entity_id=device_tracker.YOURDEVICEID&end_time=2018-02-12T07:41:28.321Z';
        d3.json(URL, function(error, data) {
            csv = data[0]
            //csv = data.filter(function(row) {
            //    return (row['last_changed'] >= document.getElementById("date").value && row['last_changed'] <= document.getElementById("date2").value);
            //});
            var bounds = new google.maps.LatLngBounds();
            var location2 = [];
            csv.forEach(function(d) {
                var location = new google.maps.LatLng(d['attributes'].latitude, d['attributes'].longitude);
                //For debug uncomment the following line:
                //console.log(d['attributes'].latitude)
                path.push(location);
                heatmapData.push(location);
                var marker = new google.maps.Marker({
                    position: location,
                    map: map,
                    title: 'test',//d.Title,
                    icon: URLMarker,
                });
                //bounds.extend(location);
                //map.fitBounds(bounds);
                marker.infowindow = new google.maps.InfoWindow({
                    content: 'test',//d.Title
                });
                marker.addListener('click', function() {
                    this.infowindow.open(map, this);
                });
            });
        });

If you would like to test this in tools like JSBIN you need to add “CORS” header. Sample script for NGINX

covrig · February 13, 2018, 11:46am

Excellent! If everything works fine, and you agree I would like to add it to the git (crediting you).

Something to consider when using this approach is that you can’t go back in time too much (limited by your database purge). Also the URL should be edited to allow dynamic dates.

Coolie1101 · February 13, 2018, 10:47pm

JS Bin - Collaborative JavaScript Debugging? ← Insert your API key.

I get the following with any key used from different accounts:

"Google Maps API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error"
"TypeError: Cannot read property 'push' of undefined
    at https://null.jsbin.com/runner:96:22
    at Array.forEach (<anonymous>)
    at https://null.jsbin.com/runner:91:17
    at Object.<anonymous> (https://d3js.org/d3.v4.min.js:2:64779)
    at k.call (https://d3js.org/d3.v4.min.js:2:99927)
    at XMLHttpRequest.e (https://d3js.org/d3.v4.min.js:2:63355)"
"Google Maps API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key"

"Google Maps API error: InvalidKeyMapError =
The API key included in the script element that loads the API is not found. Please make sure you are using a correct API key. You can generate a new API key on the Google API Console.

covrig · February 13, 2018, 11:06pm

As you just written you have a bad API key. Go to the Google Api Console and create a new one. Before that enable the Google Maps Api. It takes a few minutes for the Api key to activate once created.

Coolie1101 · February 13, 2018, 11:11pm

That error was with the new and old API keys:

The API is enabled:

Coolie1101 · February 13, 2018, 11:13pm

Am I limited to the amount of times I can use the above link?

I’m getting “invalid-key-map-error” with six different API keys???

covrig · February 14, 2018, 5:17am

Maybe you have a cache problem or you need to wait a bit longer for the key to activate.

Coolie1101 · February 14, 2018, 5:23am

Well it has now been 6hrs since,and I’m still getting the same error.

I’m truly baffled, would really like to implement this.

Coolie1101 · February 14, 2018, 5:45am

I have tried 8 different keys so far, from different dates as far back as Jan 2017, all giving the same error.

covrig · February 14, 2018, 7:01am

No idea how to help you. Google might help you more than me here (or not). Read a bit about the keys, maybe you are not getting or activating the right one or placing it correctly in the URL.

Coolie1101 · February 14, 2018, 7:03am

Can I PM you a key to test?

Coolie1101 · February 14, 2018, 8:29am

Okay, not sure what on earth was wrong, cleared my cache and all browsing data, still didn’t work.

Went back to the spreadsheet, stop publishing, then publish again, and it now works.

Thanks for all your patience and assistance, and of-course, for the great share.

Kala69 · February 19, 2018, 3:47am

Hello

I have a SmartHome system would like to track again SmartHome system my location of the mobile phone to control various things.
Is there a possibility to get the data only with a request of course with the Abi key.
I just need the coordinates everything else I can do in large format in Json format.

“https://www.googleapis.com/geolocation/v1/geolocate?key=YOUR_API_KEY” ???

I ask a tip.