I have been trying the corrections mentioned on the first answer of this post https://salesforce.stackexchange.com/questions/254214/loading-the-leaflet-map-in-lightning-web-component, still I get a blank div.
Here is my code so far:
HTML
<template>
<div class="map-root" lwc:dom="manual"></div>
</template>
CSS
.map-root {
height: 180px;
}
JAVASCRIPT
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
import leaflet from '@salesforce/resourceUrl/leaflet'
export default class MduPenetration extends LightningElement {
connectedCallback() {
Promise.all([
loadStyle(this, leaflet + '/leaflet.css'),
loadScript(this, leaflet + '/leaflet.js')
]).then(() => {
const el = this.template.querySelector('.map-root');
const mymap = L.map(el).setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={pk.ey********************************************}', {
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.ey********************************************'
}).addTo(mymap);
});
}
And finally this is way I have the leaflet library uploaded to Static Resources:
Please advise!