Skip to content

Working with the Code

Maryland Geographic Information Office edited this page Jul 6, 2015 · 10 revisions

Managing scope

There are several methods to force Javascript to operate as an object oriented language, including additonal libraries like CoffeScript and TypeScript. Dojo uses serveral libraries to manage scope. Use dojo/base/lang (i.e "lang.hitch(this, {f})") for callbacks and event handlers to make sure they run in the scope of your module. See the Dojo Documentation

Configuring the Application

For configuring the application locally, see:

For registering and configuring your application as a template on ArcGIS Online visit the ESRI Help To match your applications config options and the available config options in ArcGIS Online use the file config.js and follow the documentation.

Creating new Modules

Browse the code for help when working with Dojo, AMD, and the ArcGIS API. Many issues might have already been encountered.

  • When creating a new module, considering starting by copying/pasting an existing similar module.

  • To add a new left pane tab, reference the comments in the tabmanger.js module

  • To add a new map tool, reference the comments in the toolmanger.js module

  • When creating a custom module for your application, the custom tabs for the Capital Budget fork can serve as a good reference. See:
       iMap Capital Budget Custom Modules
       iMap Capital Budget tabmanager.js

  • Include environment.js in your module to gain access to browser/device settings. It is a singleton, so can be called directly, without creating a new instance. See: environment.js

  • Dojo/has is another good module for detecting capabilities of the browser: http://dojotoolkit.org/reference-guide/1.8/dojo/has.html

  • The ArcGIS Map object (esri.map) can be referenced directly by any module by including the maphandler.js in your module. It is a singleton, so can be called directly, without creating a new instance. See: maphandler.js

Styling using CSS

Get Started with CSS

Most of the functional styling for the application is located in main.css. This file sets the layout parameters, general behavior, and universal styling themes on all components in the page. It overrides other css from .claro and .esri. Additional styling is handled by the css “themes” which generally set the color and background gradients of elements that display colors relating to the set theme in the app config or what has been selected in AGO There is an additional css file called ie.css that handles special CSS properties to ensure compliance with Microsoft’s Internet Explorer. Several modules may contain their own css files that are specific to the contents of that widget’s layout and behavior and will only be downloaded if the widget is instantiated

Additional Documentation


Clone this wiki locally