How can I override createMarkerPopup function of MapRenderer class in Odoo16

113 views Asked by At

I am trying to add new Send SMS button on map marker as you can check below. I am unable to add on click method, I have tried below code but its not working


import { MapRenderer } from "@web_map/map_view/map_renderer";

export class SmsMapRenderer extends MapRenderer {
    setup() {
        super.setup();
    }

    createMarkerPopup(markerInfo, latLongOffset = 0) {
        const popup = super.createMarkerPopup(...arguments);
        debugger;
//        const popup = super.createMarkerPopup(markerInfo, latLongOffset);
        const popupFields = popup.getMarkerPopupFields(markerInfo);

        const partner = markerInfo.record.partner;
        const popupHtml1 = renderToString("renewell.sendsmsPopup", {
            fields: popupFields,
            hasFormView: this.props.model.metaData.hasFormView,
        });

        const opensmsBtn = popup
            .getElement()
            .querySelector("button.o-map-renderer--popup-buttons-send_sms");
        const offset = markerInfo.pinInSamePlace * 0.000050;
        if (opensmsBtn) {
            opensmsBtn.onclick = () => {
                const popup = L.popup({ offset: [0, -30] })
                    .setLatLng([
                        partner.partner_latitude + latLongOffset,
                        partner.partner_longitude - latLongOffset,
                    ])
                    .setContent(popupHtml1)
                    .openOn(this.leafletMap);
            };
        }

        return popup;
    }
}

Please give me some suggestion or any example.

1

There are 1 answers

0
M Tahir Noor On

I have found solution and its working for me. I was just needed to add patch in my code.


import { patch } from "@web/core/utils/patch";
import { MapRenderer } from "@web_map/map_view/map_renderer";
import { renderToString } from "@web/core/utils/render";
import rpc from 'web.rpc';

const { useEffect, useRef } = owl;

patch(MapRenderer.prototype, "ModuleName.SmsPopup", {
    setup() {
        this._super();

    },

    createMarkerPopup(markerInfo, latLongOffset = 0) {
        debugger;
        const popup = this._super(...arguments);
        const popupFields = this.getMarkerPopupFields(markerInfo);
        debugger;
        const partner = markerInfo.record.partner;
        const popupHtmlSms = renderToString("ModuleName.sendsmsPopup", {
            fields: popupFields,
            hasFormView: this.props.model.metaData.hasFormView,
        });

        const opensmsBtn   = popup
            .getElement()
            .querySelector("button.o-map-renderer--popup-buttons-send_sms");
        const offset = markerInfo.pinInSamePlace * 0.000050;
        if (opensmsBtn) {
            opensmsBtn.onclick = () => {
                debugger;
                const popup = L.popup({ offset: [0, -30] })
                .setLatLng([
                    partner.partner_latitude + latLongOffset,
                    partner.partner_longitude - latLongOffset,
                ])
                .setContent(popupHtmlSms)
                .openOn(this.leafletMap);
            };
        }
        return popup;
    },
});