Search code examples
javascripthtmlarcgisesriarcgis-js-api

How to know which part of the javascript require tag to add my function in?


Hi I am trying to add in a locate button for my map but I have no idea which part of my javascript code to add, in the require tag. e.g. after esri/dijit/Legend or what? Below's my code.

 <script>
    require([
      "dojo/parser",
      "dojo/ready",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/dom",
      "esri/map",
      "esri/urlUtils",
      "esri/arcgis/utils",
      "esri/dijit/Legend",
      "esri/dijit/Scalebar",
      "dojo/domReady!"
    ], function (
      parser,
      ready,
      BorderContainer,
      ContentPane,
      dom,
      Map,
      urlUtils,
      arcgisUtils,
      Legend,
      Scalebar
    ) {
        ready(function () {

            parser.parse();

            //if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
            //arcgisUtils.arcgisUrl = "http://pathto/portal/sharing/content/items";
            arcgisUtils.createMap("7f975854312c4ca9a50aa5933c4a782e", "map").then(function (response) {
                //update the app
                dom.byId("title").innerHTML = response.itemInfo.item.title;
                dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

                var map = response.map;

                //add the scalebar
                var scalebar = new Scalebar({
                    map: map,
                    scalebarUnit: "english"
                });

                //add the legend. Note that we use the utility method getLegendLayers to get
                //the layers to display in the legend from the createMap response.
                var legendLayers = arcgisUtils.getLegendLayers(response);
                var legendDijit = new Legend({
                    map: map,
                    layerInfos: legendLayers
                }, "legend");
                legendDijit.startup();
            });
        });
    });
</script>

Solution

  • You can add items into the require array in any order with two caveats:

    1. You must add the modules return value in functions parameter list in the same order
    2. It must go before any items that you aren't including a return value in the functions parameters for, unless you also don't need it's return value

    So, in other words... don't put it after domReady! as there isn't a return value for this in the functions parameters. For example, put it between ScaleBar and domReady and then add the return value after ScaleBar in the functions parameters:

    require([
      "dojo/parser",
      "dojo/ready",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/dom",
      "esri/map",
      "esri/urlUtils",
      "esri/arcgis/utils",
      "esri/dijit/Legend",
      "esri/dijit/Scalebar",
      "esri/dijit/LocateButton",            <-- Here
      "dojo/domReady!"
    ], function (
      parser,
      ready,
      BorderContainer,
      ContentPane,
      dom,
      Map,
      urlUtils,
      arcgisUtils,
      Legend,
      Scalebar,
      LocateButton                          <-- Here
    ) {
    

    But as said, the order isn't important. You could have it as the very first item in the require array as long as it was also the very first item in the functions parameter list.