Leaflet map not loading on page load

Question

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!

Answer 1

I dont think You can access child elements in the component body in connectedcallback try rendered callback instead like this

renderedCallback() {
    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);
    });
  }

Answer 2

Anybody who gets stuck, this is the way I got it working. This is with leaflet and Mapbox combination.

  connectedCallback() {
    Promise.all([
      loadStyle(this, leaflet + '/leaflet.css'),
      loadScript(this, leaflet + '/leaflet.js')
    ]).then(() => {
      const el = this.template.querySelector(".map-root");
      let mymap = L.map(el).setView([54.139503, -96.653471], 4);
      L.tileLayer('https://api.mapbox.com/styles/v1/yourMapBoxId/ck8koy1zw0mq51is3br0pshpr/tiles/256/{z}/{x}/{y}@2x?access_token=pk.ey******************************', {
        tileSize: 512,
        zoomOffset: -1,
        attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a>',
      }).addTo(mymap);
    });
  }