2

I am trying to create a demo app to better understand how to minimize my code by creating more files.

I am using the base starter app sample on one js file and trying to add a widget on another. The code works on the same file but after the divide its breaking.

I added a dojo config, a dojo-ready function and a new define in the widgets.js file.

I am using "define" and not "require" on the widget.js because it's dependent on the main but not sure if it's ok because it will only be called once.

This is how my app looks:

modules
   -widgets.js
index.html
main.js

index.html

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script type="text/javascript">
    dojoConfig = {
      async: true,
      packages: [
        {
          name: "widgets",
          location: "modules/widgets" // or wherever you keep your custom code
        }
      ]
    };
  </script>
  <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.18/"></script>
  <script type="text/javascript" src="main.js"></script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

main.js

require([
  "esri/Map",
  "esri/views/MapView",
  "dojo/ready",
  "widgets/searchWidget"
], function(Map, MapView,ready) {
    ready(function () {


    var map = new Map({
        basemap: "topo-vector"
    });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80500, 34.02700], // longitude, latitude
      zoom: 13
      });
      
    var widget = new searchWidget(view)
     });


});

widget.js

define(["esri/widgets/Search"], function(Search) { 
var search


return{
      
    searchWidget: function(view){

        search = new Search({
            view: view
          });

        view.ui.add(search, 'top-right');
    }
}


 });
2

you can define dojo packages in main.js, so index.html looks like this :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/css/main.css">
  <script src="https://js.arcgis.com/4.18/"></script>
  <script src="main.js"></script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

plus, you have to fix the order of your modules in main.js :

var loc = location.pathname.replace(/\/[^/]+$/, '');
require({
  packages: [
    { name: "modules", location: loc + "/modules"}
  ]
},[
  "esri/Map",
  "esri/views/MapView",
  "modules/widgets/MySearchWidget",
  "modules/config",
  "dojo/ready"
], function(
  Map,
  MapView,
  MySearchWidget,
  config
) {
  var map = new Map({
    basemap: config.basemap
  });

  var view = new MapView({
    container: config.viewDiv,
    map: map,
    center: [-118.80500, 34.02700], // longitude, latitude
    zoom: 13
  });
  
  var widget = MySearchWidget(view);
});

now, your module file is named MySearchWidget.js and is located in modules/widgets/ and it returns a class that creates a new esri's Search widget and places it on the top right of the view you passed as a parameter in main.js

define([
  "dojo/_base/declare",
  "esri/widgets/Search"
], function(
  declare,
  Search
) {
  return declare( null, {
    constructor: function( view ) {
      var search = new Search({
        view: view
      });
      view.ui.add( search, "top-right" );
    }
  });
});

as an example, i've added a simple config.js that is placed in /modules and is used for the map and the view :

define( [], function () {
  return {
    basemap: "topo-vector",
    viewDiv: "viewDiv"
  }
});
2
  • thank you! this is very extensive. I read on the creating classes documentation that the dojo/_base/declare was removed from the API. developers.arcgis.com/javascript/latest/guide/… Should I use the accesor class instead? Will this affect the way I import my classes?
    – segev
    Jan 21 '21 at 17:34
  • Have you any idea how to implement something like that inside ReactJS ? Jan 11 at 10:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.