The Support Group Blog

Geolocation with FileMaker Go

UPDATE 4:

Geolocation is now natively supported in FileMaker Go 12 with the new mobile functions Location()and LocationValues().  Yay! For FileMaker Go 11, read on…

Elizabeth in San Francisco is one of many to ask this interesting FileMaker Go question:

Is there any way to get the latitude and longitude of the phone in FileMaker Go and store them in a database?

My first reaction was “unfortunately, no.”  FileMaker Go can’t access the GPS features of the iPhone, and since we can’t use plug-ins with Go, there’s no opportunity to add that feature.  But never say never, right?

After a few more moments thought, the answer appeared: FileMaker can’t access the GPS… but Mobile Safari can… and FileMaker has the web viewer.  Ah, the web viewer—FileMaker’s Swiss Army knife—how we love you!

Here’s our solution, requiring one web viewer, one script (plus a few more for fun), and just a few fields.


UPDATE 3:

The following HTML code has worked the best:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

function handler(location) {
var messageArea = document.getElementById("messageArea");
messageArea.innerHTML="<p>Latitude: " + location.coords.latitude + "</p>";
messageArea.innerHTML+="<p>Longitude: " + location.coords.longitude + "</p>";
messageArea.innerHTML+="<p>Accuracy: " + location.coords.accuracy + "</p>";
}

function fail() {
var messageArea = document.getElementById("messageArea");
messageArea.innerHTML="<p>Can't get located</p>"
}

function getLocation() {
navigator.geolocation.watchPosition(handler,fail,{maximumAge: 5000, enableHighAccuracy: true, timeout: 30000});
}

</script>
</head>

<body onload="getLocation();">
<div id="messageArea">
Location unknown
</div>
</body>

</html>


UPDATE 2:

FileMaker Go 1.2.2 has been released, fixing the bug with

GetLayoutObjectAttribute ( “web” ; “content” )

.  Everything should be working again.


UPDATE:

Currently, this has been broken by FileMaker Go 1.2.1.  There’s a bug when using theGetLayoutObjectAttribute function to get a web viewer’s content when the web viewer uses a data URI. Although the web viewer will display the correct result,

GetLayoutObjectAttribute ( “web” ; “content” )

always returns

&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;

, even when the HTML contains neither an html, head, or body element. FileMaker is aware of the issue, and I hope we see a fix soon.

 

I created a simple webpage that uses the HTML5 geolocation features used in Safari.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

function handler(location) {
var message = document.getElementById("messageArea");
messageArea.innerHTML="<p>Latitude: " + location.coords.latitude + "</p>";
messageArea.innerHTML+="<p>Longitude: " + location.coords.longitude + "</p>";
messageArea.innerHTML+="<p>Accuracy: " + location.coords.accuracy + "</p>";
}

function getLocation() {
navigator.geolocation.getCurrentPosition(handler);
}

</script>
</head>

<body onload="getLocation();">
<div id="messageArea">
Location unknown
</div>
</body>

</html>

With a browser that supports HTML5 geolocation services, when the location is detected the the result of that page should something like:

Latitude: 42.3028843
Longitude: -71.3770951
Accuracy: 30

with the source code now appearing as:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

function handler(location) {
var message = document.getElementById("messageArea");
messageArea.innerHTML="<p>Latitude: " + location.coords.latitude + "</p>";
messageArea.innerHTML+="<p>Longitude: " + location.coords.longitude + "</p>";
messageArea.innerHTML+="<p>Accuracy: " + location.coords.accuracy + "</p>";
}

function getLocation() {
navigator.geolocation.getCurrentPosition(handler);
}

</script>
</head>

<body onload="getLocation();">
<div id="messageArea"><p>Latitude: 42.3028843</p><p>Longitude: -71.3770951</p><p>Accuracy: 30</p></div>
</body>

</html>

Notice the change following

&lt;div id=“messageArea”&gt;

Depending on what browser you use to test this, viewing the source may or may not show you the alteration in the messageArea div.  With Safari, use the Web Inspector’s Elements tab, rather than View Source; with Firefox and the Web Developer extension, use the View Generated Source option in the toolbar.


UPDATE:

It appears from the comments that the web viewer behaves just a tad differently with iOS 3.2 for iPad than with iOS 4 for iPhones and iPod touches, as far as we can see.  I made a small change to the HTML page to force the geolocation JavaScript to run with an onload event, and it now works on both my iPhone and iPad.

Next, we place that same webpage source code in a FileMaker global text field.  We create a web viewer with the object name “web” and specify a calculated URL:

"data:text/html," &
geolocation::code

Using a URL that starts with

data:text/html,

tells FileMaker to treat the following text as an HTML page.  Essentially, it allows us to render a page from source code without needing a server and an HTTP request.

Our script resets the web viewer, waits a small amount of time to make sure the page has had time to render, and then checks the results with the formula

GetLayoutObjectAttribute ( “web” ; “content” )

.  If we have a result that contains

&lt;div id=“messageArea”&gt;&lt;p&gt;Latitude

and bingo!

Now it’s just a simple matter to use FileMaker’s text functions to parse out the latitude and longitude.  We’ll need to do a little extra work to handle Apple’s data detectors—Mobile Safari sees the latitude and longitude numbers as possible phone numbers, and places

&lt;a href=“tel:...”&gt;

tags around them (UPDATE: We’ve updated the sample file to account for Mobile Safari not always detecting latitudes and longitudes as possible telephone numbers; our script sometimes gave us double negatives).  Once we have the latitude and longitude stored, an additional simple script can open a map to show us our location:

Open URL [No Dialog; "http://maps.google.com/maps?q=" &amp; geolocation::latitude&amp; ",+" &amp; geolocation::longitude]
Download Sample File
Share this entry
0 replies
BrowseMode

Sign up to receive news and information about the FileMaker platform and other custom app development tools.

Keep me posted

Most Popular

Developer Resources

News, Tips & Tricks and Demos

Archives