Geolocation is a powerful feature that allows web applications to access the user's location. By utilizing the navigator.geolocation API in JavaScript, developers can retrieve the latitude and longitude coordinates, enabling personalized and location-based experiences. In this blog, we will explore the fundamentals of geolocation and learn how to leverage latitude and longitude data in our applications.
The navigator.geolocation API acts as a gateway to user location data. Through this API, we can retrieve latitude and longitude coordinates, which represent the user's geographical position. With these coordinates, we gain valuable insights into a user's whereabouts, opening up a world of possibilities for application customization and enhanced user experiences.
To retrieve geolocation data, we utilize the getCurrentPosition() function provided by navigator.geolocation. This function triggers a prompt for the user's consent to share their location. Once consent is granted, the success callback function is executed, passing a position object containing latitude and longitude coordinates. Developers can access and store these coordinates for further processing.
Let’s see how we can use the navigator method to get the current location in Odoo.
Here, I’m going to place a button on the website. Clicking the button will extract the current location and save latitude and longitude information for the current user and related partners.
This is how the button is defined in the website template.
<button id="get-location">Get Location</button>
Now, let’s see how we can define the function for this button in JS.
odoo.define('test_get_location.custom', function(require) {
"use strict";
var publicWidget = require('web.public.widget');
publicWidget.registry.HrAttendances = publicWidget.Widget.extend({
selector: '.web_get_location',
events: {
'click .get-location': '_get_location',
},
_get_location: function(ev) {
var self = this;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
const {
latitude,
longitude
} = position.coords;
const coords = {
latitude,
longitude
};
self._rpc(
model: 'res.partner',
method: 'get_partner_location',
args: [
[], coords
],
})
.then(function(result) {
window.location.reload();
});
});
}
},
});
});The code checks if the navigator.geolocation object is available in the browser using the if (navigator.geolocation) condition. If geolocation is supported, the getCurrentPosition() function is called to request the current position from the user. In the success callback for the getCurrentPosition() function, the position object is passed as an argument. It contains the latitude and longitude coordinates in the coords property. The latitude and longitude values are extracted from the position object and assigned to the latitude and longitude variables, respectively. You can then use the obtained latitude and longitude values for further processing or display purposes.
Please note that the user's browser will prompt for permission to access their location when navigator.geolocation.getCurrentPosition() is called.
Here, we are going to save the latitude and longitude for the current user partner. RPC calls are used for the same purpose. Let’s see how the RPC method works,
class ResPartner(models.Model):
_inherit = 'res.partner'
def get_partner_location(self, coords):
current_user = self.env.user
related_partner = current_user.partner_id
related_partner.partner_latitude = coords.get('latitude')
related_partner.partner_longitude = coords.get('longitude')
returnThis Python function will update the partner's latitude and longitude.
The navigator.geolocation API empowers developers to tap into geolocation capabilities in their web applications. By retrieving latitude and longitude coordinates, we open up possibilities for personalized and location-based features.