Dijits
The ArcGIS API for JavaScript also provides Dojo widgets, commonly referred to as dijits. Many of these dijits offer a user interface (UI) with existing API modules working in the background. Using these dijits can cut development time by providing well-used and tested UI components. Dijit documentation also shows the CSS classes used to style the dijits, so that developers and designers can restyle them to fit the theme of the page. Let's take a look at the more commonly used dijits.
Measurement
The Measurement dijit provides a tool that can be used to measure distances, areas, and perimeters of locations on the map. It can also get the latitude and longitude of points on the map. The dijit uses the drawing toolbar to draw shapes on the map. From there, it sends a request to a GeometryService. Once the dijit has retrieved its results, it either displays the latitude and longitude of a point, shows the length of the line drawn on the map, or displays the area and perimeter of the polygon area drawn on the map.
The Print dijit provides a dropdown control that lets the user select from a predefined list of print templates and parameters. The developer configures the dijit with a link to an ArcGIS Server print service, and a list of predefined print parameters. When the user selects from one of the dropdown choices, the printTask incorporated in the Print dijit fires off an execute() method with the corresponding print parameters. When the printTask receives a success response from the server, the dijit provides a link to click on to download the printout.
If you need more granularity in your print control, this dijit is not for you. This tool is not meant to handle every combination of print parameters. If you're required to support everything from Tabloid ANSI B Landscape .pdf documents to Letter ANSI A Portrait .gif images, and everything else in between, you should consider developing your own tool.
Bookmarks
The Bookmarks dijit allows the user to save custom areas on the map. You can pre-assign bookmarked areas in the configuration file that the user can click and zoom to. They can also add areas to a list, edit the names, and delete the custom areas they want to zoom to. The Bookmarks dijit does not save the map state, meaning that the layers that were turned on previously won't be automatically switched, and the selected graphics on the map may not be there.
Basemaps
The ArcGIS API provides a couple dijits for changing your basemaps. This can be useful when the data blends in or doesn't look right against the current background. The first tool the API provides is a BasemapToggle, which lets you switch between two basemaps. The second is the BasemapGallery, which offers more choices. Both provide thumbnail photos and captions describing the basemaps.
The BasemapGallery can be customized to show your custom basemaps, or show basemaps from ArcGIS Online. When constructing the BasemapGallery, the choice of incorporating ArcGIS Online basemaps can be modified by setting the showArcGISBasemaps option to true. Remember the rule about tiled map services, however. The ArcGIS Online basemaps are in Web Mercator Auxiliary Sphere (WKID 102100), which is the same projection as Google and Bing Maps. If your data is not in the same projection, you could have issues with accuracy and/or missing tiled layers.
Popups and InfoWindows
Popups and InfoWindows provide a small window to view data about features on a map. There are four varieties of the infoWindows available: The legacy version that was replaced in version 3.4, a smaller version of the legacy infoWindow called InfoWindowLite, the current default popup control, and a lighter mobile version of the current popup.
The current popup exposes a number of elements that you can tap into to customize the user experience. The popup can select multiple features, and holds the graphics content of the selected items in a features array. It also has a paging control that lets the user click to see what other features have been selected. It also keeps track of which feature is selected through a selectedIndex parameter.
Editing
The editing dijits provide UI components and tools that you can use to edit features on the map. These tools work with editable FeatureLayers, allowing the user to edit shapes, add features on the map, change attributes, and save all those changes to the server. Let's look at some of the components that make up the editing tools.
The AttributeInspector allows the user to edit graphic attribute data from an HTML form. The inspector connects to the FeatureLayer and displays data on one of the features that is selected. The inspector also provides a previous and next button to search through the selected Features. The AttributeInspector also supplies a delete button to delete selected features.
The inspector then builds a form based on the requirements of the features. Dates will be given calendars, and domain-bound fields will show an HTML Select element with a dropdown list of domain choices. The user can type in and edit data, and the data can be saved server-side.
The TemplatePicker provides a selector to select what feature types and subtypes you'll be editing. When a featureLayer is published as editable, it has to expose the symbology and preset styles through the REST service. The TemplatePicker then reads the exposed symbology and feature setup data to create a grid of valid editable choices. The user clicks on the templates like a button, and the symbology is passed to a drawing tool of some kind.
The ArcGIS API provides an all-in-one Editor dijit to provide some basic editing needs. The dijit incorporates the TemplatePicker to select features types and subtypes to draw from. It also has a toolbar with various tools, pertaining to the editable features on the map. So, when you select a green line, the tool will show line-related drawing tools.
The Editor also generates an AttributeInspector in the map.infoWindow. You can edit field values from the popup. It is up to you how you implement saving changes.
The editor also provides undo and redo buttons in the toolbar. If you accidently delete a feature you wanted to save, you can use the undo button. If you realize that you really wanted to delete that feature, you can click the redo button.
Now that you have been exposed to most of the major features of the ArcGIS API for JavaScript, you are better prepared to write some more code using the API.