dojo.require statement is not loading esri Map module as expected

1.2k views Asked by At

I am working on a php application where I used 'arcgis' API for loading a map. please find the URL below:

http://js.arcgis.com/3.11/

In order to load an arcgis map in my application, I must use

dojo.require("esri.map");

So In my single page PHP application I added this require statement as below:

<script type="text/javascript">
   dojo.require("esri.map");
</script>

And in a js file I gave the map is loaded as shown below:

var myOptions = {
                        maxZoom: 20,
                        minZoom: 3,
                        zoom:5,
                        isZoomSlider: false,
                        sliderStyle: "large",
                        sliderPosition: "top-right"             
                    };
        this.map = new esri.Map("mapDiv", myOptions);

But when I run this application, I am getting an error stated "Uncaught TypeError: undefined is not a function" at the line "this.map = new esri.Map("mapDiv", myOptions);"

If I open developer tools run the same code by keeping breakpoints at require and esri.Map statements, I could see the map is getting loaded. But If I run it without opening developer tools then I am facing this issue.

Why dojo.require statement is not working as expected? Whats wrong am I doing?? Kindly reply

2

There are 2 answers

2
mchepurnoy On

You are trying to load map module with legacy module require. Try require Map using AMD syntax as shown in docs: require(["esri/map"], function(Map) { /* code goes here */ });

0
Gary Sheppard On

You need to wrap your JavaScript code in a call to dojo.ready.

HTML file:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>JavaScript in Separate File</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #mapDiv{padding:0;}
    </style>

    <script>var dojoConfig = {parseOnLoad: true};</script>
    <script src="//js.arcgis.com/3.11/"></script>
    <script src="code.js"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.layers.agstiled");
    </script>
  </head>
  <body class="claro" >
    <div id="mapDiv"></div>
  </body>
</html>

code.js file:

dojo.ready(function() { 
  var myOptions = {
                  maxZoom: 20,
                  minZoom: 3,
                  zoom:5,
                  isZoomSlider: false,
                  sliderStyle: "large",
                  sliderPosition: "top-right"             
              };
  this.map = new esri.Map("mapDiv", myOptions);
  var layer = new esri.layers.ArcGISTiledMapServiceLayer(
    "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
  this.map.addLayer(layer);
});