This is one of several sample tiles that were built as part of the Custom Tiles release and is not intended to be a fully polished tile. Please feel free to learn from it, copy from it, or play with it.
Setup
Note that the concepts in this example custom tile could also apply to any other service which exposes geolocation coordinates, so if you’re a developer and are interested in mapping something else, feel free to use this as a starting point!
You can find the full set of instructions describing how to set up this tile in the project’s README:
Discussion History
Historically, this tile was originally written specifically to interface with the Hubitat Maker API. With the introduction of Access to Things in Custom Tiles, this tile was rewritten such that it works with any device you have in SharpTools that has latitude and longitude attributes.
As such, you might find that much of the early discussion in this thread is specifically related to Hubitat and the old API approach.
Alternatives
We also have a Custom Tile that directly communicates with Life 360, but Life 360 has been shutting down many of the APIs that community apps and drivers used for integration, so it may not work anymore:
Hi @Dustin_bragg, this specific demo uses Hubitat’s Maker API to access the latitude and longitude data from Life360. However, the latitude and longitude are not exposed in their SmartThings integration.
That being said, this concept still applies if you have a device reporting latitude and longitude, and you should be able to retrieve the geo data via SmartThings API & personal token, and then pin it on the map.
Hey James, thanks for posting this…think I’ll like it. I got all the settings in but think my Life 360 device ID is wrong. Where do I find this info? Tried to read more but all I can find is how to send invitation/add new member. Not sure exactly what information this tile setting is looking for?
Thanks again!
Hi @todd3, You can find the device id in the device page. Go to User Page → tap ... next to our Hubitat location under the “Authorized Locations” section → tap your Life360 device. At the Life360 device page, toggle the Advanced button at top-right, and you can find the device id as shown in the screenshot.
Is there a way to show for example 4 persons in a map view by adjusting code? It would be nice to add map tile to show where all family members are at the moment.
Ok…well tried this one just to test how it works. It says “device ID is not set”. I noticed that @todd3 asked same but I do not understand answer. Where do I have to add device ID. Read me file does not say anything about it. Also what should be written in avatar line. Is full line: https://drive.google.com/uc?export=download&id
@JiiPee, sorry for the confusion, I’ve updated the README, and you can follow the instructions in this post to get your Life360 device id.
It only showed part of the URL for my avatar image. This URL is used to link to your avatar/profile image, and the image must be public accessible. So depending on where your image is hosted, your link will be different than mine. (I uploaded mine to Google Photo, made it public accessible, and the link I used is the link to download the file directly.)
Also if I understand instructions right device ID has to be added to hubitat key url and also to that deviceID string which was created in custom tile. Right?
Ok, did not add ID to key url so that part is correct now.
So here we go…I had enabled:
Geocoding API
Geolocation API
Maps Embed API
Maps Static API
and only thing that is needed is:
Maps JavaScript API
…and now it works. Did I get it right that I just need JavaScript API and can disable those other 4 APIs?
EDIT: disabled all other APis and it is still working.
You did notice that avatar image is showing just a tiny part. Did you had any idea what and where to look to fix this?
Thanks, that explains. One more thing. Is there a possibility in SharpTools to open custom tile from hyperlink? My dashboard includes tiles to show location info of family members. It would be cool to open life360 map view (this custom tile) when Action (tap) is done.
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?
IMPORTANT: In order to use this, you must have a device which reports a
This is one of several sample tiles that were built as part of the Custom Tiles release and is not intended to be a fully polished tile. Please feel free to learn from it, copy from it, or play with it.
Geolocation Map Custom Tile - README - GitHub
Life360 Live Map - Custom Tile 
