Skip to main content

Top 10 resources for ArcGIS API for JavaScript developers

If you’re building a Web application for ArcGIS for Server, you may be considering using the ArcGIS API for JavaScript. With the rapid adoption of JavaScript in all Web applications, it almost seems inevitable that you’ll be migrating yours as well. To help you get started with the ArcGIS API for JavaScript, here are the top 10 resources that helped me to get started and that I still use every day:

ArcGIS API for JavaScript Documentation: start reading the concepts and you will learn that the API is based on the Dojo framework.  Check out the samples which will demonstrate how easy it is to get started. You can even modify the samples using the Sandbox which will let you quickly write code and see the results immediately. Eventually you’ll need the API Reference to look up the specifics of a particular class or function.

How to Set Up a Proxy: the most common problem developers run into when building JavaScript API applications is accessing maps from ArcGIS for Server for the first time. Because of security restrictions for JavaScript, accessing resources on other servers has to be done through a proxy. The documentation explains how you can set up and use a proxy in your application.

Dojo: you can build solid applications with knowledge of only the JavaScript API without having to understand the underlying Dojo framework. However, when your application gets bigger and more complicated, or when you run into a problem and you’re in the middle of debugging, a good understanding of Dojo will prove helpful. It will make things much easier; you can start to modularize your application and add localization, theming, accessibility. Start with the Dojo documentation. If you have experience with jQuery, there’s a Dojo tutorial for jQuery developers. It’s as good as it is lengthy.

Dojo and AMD: Dojo is now moving to Asynchronous Module Definition (AMD). You’ll find that some of the API samples use dojo.require while others use Require. This might be confusing at first until you read a tutorial on Modern Dojo to learn more about AMD. There are also a couple of videos that help to explain it:
>>Video 2

JavaScript Documentation: Mozilla Developer Network (MDN) has some excellent documentation on JavaScript as a language. Also, on HTML, CSS, and other related Web technologies. You can use DevDocs to quickly search through API references for a large number of Web technologies and JavaScript frameworks. Or, try OverAPI for cheat sheets of all popular Web technologies.

Browser Dev Tools: Whether you’re using Firefox or Chrome, they both offer great debugging tools for developers. I personally prefer Firefox as a browser and a debugging tool. I enjoy using the Scratchpad for quickly trying some JavaScript, and I marvel at the 3D view when I’m writing HTML. In either browser, use Ctrl + Shift + i to bring up the developer tools. Get more info on Firefox Dev tools and Chrome. Google has a nice video course on how to use the Dev tools.

Fiddler: Most of the time when debugging JavaScript applications for ArcGIS, you’ll be working with the ArcGIS for Server REST API, and you’ll need to track requests and responses between the client and the server. Fiddler (free download) does this better than any other tools (including the browser tools which cover the basics of this very well). Read its documentation for better results.

ArcGIS for Server REST API: Your JavaScript application is a client to the ArcGIS for Server REST API. A large percentage of the issues you’ll run into could be resolved with better understanding of that API. This will also help you if you write clients using Flex, Silverlight, iOS, Android, Windows Phone, or WPF Runtime. They all use ArcGIS for Server through the REST API. Access the API Reference and Concepts.

Add Intellisense for ArcGIS JavaScript API in Visual Studio: if you’re like me; coming to JavaScript from a .NET background, you must be used to Visual Studio, and Intellisense is always a great helper in exploring new APIs. You’ll need the code assist files. I’ve written a blog post about how to set up Visual Studio to use this. The documentation also includes more information on how to set up your development environment for Visual Studio, Notepad++ and Aptana Studio.

Notepad++: For small to medium applications that I’m working on alone, I use Notepad++(free tool for Windows). It’s lightweight and very extensible. Use the Style Configurator (under the Settings menu) to pick a nice look and feel. Use the Plugin Manager (under the Plugins menu) to extend the editor. Here are the three plugins that help me the most. Note: use the Plugin Manager to download and install plugins. Here are some additional references:

JSTool: minify JavaScript code, view JSON files in a tree that is easy to navigate.

HTML Tag: great helper for writing HTML markup.

XML Tools: for those few times you’ll be working with XML files, this is a must.

This should help to get you started with the ArcGIS API for JavaScript. It should be fun, and if you run into problems, we’ve got you covered.

About the Author

Amr Eldib is a Developer Support Consultant for Esri Canada. As a Certified Web Application Developer Associate, he has 10 years of experience in both geographic information system (GIS) and software development. Amr has worked with a number of organizations in both Egypt and Canada on building and supporting GIS systems using Esri products. He’s been a blogger and active member in many developer communities throughout much of his career.

Profile Photo of Amr Eldib