Creating a Google Gadget with the ArcGIS JavaScript API in 5 minutes

Google Gadgets are small self-contained Web-based modules that plug into iGoogle. iGoogle is a framework, similar to a portal, which can display multiple gadgets in a tabular fashion. Similar Web 2.0 portal sites are Netvibes, My Yahoo, Pageflakes, and Windows Live. As opposed to traditional portal frameworks, these are very lightweight and do not require the extensive development of a portal version of your Web applications. Finally, the learning curve is minimal.

These services do not host the content or the Web application, rather they provide a framework to bring together Web applications from various sources. For example, a user can customize an iGoogle page to display local weather, movies, traffic conditions, gas prices, maps, to-do lists, emails etc.

So how does this relate to Web applications made using the ArcGIS JavaScript API?

iGoogle provides a nice framework to display various applications in a dashboard like fashion. Because iGoogle uses IFrames to display content from each gadget, and is a lightweight framework, you can port existing applications with minimal modifications.

You can create a gadget in 2 ways: by authoring a mixed-content XML file, or by simply pointing to an existing application’s URL. Using ESRI’s ArcGIS JavaScript API, you can author a mixed-content XML file that contains the HTML, JavaScript, and CSS code for a fully functional application. As for Web applications created using the ADF (either .Net or Java) you can use an IFrame in the mixed-content XML that points to the existing application’s URL.

Although the gadget is simple to create, you can use it to perform sophisticated tasks. For example, using various APIs exposed by ArcGIS Server, you can make use of geoprocessing services, as well as REST services that buffer, project, etc. You can also use third-party Javascript frameworks like Dojo and jQuery in your gadgets.

For more interaction and functionalities, Google offers a JavaScript helper library. This provides convenience methods and advanced tools that can do things like store and retrieve user personalization.

Tutorial

This tutorial shows how to create a simple URL-based gadget from an ArcGIS JavaScript API sample that calculates a service area.

Follow these steps:

1. Sign in to Google.com with your Google Account, then click on iGoogle on the top right corner of the page.
2. Add a new tab for developing gadgets and give it a name, for example “ArcGIS”. To add a tab, find the active tab, click the dropdown arrow, and choose “Add a tab”.

3. Add these two developer gadgets to your new tab. With the tab open, just click the links below and click “Add it now”:

   • Google Gadget Editor
   • My Gadgets

   After adding the tab and developer tools gadgets, your iGoogle page should look like this:
   
   
   

4. Copy and paste the code below into the Google Gadget Editor. Then click File > Save and save it as EsriServiceArea.xml.

   <?xml version="1.0" encoding="UTF-8"?>
   <Module>
   <ModulePrefs
       title="ArcGIS JavaScript API Service Area sample"
       height="750"
   />
   <Content type="url"
       view="canvas"
       href="http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/geoprocessor/gp_servicearea.html">
   </Content>
   </Module>
   

5. Now you’ll add that gadget URL to the My Gadgets tools to have a full preview. Here’s what you need to do to add your newly created gadget to your iGoogle tab:

   • Right click on the link with the name of this gadget file, in this case EsriServiceArea.xml, and copy the target URL.
     
     
     
     
   • Paste the URL into the My Gadgets input box and press the Add button. This will add the gadget to the current tab in your iGoogle. For development and quick previewing I would recommend not caching it so that your changes can be viewed instantly upon refresh.
     
     
     

You should now have a live preview of your gadget that looks something like this:

In the above image we gained some screen real estate by configuring the tab to have two columns instead of three (you can set this manually in the tab dropdown > Edit this tab). Also, thanks to the view=”canvas” attribute we included, you can optionally maximize this gadget to fill the whole page.

This shows how easy it is to port an existing application or Web page based on ArcGIS Server to a Google Gadget.

Contributed by Reiman Rabbani of ESRI Professional Services, Charlotte Regional Office