How to save object globally in a ArcGIS API For JavaScript Application?

[SanajyJadhav]

Hello,

I have one question regarding creation of objects in a JavaScript Application in a modular development.

If I create any object, for example esri/map object one one AMD module, how to access it on some other module. Let's assume that in a HTML page, when a dom is ready, I call some some method from a module to create a map as below;

define(["esri/map",
        "dojo/on"], function (Map) {


    return {       
        createMap: function (mapDivID) {
            var map = new Map(mapDivID);
        }, //createMap ends
    };
});

Now, I call this function from my HTML page when the DOM is ready. However, I'm not being able to figure out how to access this map variable (map object) on another AMD module. I guess I need to save it globally but How?

Any help is much appreciated.

Cheers,

S.

[SteveCole]

Wouldn't you just declare the map variable globally and then assign it within the define section? Something like this:

1. var map;
3. define(["esri/map", 
4.         "dojo/on"], function (Map) { 
5.  
6.  
7.     return {        
8.         createMap: function (mapDivID) { 
9.             map = new Map(mapDivID); 
10.         }, //createMap ends 
11.     }; 
12. }); 

define(["esri/map",         "dojo/on"], function (Map) {       return {                createMap: function (mapDivID) {             var map = new Map(mapDivID);         }, //createMap ends     }; });

[Anonymous User]

I agree with Steve if you simply want to create a global variable.

However, if you have this "extra" module creating a map and you then run that module from a different script (like 'main.js'), then in the createMap() function I would return the 'map'. In my own script when I run createMap() in 'main.js' I save it to a global variable, and I keep track of all my global variables from the main.js script.

I also had included a 'declare' statement based on this esri sample. I'm still unclear on defining classes though so that part might be irrelevant.

define(["esri/map", "dojo/on", "dojo/_base/declare"], function(Map) {
     return declare([], {
          createMap : function (mapDivID) {
               var map = new Map(mapDivID);
               return map;
           }
     });
});

[SanajyJadhav]

Steve and Sarah, Thank you for responses. Appreciate it.

So,it seems I have to create a class inside a module and then return the map object to the calling module (main.js)

There is one thing worth mentioning that after investigating a bit, I found that you can save all of your global variables as window.variableName. So I used window.esriMap as below.

//could not highlight the code as JavaScript.

define(["esri/map",

        "dojo/on"], function (Map, on) {

    return {

        createMap: function (mapDivID) {          

            window.esriMap = new Map(mapDivID);

        }, //createMap ends

    };

});

By doing this, esriMap is available in any module of the application.So,would you like to share if anybody has used this approach? I mean I would like to know if there are any issue using window.esriMap

I will put my class approach outcome here.

Cheers,

S.

[SanajyJadhav]

Hello,

Actually both of you were right. I just declared the map variable as the first line of a module and after that defined the module.And I returned the map object from the function that actually created the map  ( return map;) So,I could save the map object on my main.js as global variable. No need to create a class inside a module,because from a normal function in a module,I could return the object.

Thanks to both of you.

Cheers,

S.

[SanajyJadhav]

I wanted to mark Steve's and Sarah's answers as correct but could not since only one can be marked as correct.

[OwenEarley]

If you are going to use global variables it is best practice to create a namespace for them. This can avoid potential name clashes with other JS libraries.

There is a heap of information available online - just Google 'javascript global variables namespace'.

[SanajyJadhav]

Thanks Owen for the response. Appreciate it.