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.
So to Force.com. All I did was:
- Create a Static Resource called modernizr, mapping to the file.
Here’s the code for my controller. It’s pitifully simple:
Two properties, and a method that will be called when we have the values.
Now here’s the Visualforce 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.
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.