How To Add HTML5 Geolocation To Your Web App?

HTML5 geolocation API

First of all we need to connect navigator.geolocation module to use all methods described below.

Method getCurrentPosition()

This method is used to define the current location of a user. There are three arguments we need to pass to the method. The first one is a function where the method will save geo tag, the second one is an error-handling function. Due to security reasons we can’t start defining a user’s location without their approval. If the user denies the request we can use their IP, but maximum information we can get this way is their country or city in best case. Not very accurate way. The third argument can be PositionOptions but we will talk later about this.

First of all in the example we checked whether the browser supports html5 geolocation. If it does then the method requests current location otherwise it logs an error “Geolocation API is not supported”. If you need to use geolocation in browsers which don’t support this API you can check geolocation javascript library provided by Google.

WatchPosition()

What if we need to track user’s movement? It is considered bad manners to run getCurrentPosition continuously, the best way is to use watchPosition() instead. This method can automatically track changes of position and run relevant callback function received in parameter (along with PositonOptions).

PositionOptions

We mentioned third optional parameter PositionOption, now let’s explore it. PositionOptions has three optional properties some of them are predefined.

• enableHighAccuracy – if set to “true” this property allows to locate user more accurately but it requires more time and battery power of device. “False” by default.
• timeout – number of milliseconds the application waits for getting user’s location until shows the exception error. Counting starts right after user approval of the geolocation request. No default value.
• maximumAge – caching time in milliseconds, default 0. This parameter allows application to keep last geolocation data for defined number of milliseconds and use it as current position. As the geolocation is an energy consuming procedure the last geolocation request result is cached and will be immediately returned if within the caching period.

How to add geolocation to website.

It’s time to implement all abovementioned in some example. As promised we will create custom web app with html5 geolocation to calculate the shortest route between your current location and predefined point. It’s better if we will also handle and show exceptions to be aware of errors.

Web page layout

To build our web app with integrated geolocation functionality we need to choose a tool for showing the map and geotags, calculate and draw the route. We will use Google Maps as this is one of the best services with necessary functions, API, manuals and examples for developers.

Below there is a layout for simple webpage with Google Map.

Notice: the purpose of this article is not to describe Google Maps API, you can find all necessary information and manuals on its web page.

Locating and displaying the position

First let’s display our office location (the predefined destination point) using google.maps.marker.

Now it’s time to request and show the user’s location. To implement the ​html5 geolocation api it’s not necessary to link any external additional libraries, we will just use method get CurrentPosition passing relevant callback to it.

Calculating the route.

Having displayed both points on the map we can map a route between them. For calculating the route we will use google.maps.DirectionService and google.maps.DirectionsRender for drawing.

The final html5 geolocation example you can see here.

Conclusion

Now we know how to add html5 geolocation to web app. HTML5 geolocation service is a simple but convenient way to get user geolocation data by using unified approach while ensuring user privacy.