I’d like to get this working on my dashboards but I’m struggling. I’ve followed the instructions but just get a blank tile on the dashboard (on both my MacBook Pro with Safari and Fire HD with Fully). It’s doing something as when I touch the tile I get the prompt “use two fingers to move the map” - there’s just no map visible.
Although I followed the instructions, there are a couple of bits that aren’t clear:
1 - Which Google API do I need? - there are several listed and the instructions do not indicate which to use in the project. I have just used “Maps Javascript API” - Is that correct?
2 - Although I set up the billing/activated the trial - I cannot seem to confirm it is enabled for the sample project. I clicked on the link within the docs and it doesn’t confirm whether it is enabled or not (for the project).
3 - After creating the API key. There’s a prompt to “Remember to configure the OAuth consent screen” Do I need to do anything?
4 - Finally. If I want to set up tiles for 2 people on my dashboards (my wife and myself) - can I do this with a single Maker API instance (just editing the relevant device ID in the tile) or do I need to set one up for each individual and likewise with the Google Maps API key - 1 or 2?
Thanks for any assistance.
EDIT: Oops I think I’ve got the wrong Life 360 app on Hubitat (the built in rather than the community app)
Hi @John_Williamson, it sounds like the Google Map is initiated correctly in your tile, and I would hesitate to guess the tile is not able to get the latitude and longitude from your Life360 device. (As you identified, you will need to make sure you can see the latitude and longitude attributes in your Hubitat device page first.)
You don’t need a separate Google Map API key nor the Hubitat Maker API instance, you simply just need to use a different Life360 device id in another tile with the same Google API key and Hubitat maker API info.
I played with an alternative mapping service, OpenStreetMap, that doesn’t require all the complicated setup steps of Google Maps… let me take a look at what it would take to port James’ demo over to that.
@James - I must be missing a driver or something? I have the Hubitat Life 360 Connector installed and logged in to my account. I’ve just installed the community Life360 tracker and child apps for the two people, but I’m only seeing devices created by the built in Connector app which does not expose Lat & Lon info as they have the Hubitat built in Virtual Presence device driver selected.
@John_Williamson, make sure you have added this device driver in your Hubitat, so when setting up the Life360(Connect) smartapp as shown below, it should create the device(s) based on the Life360 members selected for you automatically.
I might have the wrong app - again! There’s very little install information on the users GitHub that a novice like myself can make sense of. I installed the Life 360 Tracker app and now have the driver you linked but not Life360 with States app. Do I need both the “Tracker” app and “with States” app, or just the latter?
Life360 with States - Pulls all the data into Hubitat from the phone app
Life360 Tracker - Uses the data in Life360 with States to do some cool stuff!
HE Life360 Connector should be at the least disabled, if not removed as it is not needed.
PS. Have you looked into Hubitat Package Manager? It’s only one ‘app’ (one file) to install and a lot of the Hubitat community developers use it which makes installing their packages easier.
@Josh Yeah just downloaded the “with states” and deleted the Hubitat Connector one. I can see that it’s now created the additional “Devices” for my wife and myself…watch this space, I’ll be back
Right - finally getting somewhere. I’ve got a map up and showing in the tile, the centre of which is where I’m located. I put an image on my google drive and set it so that anyone with the url could view it, but there is no avatar visible on the map at all. Are there specific dimensions needed for that avatar, or is there a way of just using a marker icon perhaps?
Edit: All sorted. I just had to search the web for how to modify the Google Drive shareable link to a direct download link for the jpeg.
PS. I pushed an update to James’ repository yesterday that swaps out Google Maps with OpenStreetMap so it’s easier to get started with this tile. The avatar URL is also optional now too.
It sounds like you got things working, so there’s no strong reason for you to update, but for anyone else, you can update by following these steps:
I made a few more tweaks to improve the look and feel with the OpenStreetMap version. There’s now an optional Map Source setting.
The setting can accept a few different types of values:
<empty>: Renders the default OpenStreetMap look:
bright: Modern bright colored map (CartoDB Voyager)
light: Light colored, neutral tone map (CartoDB Positron)
dark: Dark colored, neutral tone map (CartoDB Dark)
XYZ Basemap Format
There’s a number of different map providers out there like HERE, Stamen, Jawg, and more. Many of these require signing up for an API key and can then be used in this custom tile using the XYZ map format.
For example, here’s what the OpenStreetMap HOT source would look like
I’ve imported the new version and titled it “v2” so I could try both the Google and OpenStreetMaps to differentiate between the two versions when adding to a dashboard.
My thoughts are that the OpenStreetMap trumps the Google Maps version for several reasons:
1 - Easier setup without the need to setup the Google Cloud billing, API key etc.
2 - I’m finding it much snappier. With the Google version there’s a slight lag before the map loads when switching dashboards and another slight delay while the Avatar loads. It’s instant with OpenStreetMaps.
3 - The map is much cleaner - not covered with businesses names etc. Selecting one of the Map Source options is better still, as it removes the copyright banner from the bottom of the map.
4 - Zooming and scrolling to adjust the view in the tile is much more intuitive - single finger drag and simple zoom control.
As ever fantastic work and support from the SharpTools team. Many thanks.
Just a thought…Is there any way of modifying the zoom level/scale of the map when it first loads (without manually adjusting it)? The OpenStreetMaps version, when the tile first loads, covers roughly 100 square miles whereas the Google Maps one started much tighter. I was wondering whether there is anything in the code that would adjust that initial view - line 188 zoom 12? If I were to alter that figure and re import it would that achieve a tighter (street level) view? Thanks
Yes. When the map first loads, it’s zoomed out (zoom 5) to a roughly centered view of the US. It immediately tries to grab your location from Life 360 and then zooms in to 12 on that new point.
That first zoomed out view of the US is the variables around line 46-48 right after the <script> open tag.
The second zoomed in level is in the setMapCenter() method around line 184.
Edit: Also just wanted to note that you can open up your SharpTools Developer Tools → Custom Tiles and modify your existing tile. Once you’ve made the tweak, be sure to scroll down and press Update. Then you may need to refresh your dashboard to see the changes take effect.
Hi folks, we have create another Custom Tile - Life360 Live Map, which does the same thing but doesn’t need the Life360 device in SmartThings/Hubitat, and is much easier to setup. Take a look of the post below for more details.
By suggestion from @simon, I’ve updated this tile to take advantage of the new Access to Things in Custom Tiles feature so it can be used with any device in SharpTools which exposes a latitude and longitude attribute.
This new approach is much faster and efficient than the original Hubitat Maker API approach as it’s able to directly access the Thing information from SharpTools and can receive event-driven, real-time updates.
Existing Tiles
Please keep in mind that the new approach directly references a Thing and no longer uses the Hubitat Maker API. If you are using the original Hubitat Maker API approach extensively, please note that updating to the newest version will require that you reconfigure any existing instances.
As such, you have two options:
Update from Source
You would then need to reconfigure each of your tiles
Import another copy
You would have the original Hubitat Maker API version and the new version
You can update your existing tile using the following steps:
I am in the process of pulling the avatars from the iCloud setup in home assistant - not sure if it is possible yet. As an enhance suggestion it would be nice to have the additional option of typing a name and just displaying text for the marker?
How to Update Existing Imported Code