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.
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.