1

I am trying to include a map in checkout page using Leaflet.js . For that I included Leaflet.js reference in checkout_index_index.xml like following.

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Iwdat_AddressExt25::css/custom.css"/> 
        <css src="https://unpkg.com/[email protected]/dist/leaflet.css" src_type="url"/>
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js" src_type="url"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" template="Iwdat_AddressExt25::jsloader.phtml" />
        </referenceContainer>
    </body>
</page>

Having that I am getting following error in browser console.

enter image description here

Earlier I tried to load Leaflet.js via requirejs with following , no error but leaflet.js wasnt initialized in that case. Therefore I tried the aforementioned inclusion via layout xml.

Having leaflet.js copied to local server.

var config = {
    "map": {
        "*": {
            'Magento_Checkout/template/billing-address/details.html':
            'Iwdat_AddressExt25/web/template/billing-address/details.html',
            'leaflet':'Iwdat_AddressExt25::js/leaflet.js'                        
        }
    },
    deps: ['Iwdat_AddressExt25/js/custom','Iwdat_AddressExt25/js/iwdatcustom_customer']
};

Can someone please guide me to resolve this and get leaflet.js initialized in checkout page properly.

Improve this question

1 Answer 1

Reset to default
0

I could resolve it with declare leaflet as a dependancy in requirejs-config.js .

    "map": {
        "*": {
            'Magento_Checkout/template/billing-address/details.html':
            'Iwdat_AddressExt85/web/template/billing-address/details.html'            
        }
    },
    deps: ['Iwdat_AddressExt85/js/custom','Iwdat_AddressExt85/js/iwdatcustom_customer','Iwdat_AddressExt85/js/leaflet']

};

I did copy leaflet js file, css file and its resources to my custom magento module.

Thanks and Best Regards

Indunil

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.