Creating map views in Odoo

1. Introduction

The map view is the newest view type in Odoo V13. It allows you to get a quick overview of where all your customers are located on a world map. The map view will show a marker for every address, which is showing the world map with third party software named MapBox. In this tutorial we will create a map view for the sale orders. This will show the addresses from all customers on the world map.

2. Adding the dependency

Before you can start creating map views you will need to create a new module and configure the manifest.py correctly. Open up your manifest.py and add 'web_map' as a dependency. As we'll add the map view on the sale orders we'll also need a dependency to sale:

                    'depends': ['web_map', 'sale'],                                    

Without the 'web_map' dependency Odoo cannot build the view as 'web_map' contains all the framework logic to build this view.

3. Inheriting the model

In order to create a map view you will need two things. You need a field that links from your model to the 'res.partner' model and a field that contains the full address for your record. As Odoo already has the link from the 'sale.order' to the 'res.partner' model (with the field partner_id) we only need the full address. By default Odoo has a field named 'contact_address_complete' on the 'res.partner' model that formats the address of the contacts so we only need to get this value to our own model.

Create a new file named 'sale_order.py' in your 'models' folder and inherit the 'sale.order' model. Next we have create a new field 'contact_address_complete' which we fill when the 'partner_id' field is changed (to get the address from the right customer):

                    from odoo import models, fields, apiclass SaleOrder(models.Model):    _inherit = 'sale.order'    contact_address_complete = fields.Char(string='Address')    @api.onchange('partner_id')    def set_contact_address(self):        if self.partner_id:            self.contact_address_complete = self.partner_id.contact_address_complete                                    

That's all we need at the model side! Thanks to our onchange the address from the customer will automatically be filled up in our field 'contact_address_complete'.

4. Creating the view and action

4.1 Inheriting the form view

The first thing that we need is to have our custom field 'contact_address_complete' available on the form view. Create a new file named 'sale_order_view.xml' in your 'views' folder and inherit the existing form view to add our custom field in it:

                                                                        <record id="tutorial_sale_order_form_view" model="ir.ui.view">                                <field name="inherit_id" ref="sale.view_order_form"></field>                                <field name="model">sale.order</field>                                <field name="arch" type="xml">                                    <xpath expr="//field[@name='partner_id']" position="after">                                        <field name="contact_address_complete"></field>                                    </xpath>                                </field>                            </record>                                                            

4.2 Creating the map view

Now that we have the field available on the form we should create a map view. The map view is created by creating an XML record with a model and an arch, much like any other view. Inside this arch you have to define the map view and then the marker, to define what is shown in the popup. Have a look at the code for now and I'll explain it afterwards:

                                                                        <record id="sale_order_map_view" model="ir.ui.view">                                <field name="name">sale.order.map.view</field>                                <field name="model">sale.order</field>                                <field name="arch" type="xml">                                    <map res_partner="partner_id">                                        <marker-popup>                                            <field name="partner_id" string="Customer"></field>                                            <field name="amount_total" string="Total amount"></field>                                            <field name="currency_id" string="Currency"></field>                                            <field name="contact_address_complete" string="Address"></field>                                        </marker-popup>                                    </map>                                </field>                            </record>                                                            

First we'll tell Odoo that we're creating a new 'ir.ui.view' record for the model 'sale.order'. Inside of the arch we'll first create a map record. The 'res_partner="partner_id"' will tell Odoo that the link from our model to the contact is through the field 'partner_id'. Finally we add a marker-popup inside the map definition. This will tell Odoo how we want to style the popup that is being shown if you click on an item in the map view. As you can see you can use any field available on your model in the popup. You do have to provide a string on the field name definition or your map view will crash though!

This is how the popup looks like with this code:

4.2 Creating the action

Finally, we need an action to load and open this map view. Our action will need an action window, a view_id and a view_mode to be able to add and use the map view. Your code should look like this:

                                                                        <record id="action_sale_order_map_view" model="ir.actions.act_window.view">                                <field name="view_mode">map</field>                                <field name="view_id" ref="sale_order_map_view"></field>                                <field name="act_window_id" ref="sale.action_quotations_with_onboarding"></field>                            </record>                                                            

That's it! If you now install this module you'll have a fully working map view on your sale orders:

5. Conclusion

Creating map views in Odoo is quite easy and fast to do. Thanks to the integration with Mapbox and much of the logic being handled in the app 'web_map' we can add map views quite quickly. If you want to visually show records on the world map this is the way to go in Odoo.