topic Re: esri is not defined inside JavaScript class in ArcGIS JavaScript Maps SDK Questions

esri is not defined inside JavaScript class

YvanBérard — Mon, 11 Mar 2013 14:41:01 GMT

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

Re: esri is not defined inside JavaScript class

JohnGravois — Mon, 11 Mar 2013 14:56:20 GMT

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.

Re: esri is not defined inside JavaScript class

derekswingley1 — Sun, 12 Dec 2021 06:50:49 GMT

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.

Re: esri is not defined inside JavaScript class

YvanBérard — Sun, 12 Dec 2021 06:50:52 GMT

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
  });
 }
}