Several of my colleagues were discussing HTML 5, and one of them pointed me to this great online book: Dive into HTML 5.  After some reading, I thought I’d try my hand at using the HTML 5 geolocation API in Visualforce.  

Turns out it was rather simple – check out my page here (assuming I haven’t hit any limits).  The image to the right shows it running on my iPhone. 

Implementing

So one problem with HTML 5 is that it’s not quite a baked standard yet.  If you’re visiting my page, I don’t know whether you’re using a dated and creaky browser, or a shiny and new browser.  I used a great little JavaScript library – Modernizr – to help me out there. 
 

So to Force.com.  All I did was:
  • Download Modernizr (a single JavaScript file)
  • Create a Static Resource called modernizr, mapping to the file. 
  • Create a simple Visualforce page and controller (below) – which shows a simple button and two outputfields.  When the button is pushed, it called Modernizr, calls the geolocation API (if you have one), and invokes a JavaScript function which then sends the values to the controller, which then also rerenders the form values (using AJAX) so that you can see your coords.   

The Controller

Here’s the code for my controller.  It’s pitifully simple:
public class locController {
public String valueLong { get; set; }
public String valueLat { get; set; }
public PageReference iFoundYou() {
// Do something interesting with the values - like persisting them to a database
return null;
}
}
 
Two properties, and a method that will be called when we have the values.  

The View

Now here’s the Visualforce page:

<apex:page sidebar="false" showHeader="false" controller="locController">
<apex:includeScript value="{!$Resource.modernizr}"/>
<script>
function doTheGeoThang() {
if (Modernizr.geolocation){
navigator.geolocation.getCurrentPosition(
function(position) {
findMe(position.coords.latitude,position.coords.longitude);
}
);
} else {
alert ("Your browser isn't hit. Upgrade man!");
}
}
</script>
<h3>HTML 5's Geolocation API</h3>
<apex:form >
<span
onclick="doTheGeoThang()">Click Me - let me find you!</span>
<br/><br/>
<apex:actionFunction name="findMe" action="{!iFoundYou}" rerender="jsvalues">
<apex:param name="lat" value="" assignTo="{!valueLat}"/>
<apex:param name="long" value="" assignTo="{!valueLong}" />
</apex:actionFunction>
<apex:outputPanel id="jsvalues">
<apex:outputText value="Value lat: {!valueLat}" /><br/>
<apex:outputText value="Value long: {!valueLong}" /><br />
</apex:outputPanel>
</apex:form>
</apex:page>

A brief description:
  • The includeScript includes the static resource (the Modernizr library) 
  • The doTheGeoThang() function checks that you’re hip, and then calls findMe() with your location if you are
  • findMe() is created using the actionFunction Visualforce component (see this blog post).  When it’s called, it invoked the iFoundYou() method in our controller, and rerenders the outputPanel containing the longitude and latitude. 

  

Thoughts

That’s it really. You can imagine using this in your own forms or other apps on Force.com.  What’s really cool is that the same page works on my iPad and iPhone too.   No matter which platform you use, your browser will ask you for permission to provide your location.

HTML 5 is full of other great features – like support for placeholder text, autofocus and ‘typed’ fields (like an email field), and web storage for offline support.  I’d really like to see how far one could push the web storage and Force.com.

 

Get the latest Salesforce Developer blog posts and podcast episodes via Slack or RSS.

Add to Slack Subscribe to RSS