RequireJS and ArcGIS API for JS

[EvelynHernandez]

Hello,

Idk if im in the correct forum asking this , but idk where can i ask for people that it is just starting to change to js language.

I am following a basic requireJS tutorial that i found in this link​ and following the steps im trying to put in the require.config path the latest api.

("https://js.arcgis.com/3.13 ")

but idk how is the structure in the require to call all the functions that i need to use the examples showed in the samples website for arcgis for js.

Ex: Create a map | ArcGIS API for JavaScript

The thing is i dont want to put the require in the same webpage, so im using the structure how the attachment shows.

My html just have this in the head.

<script src="js/require.js" data-main="js/main"></script>

My main.js file is something like:

require.config({
  paths: {
    'esri': 'https://js.arcgis.com/3.13'
    
  }
});


require(['order!jquery','esri','esri/Map', "dojo/domReady!"], function ($, Map) {

});

What im doing wrong or missing?

Thanks for all ur help as always

[ReneRubalcava]

Is this a larger requirejs application that you are trying to add the ArcGIS API to or is this a fresh new application?

Dojo has it's own AMD loader that is very similar to RequireJS (as an AMD loader), both written by the same guy actually, but there are some differences.

If you are using the ArcGIS JS API, you already have the Dojo loader available to you.

More info here.

Writing a Class | Guide | ArcGIS API for JavaScript

One of the differences between RequireJS and Dojo, is the config setup. RequireJS has require.config(), but in Dojo, you can just pass require(configObject). I just posted on other ways to set up the config in a blog post.

The roads to starting an ArcGIS JS API app

For most cases you won't need to use RequireJS with Dojo.

If you need some clarification, just let me know.

Thanks!

Edit - I should also point out that all the plugins RequireJS can use like text, domReady are available with Dojo. order is no longer used in RequireJS. Dojo does not have a shim property for the config unfortunately, but you can still do it similar via some

define(['lib'], function() {return globalLibName});

There might be a better way to do that now, but that's how I did it. jQuery is already AMD compatible, you may need to set up like in this thread.

define.amd.jQuery = true;

[EvelynHernandez]

Well im actually trying to learn a way to modularize my next project using the Arcgis API for JS and also trying to learn in the process.

I just found requireJS to do it, but idk if its the best.

The thing that i want to do is put for example this code:

1. require(["esri/map", "dojo/domReady!"], function(Map) {  
2.   var map = new Map("map", { 
3.     center: [-118, 34.5], 
4.     zoom: 8, 
5.     basemap: "topo" 
6.   }); 
7. }); 

in a specified js file , not in the main HTML directly.

Cuz i have been seen in the sample codes that the api is loaded in the beggining and then put the require in the same html.

[ReneRubalcava]

If that's the case, then you can ignore using RequireJS and just use the API as is via the samples.

[EvelynHernandez]

Yes , but theres a way to not put the require statement in the HTML and put it in another file? or has to be there with the link to the api on <script> statement?.

Thats my question.

Thanks for ur help!

[ChrisSmith7]

Will something like this work for you (please note, this is untested)? In your main html page:

<script type="text/javascript">var dojoConfig = {
        packages: [{
          "name": "jsModules",
          "location": location.pathname.replace(/\/[^/]+$/, "") + "/jsModules" //this line may be different for you
        }]
      };
</script>

<script type="text/javascript">
      require([
      "jsModules/myMap",
      "dojo/ready"
      ], function (
        myMap,
        ready
      ) {
          ready(function () {
               var myMapInit = new myMap();
          }
      );
      });
</script>

Your "myMap" module could contain the basic map example from Esri:

define([
  "dojo/_base/declare",
  "esri/map",
  "dojo/parser",
  "dojo/dom",
  "dojo/domReady!"
], function (
  declare,
  Map,
  parser,
  dom
) {
    return declare(null, {
        constructor: function (options) {
            this._makeMap();
        },

        _makeMap: function () {
            parser.parse();

            map = new Map("mapDiv", {
                zoom: 3,
                basemap: "topo"
            });
        }

    });
});

[EvelynHernandez]

Thanks i will try it later

[ChrisSmith7]

I goofed on some syntax stuff - should be updated (still untested, though).

[ChrisSmith7 · Accepted solution]

Evelyn,

I tested and got this working as a demo app! I don't think it answers your requirements entirely, but it does allow you to modularize a bit more. I can't post a jsFiddle with external file resources, but this should work for you:

<!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">


        <style>
            html, body, #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            }
        </style>


        <script type="text/javascript">
            var dojoConfig = {
                packages: [{
                    name: 'jsModules',
                    location: location.pathname.replace(/\/[^/]+$/, '') + '/jsModules'
                }]
            };
        </script>


        <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
        <script src="http://js.arcgis.com/3.13/"></script>


        <script type="text/javascript">
                require([
                "jsModules/myMap",
                "dojo/ready"
                ], function (
                  myMap,
                  ready
                ) {
                    ready(function () {
                        var myMapInit = new myMap();
                    }
                );
                });
        </script>
     
        <title>Test Map</title>


    </head>
    <body class="claro">
        <div id="printButton"></div>
        <div id="mapDiv"></div>
    </body>
</html>

Here's the module:

define([  
  "dojo/_base/declare",  
  "esri/map",  
  "dojo/parser",  
  "dojo/dom",  
  "dojo/domReady!"  
], function (  
  declare,  
  Map,  
  parser,  
  dom  
) {  
    return declare(null, {  
        constructor: function (options) {  
            this._makeMap();  
        },  
  
        _makeMap: function () {  
            parser.parse();  
  
            map = new Map("mapDiv", {  
                zoom: 3,  
                basemap: "topo"  
            });  
        }  
  
    });  
});  

The way I have this set-up is http://localhost/myTestMap/map.html  with the module located in myTestMap/jsModules/myMap.js

[EvelynHernandez]

Thank you for ur demo app