Hubitat Map Tile (Life360 or Latitude/Longitude)

You’ll want both the ‘Life360 with States’ and ‘Life360 Tracker’. Here’s the description from the Life360 with States release thread:

Differences in Apps…

  • Life360 (phone app) - https://www.life360.com/
  • 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! :wink:

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 :slight_smile:

2 Likes

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.

2 Likes

Thanks for sharing the fix!

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. :slight_smile:

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:

1 Like

I made a few more tweaks to improve the look and feel with the OpenStreetMap version. There’s now an optional Map Source setting.

image

The setting can accept a few different types of values:

  1. <empty>: Renders the default OpenStreetMap look:
    OSM Default

  2. bright: Modern bright colored map (CartoDB Voyager)
    image

  3. light: Light colored, neutral tone map (CartoDB Positron)
    image

  4. dark: Dark colored, neutral tone map (CartoDB Dark)
    image

  5. 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

    https://{a-c}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png
    

    image

    image

2 Likes

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.

2 Likes

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.

    image

  • The second zoomed in level is in the setMapCenter() method around line 184.

    image

Edit: Also just wanted to note that you can open up your SharpTools Developer Tools → Custom Tiles and modify your existing tile. :slight_smile: 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.

1 Like

Cool I’ll have a play with the one on line 184 until I get the scale I’m looking for. Thanks again.

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.

2 Likes