17.0: Widget map and new map field

README.md

@@ -41,6 +41,7 @@ addon | version | maintainers | summary
 [web_widget_domain_editor_dialog](web_widget_domain_editor_dialog/) | 17.0.1.0.0 |  | Recovers the Domain Editor Dialog functionality
 [web_widget_dropdown_dynamic](web_widget_dropdown_dynamic/) | 17.0.1.0.0 |  | This module adds support for dynamic dropdown widget
 [web_widget_image_download](web_widget_image_download/) | 17.0.1.0.0 |  | Allows to download any image from its widget
+[web_widget_map](web_widget_map/) | 17.0.1.0.0 | [![drkpkg](https://github.com/drkpkg.png?size=30px)](https://github.com/drkpkg) | This module adds support for map widget
 [web_widget_numeric_step](web_widget_numeric_step/) | 17.0.1.0.0 | [![rafaelbn](https://github.com/rafaelbn.png?size=30px)](https://github.com/rafaelbn) [![yajo](https://github.com/yajo.png?size=30px)](https://github.com/yajo) | Web Widget Numeric Step
 [web_widget_open_tab](web_widget_open_tab/) | 17.0.1.0.0 |  | Allow to open record from trees on new tab from tree views
 [web_widget_plotly_chart](web_widget_plotly_chart/) | 17.0.1.0.0 | [![robyf70](https://github.com/robyf70.png?size=30px)](https://github.com/robyf70) | Allow to draw plotly charts.

web_widget_map/README.md

@@ -0,0 +1,65 @@
+# Map field and widget
+
+This new widget is a combination of the `map` field and the `map` widget. It allows you
+to display a map in the form and to select a location by dragging a marker on the map.
+
+## Configuration
+
+## Field instance
+
+The python instance of the field is `fields.Map`.
+
+```python
+
+from odoo import models, fields, api, _
+
+_logger = logging.getLogger(__name__)
+
+class MyModel(models.Model):
+    _name = 'my.model'
+
+    name = fields.Char(string='Name')
+    location = fields.Map(string=_('Location'))
+
+    @api.onchange('location')
+    def _onchange_location(self):
+        """
+        This will be called when the location is changed.
+        """
+        if self.location:
+            _logger.info('Location: %s', self.location)
+```
+
+Now lets implement the widget.
+
+```xml
+<odoo>
+    <data>
+        <record id="view_my_model_form" model="ir.ui.view">
+            <field name="name">my.model.form</field>
+            <field name="model">my.model</field>
+            <field name="arch" type="xml">
+                <form string="My Model">
+                    <sheet>
+                        <group>
+                            <field name="name" />
+                            <field name="location" widget="map" />
+                        </group>
+                    </sheet>
+                </form>
+            </field>
+        </record>
+    </data>
+</odoo>
+```
+
+After that you will get this result:
+
+![Map widget](static/img/map.png)
+
+## Thanks
+
+I wanna thank Cybrosys Technologies for the documentation they maintain. I have used
+their documentation as a reference to create this widget.
+
+https://www.cybrosys.com/blog/how-to-create-a-widget-in-odoo-17

web_widget_map/__init__.py

@@ -0,0 +1 @@
+from . import fields

web_widget_map/__manifest__.py

@@ -0,0 +1,15 @@
+{
+    "name": "Map field widget",
+    "summary": "A map field widget for Odoo.",
+    "author": "Odoo Community Association (OCA)",
+    "website": "https://github.com/OCA/web",
+    "category": "Customizations",
+    "version": "17.0.1.0.0",
+    "depends": ["web", "web_leaflet_lib"],
+    "assets": {
+        "web.assets_backend": [
+            "web_widget_map/static/src/components/*",
+        ],
+    },
+    "license": "AGPL-3",
+}

web_widget_map/fields/__init__.py

@@ -0,0 +1 @@
+from . import map

web_widget_map/fields/map.py

@@ -0,0 +1,16 @@
+from odoo import fields
+
+
+class MapField(fields.Field):
+    """
+    Custom field to store the location of a record.
+
+    The field stores the location as a string in the format 'lat,lng'.
+    """
+
+    type = "char"
+    column_type = ("varchar", "varchar")
+
+
+# Monkey patch the fields module to add the Map field.
+fields.Map = MapField

web_widget_map/i18n/map_field.pot

@@ -0,0 +1,16 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# 	* map_field
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 17.0+e\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2024-09-18 18:51+0000\n"
+"PO-Revision-Date: 2024-09-18 18:51+0000\n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"

web_widget_map/pyproject.toml

@@ -0,0 +1,3 @@
+[build-system]
+requires = ["whool"]
+build-backend = "whool.buildapi"

web_widget_map/static/src/components/widget_map.esm.js

@@ -0,0 +1,137 @@
+/** @odoo-module */
+
+import {loadCSS, loadJS} from "@web/core/assets";
+import {registry} from "@web/core/registry";
+import {useService} from "@web/core/utils/hooks";
+import {standardFieldProps} from "@web/views/fields/standard_field_props";
+import {useInputField} from "@web/views/fields/input_field_hook";
+import {
+    Component,
+    onMounted,
+    onPatched,
+    onWillPatch,
+    onWillStart,
+    onWillUpdateProps,
+    useRef,
+    useState,
+} from "@odoo/owl";
+
+export class MapField extends Component {
+    static template = "map_field.MapField";
+    static props = {
+        ...standardFieldProps,
+    };
+
+    setup() {
+        this.rpc = useService("rpc");
+        this.orm = useRef("orm");
+        this.marker = null;
+        this.mapElementList = null;
+        this.state = useState({
+            location: {
+                lat: this.props.record.data[this.props.name]
+                    ? parseFloat(this.props.record.data[this.props.name].split(",")[0])
+                    : 0.0,
+                lng: this.props.record.data[this.props.name]
+                    ? parseFloat(this.props.record.data[this.props.name].split(",")[1])
+                    : 0.0,
+            },
+            fields: this.props.field_list
+                ? JSON.parse(this.props.field_list.split(","))
+                : [],
+        });
+        useInputField({
+            getValue: () => this.state.location,
+            parse: (value) => this.parseLatLng(value),
+            setValue: (value) => {
+                this.state.location = value;
+                this.placeMarker(value);
+            },
+        });
+
+        onWillStart(() =>
+            Promise.all([
+                loadJS("/web_leaflet_lib/static/lib/leaflet/leaflet.js"),
+                loadCSS("/web_leaflet_lib/static/lib/leaflet/leaflet.css"),
+            ])
+        );
+
+        onMounted(() => {
+            this.initializeMap();
+        });
+
+        onWillUpdateProps(() => {
+            this.placeMarker(this.parseLatLng(this.props.record.data[this.props.name]));
+            this.state.location = this.parseLatLng(
+                this.props.record.data[this.props.name]
+            );
+        });
+
+        onPatched(() => {
+            this.placeMarker(this.parseLatLng(this.props.record.data[this.props.name]));
+            this.resetZoom(this.parseLatLng(this.props.record.data[this.props.name]));
+        });
+
+        onWillPatch(() => {
+            this.placeMarker(this.parseLatLng(this.props.record.data[this.props.name]));
+            this.resetZoom(this.parseLatLng(this.props.record.data[this.props.name]));
+        });
+    }
+
+    initializeMap() {
+        const mapOptions = {
+            center: {lat: this.state.location.lat, lng: this.state.location.lng},
+            zoom: 13,
+        };
+        // eslint-disable-next-line no-undef
+        this.map = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+            maxZoom: 18,
+        });
+        this.mapElementList = document.getElementsByClassName("o_map_field");
+        this.mapDiv = this.mapElementList[0];
+        // eslint-disable-next-line no-undef
+        this.mapDiv.el = L.map(this.mapDiv, mapOptions);
+        this.mapDiv.el.addLayer(this.map);
+        this.placeMarker(this.state.location);
+    }
+
+    placeMarker(latLng) {
+        if (this.marker) {
+            this.marker.remove();
+        }
+        // eslint-disable-next-line no-undef
+        this.marker = new L.Marker([latLng.lat, latLng.lng], {draggable: true});
+        this.marker.addTo(this.mapDiv.el);
+        this.marker.on("dragend", (e) => this.updateLocation(e.target.getLatLng()));
+    }
+
+    updateLocation(latLng) {
+        this.state.location = {
+            lat: latLng.lat,
+            lng: latLng.lng,
+        };
+        this.props.record.update({[this.props.name]: `${latLng.lat}, ${latLng.lng}`});
+    }
+
+    resetZoom(latLng) {
+        this.mapDiv.el.setView([latLng.lat, latLng.lng], 13);
+    }
+
+    parseLatLng(value) {
+        if (typeof value === "string" && value.includes(",")) {
+            return {
+                lat: parseFloat(value.split(",")[0]),
+                lng: parseFloat(value.split(",")[1]),
+            };
+        }
+        return {lat: 0, lng: 0};
+    }
+}
+
+export const mapField = {
+    component: MapField,
+    displayName: "Map",
+    supportedTypes: ["point"],
+};
+
+registry.category("fields").add("map", mapField);

web_widget_map/static/src/components/widget_map.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates>
+    <t t-name="map_field.MapField">
+        <div class="o_map_location_wrapper">
+            <div
+                class="o_map_field"
+                style="height: 400px; width: 100%; margin-top: 15px;"
+            >
+                <div t-att-ref="map" style="height: 100%;" />
+            </div>
+        </div>
+    </t>
+</templates>

web_widget_map/static/src/css/map.scss

@@ -0,0 +1,56 @@
+.o_map_field {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.o_map_location_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    padding: 10px 0;
+}
+
+.o_map_info {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 100%;
+    gap: 15px;
+}
+
+.o_map_label {
+    font-size: 0.85rem;
+    font-weight: bold;
+    width: 100px;
+    text-align: right;
+    margin-right: 10px;
+}
+
+.o_map_data {
+    font-size: 0.85rem;
+}
+
+.o_map_button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background-color: #007bff; // Color azul para el botón
+    color: white;
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+
+    i {
+        font-size: 1.2rem;
+    }
+
+    &:hover {
+        background-color: #0056b3;
+    }
+}

web_widget_map/tests/__init__.py

@@ -0,0 +1 @@
+from . import test_main