The adoption of HTML5 and its surrounding cast of powerful new features is going to be a huge boon to web users and points towards a very positive direction for the future of the web. From the smoother interfaces of canvas, local storage enabling offline modes for online email programs and the like seamlessly, online video free of dependencies like Flash, web sockets making the real time web a breeze without all the current AJAX workarounds, and so much more but I’ll save all of those for future posts….
Today I wanted to finish up and release an experiment using the HTML5 Geolocation feature (sticklers, click here), a feature allowing your web browser (with your permission of course) to share your location, enabling any current website to tailor itself right to where you are… a powerful feature for todays increasingly mobile web user.
Why is This Important?
Today this level of convenience, all the applications you use every day seamlessly knowing where you are, is unheard of for the user as well as the web developer outside of proprietary built “apps” on iPhone or Android you need to seek out and download. But little do most people know those web browsers in their pockets on those same devices can do this today, opening the playing field of a personal local experience up to the entire web… no downloads, no waiting, no device lock-in.
The Experiment
My experiment started with a simple need, in the summer I drive a Jeep to work with a soft top and I prefer to have it down as much as possible, I mean sun in Minnesota only happens for a short stint i need to suck it up. What I needed was a simple view of the current temperature, maybe a radar map to look for any rain on the map coming my direction, not a huge list. In the early summer I quickly built a one page HTML and JavaScript mashup using jQuery, HTML5 (or Google Gears as a fallback) and the Weather Underground API to build a web page that did just that, polished it up a bit (let’s call it a working prototype as of today) and hosted it on Google App Engine purely for worry free scalability to show it to you all.
Initially on load my experiment “Weather GEO” asks if I want to share my location, of course I select yes, this allows my browser to pull a location from my GPS, Wifi or internet address depending on what the device sees fit.
It passes that longitude and latitude back to my page’s JavaScript I in turn query Weather Underground for the next two forecast elements and a radar map for that longitude and latitude and display them as soon as they come back…
Pretty slick… solves a problem in a simple way, just one click from a browser bookmark, no custom proprietary “app” code to build and it will work in every browser when HTML5 is fully adopted, but currently works in the major mobile browsers, Android and iPhone, in FireFox 3.5+ and any browser that has Google Gears on the PC, Mac and Linux… thats more than enough for me.
A great example of where the web is going and how progress on open standards like this benefit everyone, give my little experiment a try here http://bctx.info/wx. Let me know how it works for you, if your device is passing your proper location and what you think in the comments. Currently I am seeing the Droid have a problem with the code and have posted to the Android Developers Google Group.
* Ok, technically Geolocation is part of the W3C Geolocation Working Group, not HTML5 but it will largely be implemented with HTML5 so it really has become part and parcel of the browser based future.
Related posts:
Pingback: e-Strategy Internet Marketing Blog
Great tool! It works fine with my G1′s dflt browser (“Mobile Safari / 525.20.1″).
Would you know how I can, from a Perl cgi-bin script running under Apache on my home Fedora server, upload that same info – i.e. the geolocation – from the browser on my G1 to my home Apache server?
I was hoping one of the $ENV vars, such as HTTP_USER_AGENT, would contain the Lat/Long values, but I don’t see it anywhere.
Thanks!
This works great on my Droid as long as wifi is enabled for location sensing. It doesn’t work if wifi is off and I’m just using gps. Can this be done with just the gps?
Jim,
Yes, infact I never use WiFi and it works great on MyTouch, Droid and Nexus. Check your GPS and privacy settings you may not be sharing your location? Just guessing but as long as your phone is sharing location this works well.
-Ben
In recent years, video and audio on the web has become increasingly viable.The long wait is finally over,,through this amazing HTML 5.Final version of HTML 5 finally comes out approximately in a couple of years it will be an exciting time for web designers indeed.
Great work! It works for Chrome 5.0.356.2 beta, which supports HTML5 Geolocation if you start it with the –enable-geolocation option.
I have a question for you. You said you saw a problem on the Droid, and posted a question in the Android Dev Group. Can you point me to your question, or to any details you have on the problem and its cause? If you could shoot me a quick email, it would be much appreciated. Thanks!
Hey Ben, I was searching for such an easy implementation of this! :)
Is it ok to fork the code if I attribute you as original author? It would be incredibly helpful for an open-source university project with a friend.
Very Valuable information to Designers. Thanks sharing info..
Pingback: cross-platform locative media « the textopia blog
Hi Ben,
What a great article. You have given me hope that I can implement my project without having to build a multi-platform mobile app.
Best Wishes from Canada . . .
Hey Ben, thanks again for providing this great piece of code.
Unfortunately you didn’t answer on if we could fork the code, so we just did and implemented it in a slightly modified way. It helped us a lot getting the application going on my G1 (still stuck with Android 1.6).
We gave you a big thanks on the info page and attributed you in the source – I guess that’s in your interest. :)
This feature is very sweet, I made a quick location for my children to use, it shows all their friends houses. number 1 use, It lets me track where my kids are! Try it out and see my code here http://pushtosuccess.com/?cat=6
Nice dude very valuabe i have got from this blog.
Great article. I’m a huge fan of geolocation based applications. I’ve implemented the same methodology as the mobile apps you demonstrate with Google Maps and IP based geocoding. It will most definitely have a mobile app as well… hopefully soon!