User expectations for web mapping applications have changed dramatically in the past few years thanks largely to Google Maps and Microsoft Virtual Earth technologies which brought “Web 2.0” to the masses and forever changed our expectations of how these applications should look, perform, and access data. With the advent of “Web 2.0” your applications must meet certain expectations including sleek interface controls, a better user experience driven largely by asynchronous data processing and client-side scripting, drag and drop capabilities, and the ability to combine or “mashup” multiple data sources into a single application. A number of JavaScript toolkits including Dojo, jQuery, Yui, Mochikit, and many others have been developed to enable these capabilities. ESRI recently released the JavaScript API for ArcGIS Server which was built on top of the Dojo toolkit and enables developers to take advantage of the capabilities provided by this JavaScript toolkit. Dojo is also a highly flexible toolkit that allows you to pick and choose the pieces of the toolkit that best fit your needs. According to Jayant Sai of ESRI, “We like the fact that our users can use the whole Dojo toolkit to build their next generation web 2.0 mapping application, or use just our mapping components, without really getting into the hardcore JavaScript pieces of the toolkit.”
Today we are starting a series of posts concentrating on the use of Dojo for building web mapping applications. We’ll not only examine how Dojo is used with the ArcGIS Server JavaScript API, but you’ll also see how you can use this toolkit with other mapping API’s including Google Maps. We’ll start with a simple overview of Dojo and how it can be used in your web based GIS applications.
What is Dojo?
Dojo is an open source JavaScript toolkit that enables you to write robust, efficient applications without the need for a client-side plugin or server-side component. There are of course many different types of web browsers, and each interprets JavaScript differently. Dojo helps smooth out these differences and resolve any inconsistencies between the different types of browsers. From an application developer perspective, tookits like Dojo result in a simpler development process that does not require browser dependent code. These applications are also easier to test, debug, and deploy in a production environment.
Dojo is a collection of static, client-side JavaScript scripts that does not require a client-side plugin nor does it require the use of a server side component. It is a set of open source tools that helps you build better browser-based applications by resolving inconsistencies between various browsers, expanding the capabilities of the web browser, provides for the integration of user interface controls, and functions primarily through client-side JavaScript.
What does it do?
Dojo is perhaps best known for the HTML user interface components, called Dijits, which you can plug into your application. You can see some examples of these components by reviewing the Dojo Feature Explorer provided by DojoCampus.org. This alone would be good reason to use Dojo, but this toolkit provides so much more. In addition, to the user components Dojo also provides the following:
- Fixes browser incompatibilities and memory leaks (no more browser dependent code)
- Normalizes the browser event system across browsers
- DOM utilities
- Build system that divides your code into small, manageable chunks for development and a packaging system for optimal download performance
- Internationalization, localization, and accessibility
- Support for asynchronous programming
- Remote scripting with XHR, script, and iframe
- Drivers for accessing data in JSON, XML, CSV, and other formats including web services such as Flickr and Picasa
Three Projects (Dojo, Dijits, DojoX)
What we call Dojo is actually three projects: Dojo, Dijits, and DojoX.
Dojo core is the foundation for all three projects and handles browser normalization, fixes browser incompatibilities, allows DOM querying, remote scripting, drag and drop, data store API, localization and internationalization, Firebug integration, cookie handling, accessibility, and much more.
Dijit includes the Dojo framework along with roughly 40 HTML user interface widgets including buttons, text boxes, grids, tree views charts, color pickets and many others. Tundra is the default CSS theme for Dijit and is designed to blend into existing color palettes and design. An additional theme, Soria, is available as well and you can certainly build your own if neither the Tundra or Soria themes fit your needs.
DojoX are Dojo extensions and includes projects such as the grid widget, a graphics library, charting, image handling and more. These often include some very sophisticated projects which are not necessarily as stable as what you’ll find in Dojo or Dijit.
ESRI and Dojo
The ArcGIS Server JavaScript API, released with ArcGIS Server 9.3, sits directly on top of Dojo providing developers with access to Dojo user interface widgets and all the other benefits of Dojo core through a simple reference in your web application.
Since Dojo is included with the ArcGIS JavaScript API you do not need to reference the Dojo API to get access to its functionality. When you include the following references to the ArcGIS Server JavaScript API, you also get access to the full Dojo toolkit. There is no need to download, host, or even reference the Dojo API.
In fact, the ESRI zoom slider was built with the Vertical Slider Dijit.
In coming posts we’ll take a look at how you can integrate a number of other dijits into your web applications.
Using Dojo with Google Maps API
You can also take advantage of Dojo when creating Google Maps API applications (this applies to other JavaScript mapping API’s as well). Although the Google Maps API isn’t built on top of Dojo like ESRI’s ArcGIS Server JavaScript API its quite simple to take advantage of its functionality. In this case you have several options. The easiest of which is to simply reference the publicly available Dojo hosted on the AOL Content Delivery Network (CDN). We’ve done just that in the code example you see below.
Your other options for downloading Dojo to your local environment include:
- You can also download the current release to your local environment through http://dojotoolkit.org/downloads
- Get current, previous, binary, and source builds from http://download.dojotoolkit.org
- Anonymous checkout from SVN repository at http://svn.dojotoolkit.org/src
Conclusion
Whether you’re looking to build a great “Web 2.0” interface for your mapping application or simply take advantage of its developer efficiencies, Dojo is a great JavaScript tookit for accomplishing
In the next post in this series we’ll take a closer look at the Dojo toolkit and how it is used in ArcGIS Server JavaScript applications.
