How to create Dashboard Tile with Google Map that shows a device location

gomce62.web · June 2, 2022, 4:02am

Does anyone know if someone has already created an App/Driver that can take the latitude and longitude attributes from some other HE device and then show a pin drop on a google map that can be displayed as a tile on a dashboard. For example the Tesla Connect app is able to return the lat/log of where is my car lets say Tesla HQ. If I could then take those attributes and pass to another app/driver that could produce a google map attribute to load a tile is what I woudl like to accomplish. What is on this page is the end result I would like to see as a Dashboard tile

http://maps.google.com/maps?q=37.4924685,-121.9468857&spn=0.004250,0.011579&t=h&iwloc=A&hl=en

sburke781 · June 2, 2022, 9:36am

To bring this back to the original conversation from the iFrame Advanced thread, it would be very easy to add a custom command to that driver to allow the setting of the url preference setting, which you could call from within an RM rule.

I know I suggested you setup a separate thread, which I still agree with, but it may be a simple thing for @mbarone to all to the iFrame driver...?

Getting more into the developer side of things...

Perhaps in addition to updates for the iFrame Advanced driver, it may also be an interesting project (for someone else ) to create a driver / app to cover the broader feature of device tracking. I'm thinking you could have an app that could cater for a number of devices being tracked, with parent HE devices for each, with component devices to cover tracking plus visualising these including using Google Maps, or potentially other display options.

gomce62.web · June 2, 2022, 4:13pm

The challenge with the iFrame driver pulling a Google Maps is you have to first query Google Maps to get the specific iFrame URL

That is easy for a static location but in this case my goal is to have a dynamic map that puts a pin drop based on the lat/log of attribute from another driver. I know I can create a rule to populate one driver based on attributes from another driver the question is how to query Google to get the iframe URL. I'm guessing there is probably a way to obtain all this using the Google Maps API but before I try and code all that I wanted to see if someone in the community has already done this.

gomce62.web · June 19, 2022, 5:46pm

Leveraging @mbarone iframe driver code I created a new version of the driver dedicated to displaying Google Maps based on latitude and longitude attributes. With this driver I was able to create a Hubitat Rule that triggers anytime the latitude or longitude attributes changes for my Tesla driver and then updates this new Google Maps Iframe driver with the current map location where my car is located. I'm also using this for other devices I have in HE that also contain Lat/Lon attributes to display map locations for those devices.

I've been attempting to create a Google Maps ifame advanced driver version based on @mbarone Iframe Advance code but as I'm new to Groovy Programming I stuck figuring out how to pass the values obtained from the commands into the "launcher" section of the code that are currently reading the values from the parameters section. If someone can point me to an example how to pass command values will be much appreciated.

Anyway, the code for the Google Maps iFrame driver is available at:

github.com

gomce62/Hubitat/blob/Drivers/Google_Map_iFrame.groovy

