Having issue with vectorBaseMapLayer

[harichintalapudi]

Promise.all error:TypeError: L.esri.Vector.vectorBasemapLayer is not a function with LWC

my code shown below

import { LightningElement, api, track, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import {loadScript, loadStyle} from 'lightning/platformResourceLoader';

//Create API key using your ArcGIS Developer account developers.arcgis.com
const apiKey = "AAPK7d26ac81e074448c87dada5c283f0d0flXzs5pSuaVFJXxUOkIingEF0nQ80Q3dmKuYDfwezrifW0UoMUH3SJJeU6SiCcCL_";

const FIELDS = [
'Account.Billing_Address_Latitude__c',
'Account.BillingLongitude__c'];

const DefaultLat = 35.7796;
const DefaultLong = -78.6382;

export default class ESRIMapDemo extends LightningElement {
leafletInitialzed = false;

renderedCallback(){
  
      this.loadLeaflet();
  this.leafletInitialzed = true;
}

loadLeaflet(){
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(loadScript(this, 'https://unpkg.com/esri-leaflet@3.0.2/dist/esri-leaflet.js'));
}, 100);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(loadScript(this, 'https://unpkg.com/esri-leaflet-geocoder@3.1.1/dist/esri-leaflet-geocoder.js'));
}, 200);
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(loadScript(this, 'https://unpkg.com/esri-leaflet-vector@4.0.1/dist/esri-leaflet-vector.js'));
}, 200);
});
Promise.all([
loadStyle(this, 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css'),
loadScript(this, 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.js'),
promise1,
promise2,
promise3,
loadStyle(this, 'https://unpkg.com/esri-leaflet-geocoder@3.1.1/dist/esri-leaflet-geocoder.css'),
])
.then(() => {
this.initializeMap();
}).catch(error => {
console.log('Promise.all error:' + error);
});
}

initializeMap(){
    //var map = L.map(this.template.querySelector(".map-root")).setView([39.7392, -104.991531], 14);
    var map = L.map(this.template.querySelector(".map-root")).setView([37.837, -122.479], 8);
    
    console.log('vector====',L.esri.Vector.vectorBasemapLayer);
   
    const vectorTiles = {};
    const allEnums = [
    "ArcGIS:Imagery",
    "ArcGIS:Imagery:Standard",
    "ArcGIS:Imagery:Labels",
    "ArcGIS:LightGray"];
     vectorTiles.Default = L.esri.Vector.vectorBasemapLayer(null, {
        apiKey
    });
    
    allEnums.forEach((enumString) => {
        vectorTiles[enumString] = L.esri.Vector.vectorBasemapLayer(enumString, {
            apiKey
        });
    });

    L.control.layers(vectorTiles, null, {
      collapsed: false
    })
    .addTo(map);

    vectorTiles.Default.addTo(map);
     
}

}

[gavinr]

Hi, due to Salesforce restrictions, it does not seem like Esri Leaflet Vector will work as a Salesforce Lightening Web Component because Esri Leaflet Vector's dependencies use web workers. We added some details here: https://github.com/Esri/systems-integrations/blob/main/salesforce/README.md#using-esri-leaflet-vector