+ Start a Discussion
Sumesh ChandranSumesh Chandran 

Leaflet map not loading on page load

I have been trying the corrections mentioned on the first answer of this post on Stackexchange https://salesforce.stackexchange.com/questions/254214/loading-the-leaflet-map-in-lightning-web-component (http://salesforce.stackexchange.com/questions/300839/leaflet-map-not-loading-on-page-load), 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:
User-added image