/**
 *  dashboard Google Map iFrame
 *
 *
 *  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 *  in compliance with the License. You may obtain a copy of the License at:
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
 *  on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License
 *  for the specific language governing permissions and limitations under the License.
 *
 *  Special thanks goes to mbarone who created the original iFrame driver that the majority of this driver code as leveraged. 
 *  The original iframe code this driver is based on is available at https://raw.githubusercontent.com/michaelbarone/hubitat/master/drivers/iFrame.groovy
 *  
 *  This main purpose of this driver is to be able to create Hubitat rules that read the Latitude and Longitude attributes from other drivers and load into this driver so that
 *  a Google Map can be displayed where the device is located.
 *
 *

This file has been truncated. show original

kahn-hubitat · June 19, 2022, 7:30pm

thanks also now integrating this to my husqvarna mower dashboard.. any way to change the iframe options or css to show it in satellite mode?

gomce62.web · June 20, 2022, 12:42am

Great idea, I've updated driver to now included a parameter to define the type of map you want to be displayed in the tile.

kahn-hubitat · June 20, 2022, 2:12am

i've also made some changes if you want to take a look. and combine.. i added some functions so you can set the attributes with rules without needed extra variables. and then a fx to update the frame.. there were also some changes to the html as it wasnt honoring the zoom level and the language was in spanish instead of english

zoom level should proabably be an option as well.

here is my current version.. thanks for this..

github.com

lgkahn/hubitat/blob/master/googleiframe.groovy

/**
 *  dashboard Google Map iFrame
 *
 *
 *  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 *  in compliance with the License. You may obtain a copy of the License at:
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
 *  on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License
 *  for the specific language governing permissions and limitations under the License.
 *
 *  Special thanks goes to mbarone who created the original iFrame driver that the majority of this driver code as leveraged. 
 *  The original iframe code this driver is based on is available at https://raw.githubusercontent.com/michaelbarone/hubitat/master/drivers/iFrame.groovy
 *  
 *  This main purpose of this driver is to be able to create Hubitat rules that read the Latitude and Longitude attributes from other drivers and load into this driver so that
 *  a Google Map can be displayed where the device is located.
 *
 *

This file has been truncated. show original

gomce62.web · June 20, 2022, 4:39am

Thanks this is very helpful as I'm learning how to code with Groovy.

I will combine your code with mine and publish on Monday including adding Zoom Level as a parameter

Baz2473 · June 20, 2022, 8:59am

You could improve the map type selection with an enum.

Eg.

input "mapType", "enum", title: "Select your desired map type", options: ["h":"Hybrid","k":"Satellite","n":"Normal"], defaultValue: "h"

gomce62.web · June 21, 2022, 5:03am

New version of the driver has been posted to GitHub that contains code contributions from @kahn-hubitat and @Baz2473 along with a new Parameter to set the Zoom level of Map.

gomce62.web · June 21, 2022, 5:37am

@kahn-hubitat Can you please provide a screen shot of your action parameter types? Using your version of the driver using the %value% for the parameter is not pulling the value of the attribute using the 5.1 rule engine e.g.

Baz2473 · June 21, 2022, 7:53am

Regarding the zoom level. if you include range: "1..21", this will prevent anyone from putting an out of range number in the input field.

eg

input "MapZoomLevel", "number", range: "1..21", title: "Enter a value between 1-21 (default is 14) to set Zoom Level for Google Maps", defaultValue:14

kahn-hubitat · June 21, 2022, 10:37am

Need to fill in %value% then turn on variable parameter value toggle.

sburke781 · June 21, 2022, 10:42am

Great work btw guys.... Great to see this feature and dev's working well together...

gomce62.web · June 21, 2022, 3:35pm

Thanks, I've added the range to the code and posted to Github

gomce62.web · June 21, 2022, 3:38pm

@kahn-hubitat you lost me on this one. Can you please provide screen shots how to get %value% to work or point me to where I can read how to do it. Thanks!

kahn-hubitat · June 21, 2022, 3:53pm

Everything is.fine in your screen shots above...
Just make sure to turn on the toggle circled in red
In this screen shot.

Also the rule.will not work via testing
It needs an actual value to come in through
The trigger. That.is why it shows zero

gomce62.web · June 22, 2022, 12:48am

Thanks the trigger was the issue. As soon as I moved my car and the attribute changed the rule updated. Maybe someday the HE documentation will cover all this.

amithalp · September 5, 2022, 11:19am

Hi @gomce62.web
Is it possible to present multiple locations on the same map?
The request is to use this driver with the Life 360 integration (that expose the latitude and longitude for each member into a dedicated device) and see all my family members on the same map.
Thanks,

gomce62.web · September 8, 2022, 7:59pm

This would require a lot of custom coding of the driver to pass all the required attributes to Google Maps to display multiple waypoints. The current version just accepts one waypoint.

As your goal is to use Life360 I recommend you check out this thread https://community.hubitat.com/t/maps-to-show-location-of-users/74162

Good luck