LWC Javascript Library Scope Error

Question

I am successfully loading a third-party Javascript library in my connectedCallback:

connectedCallback() {

    Promise.all([
        loadStyle(this, PCMilerCSS), 
        loadScript(this, PCMilerJavascript)
    ])
        .then(() => {
            debugger;
            this.initializeMap();
        })
        .catch(error => {
            debugger;
            LightningUtil.logError(this, error);
        });
}

but then when I try to reference it:

initializeMap() {        

    ALKMaps.APIKey = this.credentials;
    alkmap = new ALKMaps.Map('map1', { displayProjection: new ALKMaps.Projection("EPSG:4326") });

    // map layers        

    _alkBasemap = new ALKMaps.Layer.BaseMap("ALK Maps", {style: ALKMaps.STYLE[this._baseLayerStyle]}, {displayInLayerSwitcher: false});                                                                                    
    let markerLayer = new ALKMaps.Layer.Markers("Marker Layer", {}, {displayInLayerSwitcher: true});                    
    let routingLayer = new ALKMaps.Layer.Routing("Routing Layer", {}, {displayInLayerSwitcher: true});                                                                                   
    let trafficLayer = new ALKMaps.Layer.Traffic("ALK LiveTraffic™", {}, {minScale: 500000, opacity: 0.5, displayInLayerSwitcher: true});        
    let weatherLayer = new ALKMaps.Layer.WeatherRadar("Radar Weather Layer",   {display: "radar"}, {opacity: 1, visibility: this._showWeatherOnOpen, displayInLayerSwitcher: true});

    alkmap.addLayers([alkBasemap, trafficLayer, weatherLayer, routingLayer, markerLayer]);
    let switcherControl = new ALKMaps.Control.LayerSwitcher();
    alkmap.addControl(switcherControl);

....

it blows up on line one because it cannot find ALKMaps:

ReferenceError: ALKMaps is not defined at AlkMap.initializeMap

Here is the first part of the Javascript library with ALKMaps front and center. My JS chops are weak so what am I missing? Why is ALKMaps not accessible? Thanks for your help....

var ALKMaps=function(){var a=function(){for(var a=/(^|(.?/))(ALKMaps.js)(\?|$)/i,b=document.getElementsByTagName("script"),e,f="",g="",h="",i=0,j=b.length;ia.right;)b.lon-=a.getWidth()}return b},CLASS_NAME:"ALKMaps.LonLat"}); ALKMaps.LonLat.fromString=function(a){a=a.split(",");return new ALKMaps.LonLat(a[0],a[1])};ALKMaps.LonLat.fromArray=function(a){var b=ALKMaps.Util.isArray(a);return new ALKMaps.LonLat(b&&a[0],b&&a[1])};ALKMaps.LonLat.transformArray=function(a,b,c){var d=[];if(null!=a&&a instanceof Array&&0g,f*g)}this.drawText(a.id,b,d)}else this.removeText(a.id);return c}}},calculateFeatureDx:function(a,b){this.featureDx=0;if(b){var c=b.getWidth();this.featureDx=Math.round(((a.left+a.right)/2-(this.extent.left+this.extent.right)/ 2)/c)*c}},drawGeometry:function(){},drawText:function(){},removeText:function(){},clear:function(){},getFeatureIdFromEvent:function(){},eraseFeatures:function(a){ALKMaps.Util.isArray(a)||(a=[a]);for(var b=0,c=a.length;b

Answer 1

In JavaScript, anything not placed in the global scope isn't visible outside the file. That means that:

var ALKMaps = ...

Only defines a variable that be used in the included file, but not outside of it.

What makes the variable available is when it is exported (all modern browsers):

export { ALKMaps }

Or when made globally available (IE compatible):

window.ALKMaps = ALKMaps;

One of those things needs to happen in order for the script's contents to be accessible.