Check it out live : http://sathyaprasad.appspot.com/swipe.html

At first it might sound like not a big deal, but the fact is that no such tool existed till now for the ArcGIS JavaScript API (to best of my knowledge none exists for other JavaScript Mapping API’s too) makes it a big deal. After seeing the New York Times Flash based swipe tool application (link) to see the after and before images of the recent crisis in Haiti, it was time to get a swipe tool for the JavaScript API developers.

Did I mention that this tool just uses JavaScript and CSS. Challenge was to make it perform, work on all supported browsers, configure to work with any layer (tiled or dynamic or graphics), have a decent UI (like a slider) and not make any extra map image requests and also allow users to zoom/pan while swiping (believe me this was a hard one).

I did go through the challenges one at a time and was able to get the tool to do all the things. Well you will not believe how simple the solution was. The thinking was all the images from the layers are on the map, just clip it.  CSS does support “clip” and this tool makes full use of that. Check out the code for more details.

Hope you like this tool and use it in your applications.

If you go to my homepage http://sathyaprasad.appspot.com you can see how I have used the smaller version of the sample inside of a page using an iframe to locate the website visitors. Feel free to copy the code and use it in your site.

Check it out: http://sathyaprasad.appspot.com/openlayers.html

I started the ArcGIS Manager Service to use the Restful Services Directory and to my surprise it did not work. I have installed ArcGIS Server 9.3.1 for a few weeks now and was working fine.

I tried the following url’s:

http://localhost:8399/arcgis/rest – restful services direcoty – did not work

http://localhost:8399/arcgis/services?wsdl – services catalog soap end point – did not work

http://localhost:8399 – directory listing of  “C:\Program Files\ArcGIS\java\web_output” – did not work

Wearing my trouble shooting hat, I checked the log files at location: “C:\Program Files\ArcGIS\java\manager\service\logs”

1. manager_stderr.txt – did not indicate any issues

2. managerappserver0.log – here I found the following error:

Jun 3, 2009 12:46:00 PM org.apache.catalina.core.StandardServer await
SEVERE: StandardServer.await: create[8300]:
java.net.BindException: Address already in use: JVM_Bind
at java.net.PlainSocketImpl.socketBind(Native Method)
at java.net.PlainSocketImpl.bind(PlainSocketImpl.java:359)
at java.net.ServerSocket.bind(ServerSocket.java:319)
at java.net.ServerSocket.(ServerSocket.java:185)
at org.apache.catalina.core.StandardServer.await(StandardServer.java:346)
at org.apache.catalina.startup.Catalina.await(Catalina.java:600)
at org.apache.catalina.startup.Catalina.start(Catalina.java:560)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at java.lang.reflect.Method.invoke(Method.java:585)
at org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:271)
at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:409)


The error message indicates that port 8300 was blocked/taken in my machine.

The cuplrit was the Aptana IDE which was open and the port 8300 was used up.

Digging deeper: Aptana IDE is bundled with the Jaxer support. Jaxer Console for internal Jaxer Server uses a free port between 8300-8500. It so happened that Since ArcGIS Server Manager was not yet started when I opened Aptana IDE, it used the 8300. So the order matters. Could’nt find a simple way to change the port range within Aptana. This could be fodder for a different post.

Incase you are wondering why is ArcGIS Server Manager using port 8300 (the well known ports are 8399 and 8099) then the answer is here “C:\Program Files\ArcGIS\java\manager\service\tomcat\managerappserver\conf\server.xml”. The manager appserver (tomcat) uses port 8300 as shutdown port. And yes, you can edit shutdown port from 8300 to 8299 (or any other unique port)  and restart the ArcGIS Server Manager service.

Easier Solution would be to close Aptana IDE. Restart ArcGIS Server Manager (manager.exe) service and then open Aptana IDE.

Voila, all back to normal … back to work now …

Let me know if anyone else had the same issue.

Note: This post is not applicable to ArcGIS Server .Net

This post should help you get the sample running in no time (almost):

I am using Eclipse (screen-shots show version 3.4/Ganymede, 3.3/Europa should work as well) as my IDE and ArcGIS Server 9.3.1 Java ADF libraries.

1. Download the sample on to the disk:

The sample comes with “json.jar” library, as shown in the screen-shot here:

2. Create a new project in eclipse

3. Import the source files and web-inf folder from the sample to the project

As you see, IDE complains that there are missing imports. We are going to fix them in step 4

4. Copy (drag and drop) the following libraries into the project from the Web ADF library collection
Note: You do not need ArcGIS Server to run this sample, just the Java Web ADF libraries is good. You can copy the required libraries from other machine if needed

After completing steps 3 and 4 you project should look like:

5. Run the web app (Assumption is that you have eclipse configured with web server like tomcat or jetty. I am using tomcat 6)

6. Optionally, you can export this into a war file for deployment

Here are quick links to the sample :

Resource Center – Code Gallery Post

View it live link

Rate the sample and post any comments directly at that site or here in my blog. Based on the comments I will add more functionality to the infoTip class.

1. map.graphics returns the graphics layer
2. map.graphics.graphics returns the array of graphic elements (geometry, symbol, attribute, infotemplate) added to the graphics layer

To remove all graphic elements in the graphic layer
map.graphics.clear();

To show/hide specific graphic element
map.graphics.graphics[index].show();
map.graphics.graphics[index].hide();

To check if any specific graphic element is being shown or not:
// 'none' is hidden and 'block' is visible
map.graphics.graphics[index].getDojoShape().rawNode.style.display

Loop through all the graphic elements
var graphics = map.graphics.graphics;
for (var i=0; i< graphics.length; i++)
{
// do something with graphics[i]
}

even better


dojo.forEach(map.graphics.graphics, "console.log(item.getDojoShape().rawNode.style.display)");
//or
dojo.forEach(map.graphics.graphics, "console.log(item,index,array)");
//or
dojo.forEach(map.graphics.graphics, function(item){//item is a graphic element });


Note: @version 1.4 you will have ability to add multiple graphics layers (in addition to the default graphics layer) and can control the stack order (z-index).

Blog talks about how to use Dojo Dijits – BorderContainer (dijit.layout.BorderContainer) and ContentPane (dijit.layout.ContentPane) to design your layouts for application. I have created a bunch of sample layouts with most of the commonly used layouts, check out the links below.

You an try the live sample at: http://serverapps.esri.com/templates/index.html

You can download the samples at: Resource Center Code Gallery

Javascript

Essential Javascript – A Javascript Tutorial

http://www.comptechdoc.org/independent/web/cgi/javamanual/

http://www.w3schools.com/jsref/default.asp

http://javascript.crockford.com/

Dojo

http://dojotoolkit.org/key-links

Dojo Feature Explorer

http://www.sitepen.com/labs/dojo.php

http://archive.dojotoolkit.org/nightly/checkout/ (Great source for learning how to use dijits and dojox widgets, check out the tests folder)

http://www.roseindia.net/dojo/

10 helpings of Dojo goodness