A common misconception with mobile applications is that the truly powerful apps have to be downloaded and installed. However, the idea that installed applications are superior to web-based applications is simply not true. In fact, I am going to walk you through an example today that can capture your location directly from a web-browser, without the need for any custom client side application! In the end, this means that you can confidently roll out applications to any user, regardless of their mobile device’s operating system without any worry of incomptability!
The majority of modern web browsers now provide support for HTML5 Geolocation. HTML5 Geolocation provides a way to incorporate a user’s current location into PC and mobile web applications. In this example, users are able to upload a photo along with some information about where they are currently located. The web application, using HTML5 geolocation, tags the post with the user’s geographic coordinates. The application then plots the user’s location on a map along with all other user posts that have been made.
Note: For demonstration purposes, I have left the latitude and longitude lines visible, but this is not required.
That is all there is to it. As user’s log their locations, the data can be used in a number of ways. In this example, I chose to plot the coordinates on a map using the google maps API. You can see in the screen shot below that several users from around the world have uploaded their current locations:
Incorporating HTML5 geolocation into your web applications is easy and a great way to take advantage of the GPS/location technology available on mobile devices. With HTML5 geolocation, there is no need to spend time programming native mobile applications. Anyone with the most basic knowledge of web technologies can build powerful, geo-centric web applications with m-power today!
Note: As browser security requirements evolve, this functionality may become limited in certain browsers. For example, Google Chrome now requires a secured origin (https) to use this function.