Loading the leaflet Map in Lightning Web Component

Question

When I am trying to load the lightning web component map is not loading.

<template>
<div id="map" lwc:dom="manual"></div>
</template>

import { LightningElement,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import leaflet from '@salesforce/resourceUrl/leaflet';


export default class Leaflet extends LightningElement {
@api leafletInitialized = false;
@api recordId;
renderedCallback() {
    if (this.leafletInitialized) {
        return;
    }
    this.leafletInitialized = true;

    Promise.all([
        loadScript(this, leaflet + 'leaflet/leaflet.js'),
        loadStyle(this, leaflet + '/leaflet/leaflet.css')
    ])
        .then(() => {
            this.initializeleaflet();
        })
        .catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error loading D3',
                    message: error.message,
                    variant: 'error'
                })
            );
        });
}

initializeleaflet() {
       var map = L.map('map').setView([39.7392, -104.991531], 14);
       mapLink = 
           '<a href="http://openstreetmap.org">OpenStreetMap</a>';
       L.tileLayer(
           'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
           attribution: '&copy; ' + mapLink + ' Contributors',
           maxZoom: 18,
           }).addTo(map);

}
}

Answer 1

L.map(<String> id, <Map options> options?) is the initialization factory, in which you provide the ID of your element for the component to initialize, LWC doesn't seem to support passing in the id for leaflet to init since (from the doc):

Don’t use ID selectors with querySelector. The IDs that you define in HTML templates may be transformed into globally unique values when the template is rendered. If you use an ID selector in JavaScript, it won’t match the transformed ID.

leaflet also supports passign in the ELEMENT, so, if you pass the element rather than the string id, you should be fine (for the most part):

L.map(<HTMLElement> el, <Map options> options?)

if you change your code to

const mapRoot = this.template.querySelector(".map-root")
var  map = L.map(mapRoot).setView([39.7392, -104.991531], 14);

you will be able to pass the instantiated HTML element to the factory. You will need to add a class name to your div in order to use it as a query selector, since id's are not supported. Ex:

<template>
    <div class="map-root" lwc:dom="manual"></div>
</template>   

and one last thing, dont forget your css file, if you dont add a component height, the component will load but will appear with a height of 0px:

.map-root{
     height: 180px;
}

Leaflet Documentation

LWC Documentation - Access Elements the Component Owns

Answer 2

The other answer about using the css class instead of id is great . I will add few more things that could be cause for this.

Check that the zip file you have for leaflet in the static resource is properly zipped and you are using the proper path .

I downloaded from the site and uploaded to static resource and named the static resource as leaflet .

I had to change the path as below

renderedCallback() {
    if (this.leafletInitialized) {
        return;
    }
    this.leafletInitialized = true;

    Promise.all([
        loadScript(this, leaflet + '/leaflet.js'),
        loadStyle(this, leaflet + '/leaflet.css')
    ])
        .then(() => {
            this.initializeleaflet();
        })
        .catch(error => {
         console.log(error);
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error loadingLeaflet',
                    message: error,
                    variant: 'error'
                })
            );
        });
}

Also to see the exceptions of promise reject just log the error that will tell you true error .

Also just a thought what makes you use leaflet . There is a lightning-map lwc component provided by salesforce and why not just use it .