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

connectedCallback() {

        loadStyle(this, PCMilerCSS), 
        loadScript(this, PCMilerJavascript)
        .then(() => {
        .catch(error => {
            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();


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

  • Do you have a version of the library that is a single JavaScript file that you've uploaded as your static resource and this ALKMaps declaration is definitely in that single file you uploaded? – Phil W May 2 at 8:37
  • Yes. See above. That's the beginning of the file. Starts with "var ALKMaps....." – Dave C May 2 at 16:34

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.

| improve this answer | |
  • You are a lifesaver, sfdcfox! Thanks! – Dave C May 4 at 13:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.