Life360 Live Map

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:

Editing zoom level did it. Now it looks nice. I also red other topic about map layers on this community and found different maps. I just quickly checked them and there was couple layers with buildings. I have to test those later.

You are absolutely right what you said about overlap issue. Even life360 does it same way. All avatars are overlapping and usually just one shows at the time if they are is same circle. Maybe it’s just how it is supposed to be and I can live with that. :blush:

2 Likes

Today got this and …well… there’s no circles and anyone on the map…

EDIT: and 1minute later everything works again…
EDIT: and 1hour later problem is there again. At the moment Life360 application shows circles normally.

From the error message, it seems it had a problem to query the Life360 circles for some reason. :thinking: Is this the first time you see this error? Is this issue still occurring?

I think there was something going on in Life360. I haven’t seen that error in last two hours so problem probably solved from the service side. I also noticed that circle loaded sometimes very slowly even in mobile app.

Filtering wasn’t working for me for a while but I found that it always gave me an error for the first email address I added. I just added my email address twice and then added the rest of the family and the problem went away.

1 Like

Totally cool, but I’m getting some weird results where I show up in Nebraska when I should be in Colorado. I’ve noticed that if I change the tile size I might be in the right spot, but then I also noticed if I toggle between circle to pin my location will change too. I’m trying to isolate the cause. Anyone else run into this?

@Nicholas_Joseph, when the tile is loaded, it just uses the default geolocation (Nebraska), but should quickly center to your location based on the geolocation reported from the Live360. Do you mean it stays at Nebraska and not changed until you resize the tile or change the Pin option?

P.s. If you want to change the default geolocation, you can modify Line 48 to somewhere else.

var defaultLongitude = -95.9543282,  defaultLatitude = 41.8644394,  defaultZoom = 5;

That’s only used for the initial ‘zoom’ though, right? The map pins are only added when member position data is reported?

Initially it looked like it was staying in Nebraska…but it was just me. The rest of my family was where they were supposed to be every time, no matter what. I noticed that sometimes when I changed the size of the tile or toggled between circle and pin my location would move, but that may have just been it updating as you suggested.

I checked this morning and everyone is accurate on the map. Thanks for responding so quickly. This is an amazing group.