esri is not defined inside JavaScript class

5468
3
03-11-2013 07:41 AM
YvanBérard
Occasional Contributor
Hi guys,

I'm trying to build a new web map with javascript class, but it seems that dojo.require doesn't work well with javascript class.

Here is my index.html code:
<html>
 <head>
  <!-- TITRE -->
  <title>Cartographie 2.0</title>
 
  <!-- FORMATAGE -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  
  <!-- DOCTYPE -->
  <!DOCTYPE html>
 
  <!-- XHTML -->
  <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
  <!-- CSS -->
  <link rel="stylesheet" href="css/interface.css" type="text/css">
 
  <!-- JAVASCRIPT -->
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
  <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
  <script type="text/javascript" src="js/jquery-ui-1.10.1.custom.min.js" ></script>
  <script type="text/javascript" src="js/mapper.js" ></script>
  
  <script type="text/javascript">
   var oMapper = new Mapper();
  
      $(document).ready(function()
      {
       oMapper.init();
       console.dir(initMap());
   });
   
  </script>
 
 </head>
 <body>
  <div id="main" class="container">
  </div>
 </body>
</html>



and there is my javascript class:
dojo.require("esri.map");

/*
 * Objet Mapper
 */
function Mapper()
{
 // public variables
 this.map;
 
 // private variables
 
 
 // public functions
 this.init = init;
 this.initMap = initMap;
 this.buildDivs = buildDivs;
 
 function init()
 {
  console.log("init");
  
        buildDivs();
     
     dojo.ready(initMap());
 }
 
 function initMap()
 {
  this.map = new esri.Map("map",{
            basemap:"topo",
            center:[-122.45,37.75], //long, lat
            zoom:13,
            sliderStyle:"small"
         });
 }
 
 function buildDivs()
 {
  div_main = $('#main');
  div_map = $('<div id="map"></div>');
  div_main.append(div_map);
 } 
 
}


When my app is called, the init is called, but when entering the function dojo.ready(initMap()); FireBug gives me a ReferenceError: esri is not defined (this.map = new esri.Map("map",{.....)

How can I make this work?

Thank you
0 Kudos
3 Replies
JohnGravois
Frequent Contributor
whether working with a class or not, you can't make calls to our API until you have checked to ensure that it has been downloaded and initialized.

you might want to download the following custom Point Clustering sample to see an example of the implementation of a javascript class.
0 Kudos
derekswingley1
Frequent Contributor

the init is called, but when entering the function dojo.ready(initMap()); FireBug gives me a ReferenceError: esri is not defined (this.map = new esri.Map("map",{.....)

How can I make this work?


Change:
dojo.ready(initMap())


To:
dojo.ready(initMap)


When you pass initMap() to dojo.ready, you're passing the return value of the initMap function instead of the initMap function itself. You want initMap to run when dojo.ready runs (this ensures esri.Map has been loaded), not before, which is what is probably happening with the current version of your code.
0 Kudos
YvanBérard
Occasional Contributor
Okay, if I do what Mr. Swingley suggest, my firebug fire the TypeError: node is null

in the index.html :
<script type="text/javascript">
   dojo.require("esri.map");
   
   oData = {
    "nom":"Coaticook",
    "extent":
    {
     "xmin": -8007750,
     "ymin": 5622181,
     "xmax": -7978153,
     "ymax": 5647140
    }
   };
        var oMapper = new Mapper(oData);
        oMapper.init();
        dojo.ready(oMapper.initMap);
        
  </script>


in the mapper class :
function Mapper(oData)
{
 this.map;
 this.div_map;
 this.init = init;
 this.builDivs = buildDivs;
 this.oData = oData;
 this.initMap = initMap;
 
 function init() 
 {
  buildDivs();
 }
 
 function buildDivs()
 {
  this.div_map = $('<div id="map"></div>');
  $('#main').append(this.div_map);
 }
 
 function initMap()
 {
  var initialExtent = new esri.geometry.Extent({
   'xmin': oData.extent.xmin,
   'ymin': oData.extent.ymin,
   'xmax': oData.extent.xmax,
   'ymax': oData.extent.ymax,
   'spatialReference': new esri.SpatialReference({ wkid: 102100 })
  });
  
  this.map = new esri.Map("map",
  {
   basemap:"topo",
   extent: initialExtent,
   "fadeOnZoom": true,
   logo: true,
   showAttribution: false
  });
 }
}




If i take the suggestion of Mr. Jgravois, it doesn't seem to be a javascript OOP.

BUT with some workaround of my original code, it works.

index.html :
<script type="text/javascript">
   dojo.require("esri.map");
   
   oData = {
    "nom":"Coaticook",
    "extent":
    {
     "xmin": -8007750,
     "ymin": 5622181,
     "xmax": -7978153,
     "ymax": 5647140
    }
   };
   
        dojo.ready(function()
        {
         var oMapper = new Mapper(oData);
         oMapper.init();
         oMapper.initMap();
        });
        
  </script>


mapper class :
function Mapper(oData)
{
 this.map;
 this.div_map;
 this.init = init;
 this.builDivs = buildDivs;
 this.oData = oData;
 this.initMap = initMap;
 
 function init() 
 {
  buildDivs();
 }
 
 function buildDivs()
 {
  this.div_map = $('<div id="map"></div>');
  $('#main').append(this.div_map);
 }
 
 function initMap()
 {
  var initialExtent = new esri.geometry.Extent({
   'xmin': oData.extent.xmin,
   'ymin': oData.extent.ymin,
   'xmax': oData.extent.xmax,
   'ymax': oData.extent.ymax,
   'spatialReference': new esri.SpatialReference({ wkid: 102100 })
  });
  
  this.map = new esri.Map("map",
  {
   basemap:"topo",
   extent: initialExtent,
   "fadeOnZoom": true,
   logo: true,
   showAttribution: false
  });
 }
}
0 Kudos