Today an increasing number of applications use users’ geolocation data. These include navigators and maps, taxi and weather-forecast services, various rental and booking services like Uber or Airbnb, even messengers – all of them are using geolocation to provide more convenient, friendly and fast services. Running a weather forecast app, the user most probably wants to get information about weather in his current location rather than somewhere in Madison, Wisconsin, USA (apologies if you are reading this article from there). Geolocation saves time in such cases by detecting the current location automatically without any additional user input or scrolling long lists in an effort to find necessary city.
In this article I will describe how to add geolocation to website so then you can easily implement it. As an example we are going to create small web app which will be able to calculate the shortest route between detected user’s location (point A) and predefined destination (point B) using Google Maps API. Let’s take our company office address as point B for this example (welcome for a cup of coffee).
In an age of gadgets when many of them have GSM/WIFI/GPS modules it became important and necessary to design kind of secure interface which allows web application to define user location on client’s side. The W3C created Geolocation Working Group for this task and the solution was found! This is html5 geolocation service which is supported by all modern web browsers (even IE!)
|IE||Edge||Firefox||Safari||Chrome||Opera||Safari iOS||Android Browser|
First of all we need to connect navigator.geolocation module to use all methods described below.
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.
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
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.
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.
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.
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.
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.
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.
One of our recent projects includes the functionality of an inline code editor. This code editor needed to be highly extensible and have custom features. To address this, we chose Codemirror v6 due to its peculiar architecture - it is highly customizable, and all the additional features are provided into codemirror engine as Extension objects.
There was a task to submit form with ajax, with server side validation of course. Obvious solution is to do validation and return json with erros. I didn't like idea of writing separate view for validation and then inserting errors in form html on client side. Especially since I already had a generic template for django form with errors display. In this article I'll describe how I solved the task.
It appears that not everyone knows that in python you can create classes dynamically without metaclasses. I'll show an example of how to do it.So we've learned how to use custom QuerySet to chain requests:Article.objects.old().public()Now we need to make it work for related objects:user.articles.old().public()This is done using use_for_related_fields, but it needs a little trick.