An Introduction to the ArcGIS Server JavaScript API

Posted on August 11, 2008. Filed under: Uncategorized |

I’m starting a new series of posts today covering the new ArcGIS JavaScript API and the ArcGIS JavaScript Extension for the Google Maps API.  I am particularly interested in the integration of ArcGIS Server with Google Maps and Google Mapplets so my focus will be oriented toward that particular subject.  Today I’m going to introduce the ArcGIS JavaScript API and show you how easy it is to create simple web mapping applications with this API.  Future posts will focus more on the integration of ArcGIS Server with Google Maps and Mapplets.

Introduction
According to ESRI the ArcGIS JavaScript API is “a browser based API for developing high performance, easy to use mapping applications.  The API allows you to easily embed maps in your web pages.”  Carla Wheeler, ArcWatch Editor, gives a great overview (I’ll link to the article when ESRI gets their site back up) of the JavaScript API so I’m not going to go into great detail on the high level details of the API.  With some understanding of HTML and JavaScript it becomes fairly simple to create web mapping applications and mashup content from other web services.  Previous to the release of the JavaScript API, the .NET and Java Web ADFs were (and still are) available, but both require considerable programming skills to implement.  As I’ve mentioned before, I suspect that the new JavaScript API and the extenders for Google Maps and Virtual Earth will bring a lot of renewed interest to ArcGIS Server, and will undoubtedly bring a lot of new developers to the platform.

Getting Started with the JavaScript API for ArcGIS Server – The Basics
For those of you who are familiar with writing Google Maps API applications you will find that creating an application with the ArcGIS Server JavaScript API is remarkably similar in terms of how you structure the application code.  Just as with the Google Maps API, you go through a series of four steps for initializing an ArcGIS Server application.  Those four steps include the following:

  • Add a reference to the ArcGIS JavaScript API in a <script> tag as well as a reference to the dojo stylesheet

  • Create a <div> element to hold the map

  • Write JavaScript to create the map

  • Initialize the map ojbect from the dojo.addOnLoad method 

Obviously you’ll also want to add some layers to your map and this can be accomplished through either the ArcGISTiledMapServiceLayer or ArcGISDynamicMapServiceLayer.  Below you’ll see how code examples for both types of layer.

The Result
The result of these few simple lines of code can be viewed here.  I’d like to point out two additional things that you may have noticed.  First, we did not specify any code to add map navigation controls or functionality.  This is because the navigation tools are built into the API including a zoom control slider and the ability to use your mouse and keyboard for panning and zooming.  I should also point out that it is not necessary to have ArcGIS Server loaded on your server.  You simply need access to an existing map service somewhere on the web.  In this case, we’re accessing web mapping services provided by one of ESRI’s sample ArcGIS Servers.

To view the entire source code of this simple application, right click the page and select View Source.  Now, this is about as simple as an ArcGIS Server JavaScript application can get, and there is a lot more that you can do with the API.  We’ll cover some of the additional functionality provided by the API in coming posts, but hopefully you now have a grasp of how easy it is to develop these applications.

Resources
ArcGIS Server Resource Center
ArcGIS JavaScript APIs
ArcGIS JavaScript API
ArcGIS JavaScript Extension for the Google Maps API
Sample Server 1
Sample Server 2

About these ads

Make a Comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Liked it here?
Why not try sites on the blogroll...

Follow

Get every new post delivered to your Inbox.

Join 46 other followers

%d bloggers like this: