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

Question

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

1.2k views Asked by Bharath Anumula At 20 September 2024 at 09:54

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

Original Q&A

There are 2 answers

**mchepurnoy** · Answer 1 · 2015-06-16 14:04:05

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

**Gary Sheppard** · Answer 2 · 2015-06-17 15:31:29

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

TechQA.

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

There are 2 answers

Related Questions in DOJO

Related Questions in REQUIRE

Related Questions in ARCGIS

Related Questions in ESRI

Related Questions in ARCGIS-JS-API

Popular Questions

Popular Tags

Trending Questions