Hi , I'm trying to use getlocation from device. I have used the following JS Code which runs which success. I want it to populate and textbox with the location but I'm struggling with how to do this (Newbie!) I thought or hoped that it was as simple as setting the text value as {{device_location.data.Latitude}} but I'm wrong ! Any suggestions ?
+++++++++++ JS Code (already using google maps API elsewhere ) ++++++++
var x=document.getElementById("log");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById("longitude").value = longitude;
document.getElementById("latitude").value = latitude;
Could you send some screenshots of your setup? Specifically, the left panel of your app expanded out to show the JS query data as much as possible? It'd also be helpful for me to see your google maps query in the left panel.
The way that you are referencing the value seems correct to me, but judging from your screenshot, it looks like the query was not run yet, or otherwise has not returned a value, as device_location.data is showing null as its value. You may want to se the query to run on page load in the "advanced" tab of the query editor.
I also wanted to point out that we actually have a utility function for getting the current location, so you don't need to mess around with navigator functions nor a virtual canvas. the function is called utils.getCurrentPosition, and will return an object with coordinates, a timestamp, speed, altitude, accuracy and heading (when available).
Here is a simple example of using this util function to display current latitude and longitude in a text component:
Hi Mark,
I have a use case where I want to track the user long/lat in my retool mobile app. I saw the solution you suggested but I cannot seem to replicate it in my app. When I setup the JS query it executes, but it is not returning any results and not showing an error either. When I link a button to the query using an event handler, the value box (similar to yours) for the text field shows "Cannot read properties of null (reading 'coords')".
Let me know if there is a step I am missing here. I am new to ReTool and JS is new to me as well (I am a data analyst by trade).
Thanks.
Birgit
@victoria thank you so much. I feel so silly that I missed this. It works now. Quick question, does this actually use the google maps api or another method? because I just setup the google api as a resource but not sure if it's actually needed for this function?
@victoria , may I ask one more question. I am trying to capture the long/lat when a button is clicked and then update the database table. I was able to capture both values in two number fields in screen, however when I try running the update for lat, it shows the data value blank in my table. Is there anything that looks off here? I made the fields numeric with 7 decimals in the source table. The fields showing the values are "number fields".
