Advance Guide on Odoo Geolocation Integration
How to create Geolocation-Enabled Vehicle Route Master in Odoo
Navigating through the realm of fleet management, the precise tracking of the beginning and ending points of vehicles’ routes is paramount for effective functioning. Odoo, an open source ERP system that has become quite famous, lets for the geolocation integration and modification and of custom modules giving it user-friendliness and extensiveness.
In this article, we will focus on how to develop a custom Odoo module which facilitates users to enter and also view the geolocation information based on the routes taken by the vehicles through the interface. This combines advanced managerial techniques to the database system of Python, JavaScript (including mapping with Leaflet) and XML, hence establishing an effective vehicle-routing management system with tracking of the current location of the vehicles.
Route management of vehicles has become a prominent part of fleet operation. Effective recording, tracing, and visualization of routes enhances efficiency in logistics and transportation work. This tutorial, therefore, focuses on the development of a custom Odoo module that integrates geolocation functionalities into its vehicle route management system. In essence, this module will allow users to specify a vehicle route’s start and end destination using an interactive map.
Key Features of the Custom Odoo Module
- Geolocation Input The module provides fields for the start and end points of a vehicle route, where users can type in an address or location.
- Interactive Map To the input fields, there is added a live update dynamic map that will revise as a user types an address or clicks on the map
- Address to Coordinates Conversion The module fetches the corresponding latitude and longitude for the given address and displays them on a Leaflet-powered map.
- Reverse Geocoding When users click on the map, the coordinates are converted back into a human-readable address, which is updated in the input field.
Odoo Models for Vehicle Routes
The vehicle route backend model vehicle.route has fields that store in a route its start and end points.
from odoo import api, fields, models
class VehicleRoute(models.Model):
_name = 'vehicle.route'
_description = 'Vehicle Route'
_inherit = ["mail.thread", "mail.activity.mixin"]
start_point = fields.Char(string='Start Location', tracking=True)
end_point = fields.Char(string='End Location', tracking=True)
Here, we define two fields, start_point and end_point, that store the start and end locations for the vehicle route. These fields are tracked, meaning any change will be recorded in the system’s activity log.
How to Integrate the Geolocation Widget in the Frontend
JavaScript and XML combine in the front part of the module to create, specifically, an interactive experience for the user in adding start and end points to a journey. The GeoLocationMap widget is the extension of the standard CharField widget; it allows for a view of the map as well as the input of the address. A user can use either typing the address or interacting with the map to select a point.
export class GeoLocationMap extends CharField {
setup() {
super.setup();
this.orm = useService('orm');
this.mapContainerRef = useRef('mapContainer');
this.state = useState({
latitude: '51.505',
longitude: '-0.09',
address: '',
currentMarker: null,
});
// Handle address changes when typing
this.handleAddressChange = this.handleAddressChange.bind(this);
onMounted(() => this._initializeMap());
}
async handleAddressChange(event) {
const newAddress = event.target.value;
this.state.address = newAddress;
if (newAddress) {
await this.getLatLngFromAddress(newAddress);
this._updateMap();
}
}
// Other methods for handling map initialization, updating the map, and geocoding...
}
In this code, the GeoLocationMap class initializes a Leaflet map and sets up event listeners for both the address input field and the map. When the user types an address, the system fetches the latitude and longitude of the address using OpenStreetMap’s Nominatim API. The map is then updated with the corresponding coordinates.
XML Template for the Geolocation Widget
In the XML file, we define the structure of the user interface.The location map is embedded within this form view and the geolocation integration enhancements are applied to the address input.
<templates>
<t t-name="GeoLocation" t-inherit="web.CharField">
<xpath expr="//input" position="replace">
<div class="o_input_map">
<input
class="o_input"
t-ref="input"
t-model="state.address"
t-on-input="handleAddressChange"
placeholder="Type a location..."
/>
<button type="button" class="btn o_icon_button" t-on-click="_OpenMapview">
<i class="fa fa-map-marker" title="Open map"/>
</button>
</div>
</xpath>
<xpath expr="//div[hasclass('o_input_map')]" position="after">
<div class="input-group">
<div t-ref="mapContainer" class="map-preview o_leaftlet_preview_open"/>
</div>
</xpath>
</t>
</templates>
This XML template replaces the standard input field with a customized input that displays a map. Users can also click a button to open the map in a new window. The map preview dynamically updates as users type in an address.
How Deploying the Module
The module will be defining the views and actions in XML and creating an action for the menu item that launches the vehicle route view in Odoo.
<odoo>
<record id="vehicle_route_view_form" model="ir.ui.view">
<field name="name">vehicle.route.form</field>
<field name="model">vehicle.route</field>
<field name="arch" type="xml">
<form string="Vehicle Route">
<sheet>
<div class="row">
<div class="col-lg-6">
<group>
<field name="start_point" widget="geolocation_map" required="1"/>
</group>
</div>
<div class="col-lg-6">
<group>
<field name="end_point" widget="geolocation_map" required="1"/>
</group>
</div>
</div>
</sheet>
<chatter/>
</form>
</field>
</record>
<record id="vehicle_route_view_list" model="ir.ui.view">
<field name="name">vehicle.route.list</field>
<field name="model">vehicle.route</field>
<field name="arch" type="xml">
<list string="Vehicle Route List">
<field name="start_point"/>
<field name="end_point"/>
</list>
</field>
</record>
<record id='vehicle_route_action' model='ir.actions.act_window'>
<field name="name">Vehicle Route</field>
<field name="res_model">vehicle.route</field>
<field name="view_mode">list,form</field>
</record>
<menuitem action="vehicle_route_action" parent="fleet.fleet_vehicles" id="vehicle_route_menu" groups="base.group_user"/>
</odoo>
In this XML code, we define the form and list views for the vehicle.route model.
CSS
.o_input_map {
position: relative;
}
#open_map {
color: blue;
font-size: 20px;
position: absolute;
top: -5px;
right: 13px;
}
.o_leaftlet_preview_open {
position: relative;
height: 200px;
width: 100%;
top: 9px;
}
Replace your_module_name with the actual name of the module.
This can create an intelligible but heavily user-friendly system for managing automobile routes by integrating strong backend systems with such features as geolocation for an interactive frontend. This module makes a visit to this enhancement of fleet management: real-time location tracking within the Odoo platform provides the business with the better way to manage their fleet operation.
Such a solution would not only mean that your team can manage routes for vehicles, such seamless functionality would also include viewing location information and updating it in an intuitive and seamless manner Added up, this would maximize operational efficiency and accuracy in fleet management.
Ready to Peak Your Fleet Management
Just imagine a world where your fleet is always on point routes are optimized and real-time data is at your fingertips that’s the power of Odoo’s geolocation integration
Want to Learn How? At Transines Solutions we’re here to bring that vision to life Our team of Odoo experts can help you integrate Odoo into your business. Want technical help? Book Your Free Odoo Consultation Now
"Unlock the Full Potential of Your Business with Odoo ERP!"
"Get a Cost Estimate for Your ERP Project, Absolutely FREE!"
Get a Free Quote