Life360 Live Map

Display the live location of friends or family from your Life360 circles! This custom tile retrieves real-time location positioning directly from Life360 and displays it on a beautiful map in your dashboard.

:man_technologist: 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. To learn more about SharpTool’s Custom Tile, please go to SharpTools Dos for more details.

image

How to Setup

Authorize Life360

  • Open https://smart-life-360.glitch.me/ in your web browser
  • Tap the Authorize button and sign in using your Life360 credential
  • When completed, tap the Copy Token button for use in the tile settings later.

image

Configure Custom Tile

These steps assume you’ve already imported the custom tile using the button toward the top of this post

  • Add the tile to your dashboard from Add Item → Other → Custom Tile
  • Tap the ... in the top-right corner of the newly added tile and select Edit
  • Paste the Life360 Access Token from the steps above.
  • If you have multiple members in your circle(s) and would like to specify a set of users, you can add their Life360 user emails in the *User Filter field and separate them by comma.

Optional Settings

  • Map Source - customize the map appearance with ‘bright’, ‘light’, or ‘dark’
    • See this post for screenshots and further details
  • User Filter - input the email addresses or ids of the Life360 users from your circles to filter the users to be displayed in the map.
    • The authorization page has a utility under Get Circles → View Members to confirm email addresses
  • Display User’s Name - check to display the user’s first name under the user’s avatar or pin image
  • Use Pin Icon - check to use the pin image to mark the user in the map, instead of using the user’s avatar image

Updates


  • 8/5/2021
    • Allow multiple users to be displayed in the map
      • User display behavior change: previously if no user email is specified, it displays the first member from the first circle. This version displays all members if no use filter is specified.
    • Removed custom avatar image link and use the avatar image from Life360 by default
    • Optional settings to display user name, and filter users to be displayed in the map
  • 8/6/2021
    • Changed the avatar images to be rounded
    • Bug fix: occasional filtered user not found error when having multiple circles

You can find the full set of instructions describing how to set up this tile in the project’s README:

3 Likes

(This is a placeholder post)

Just tried this and it works. I’m still missing possibility to show all circle members on same map view. Would it be possible to add option for multiple circle members?
and… options to choose how to scale map if there is more than one member in a map.

  • map scales to show all members on same map view no matter where they are
  • static map view (for example home) and members in that map area can be seen
1 Like

I think it’s possible to display multiple members in the same map but will have to play with the scale mechanism in OpenStreetMap.

1 Like

That would be awesome. Especially now when life360 removed possibility to view map and member locations via browser. Now that kids go back to school it would be nice to create a tile to dashboard and see where their school bus (hopefully kids in it) is going. :slight_smile:

2 Likes

Yeah. I was able to show multiple members. In the code you iterate through each member and call setMarker (and remove clearMarker). You do have to zoom out the map (from 12 to 11 or 10) depending on how far the members are together. Awesome code. Still tweaking it

2 Likes

Is it possible to use this as a geofence that will automatically activate or deactivate the smartthings alarm system?

This particular integration runs directly in your web browser (in your dashboard), so it can’t influence things that happen in SmartThings or in the Rule Engine.

Have you tried the native SmartThings ‘Member Location’ feature that you can use as a trigger (If) within the native SmartThings Automations from within their mobile app?

I haven’t personally tried it, but the community developed Life360 SmartThings integration by tmleafs might also be something to look into?

1 Like

What size Icon are you using for the image?

I believe we were using 48x48 pixel images (cropped to a circle).

When using the default pin, the bottom-center of the pin is positioned on your location. When you specify an ‘Avatar Image URL’, it centers the image on your location.

Pardon me asking but how exactly did you enable multiple members to show up in map?
I added token from my user credentials and I’m able to see myself in map. What do you add and to where you add other users and do they need their own tokens too?

@JiiPee & @Deba_Ohuoba Just a FYI that I am updating this custom tile to support multiple users. I got the POC working and the map will automatically zoom and center based on the users’ locations in the map. But I am working on a couple more things and cleaning up the code. I am expecting to post the updates soon. :grinning:

2 Likes

Oh wow! Cool! I’m ready to test whenever you are ready :smiley:

Just pushed the updates of multi-user support to GitHub. See the Updates in the top post for more details. For those who had imported this Custom Tile previously, you can go to Developer Tools page, select this custom tile, tap the gear icon in the IDE and select Update from Source to retrieve the updated code directly.

Please note that this update will display all the members from your Life360 circle(s) by default, and you can set Use Filter to display just the users you wanted in the map. (Previous version displays the first member from the first circle by default if the user is not specified in the tile settings.)

3 Likes

This is great. Wonderful job you have done. I’m now testing it and my kids are visiting their grandparents 200km away. Map shows nicely all members in a map. Kids will come home today so I have to check how it scales when everyone is inside same circle.

One thing that I’m noticing is user icon size. It’s probably too big because one user icon is covering other user icons in same circle. I’m writing this from my phone but if I remember right there was line in the code to resize icons. Need to check and see what it says when I get to my laptop again.

But like I said. Thank you for sharing these custom tiles and thank you for making changes to make these even better. You guys really have something cool going on here and I really love the way you handle these things. Have been using products that are so called competitors for the sharptools and none of them gets even near.

1 Like

Just pushed another minor update to round the avatar image(s).

@JiiPee, thanks for the kind words. See below for both members are at home and the avatar images are slightly overlapped but not completed covered because of the auto zoom-in.

This is cool. I kept the old code but used only the functionality to show people’s avatar in the map instead of the default markers (Thank you). @JiiPee you can resize by changing the value of “scale” in the getIcon function from .4 to something smaller. I used .2. The reason I kept the old code is because I’ve added logic to zoom to a member that is not considered at “Home”. I want to view closer at people that are leaving (including myself) instead of viewing everyone at once.

@Deba_Ohuoba & @JiiPee, I changed the avatar image implementation in the latest update I just pushed today, so you will have to update the styles in the getFeatureOverlay(), instead of adjusting the scale in the previous versions.

1 Like

Actually what I’m trying to tweak is how does the map look when it’s completely auto-zoomed in. My map looks almost same as yours but/and because all members are in same apartment there is basically just grey map screen and avatars in it. You can’t see apartments edges, home road or neighbor’s house. I think it would look way better if zoom would be more out so that your whole home shows in it and avatars are slightly smaller and also inside of an apartment.

My map looks like this at the moment:

Map looks boring :slight_smile: It’s just grey and avatars in it.

If it would look like this viewer would understand better where people are located. But at that zoom level that I manually changed from upper left corner, it puts avatar images too close to each other and they overlap too much.

EDIT: and yep there’s no apartment/house in that map. That sems to be openmap related thing but at least roads can be seen and that tells where people are at the moment.
Problem disappears when one of the persons is away from home. Map looks great then because it shows town names and stuff that tells more about location.

@JiiPee, you can change the maxZoom value from 20 to smaller value, like 15, in line 241 to prevent it from zooming in too much.

I’ve thought about this, but it is tricky to decide when to offset the avatar images to reduce the overlap without causing any misleading position(s). I tested this behavior on Lfe360 app, and their avatar images would overlap as well if the members are in the same location.:thinking: