Friday, July 16, 2010

An OpenLayers Map Widget

As part of my contract with NOAA I created a reference map widget which we use to allow users to select lat/lon rectanges, lat and lon lines and points.  We have a (unfortunately) long history of building map widgets to allow users to drive our interface.  The first (and best in my opinion) was a Java applet developed by Jonathan Callahan.  It was extremely functional and intuitive.  The issue was browser compatibility.  When we started to rely more and more on JavaScript to drive other parts of the user interface, the job of transferring information back and forth between the JavaScript and the Java applet proved to be a browser compatibility nightmare we never full solved.  And as applets fell out of favor we moved on.

At the same time as the applet was in active use, we built (credit for the good parts goes to Joe Sirott) a server-side map that required two clicks to mark a rectangle.  Joe's implementation had a nice Active X interactive selection, but again we could not use it on a enough browsers to deploy it.  Joe has since built other nice map widgets.  I built the "two-click" version.  It worked.  On all browsers, but as one user put it so eloquently: "It's not draggable, dude".

Next up was a long experiment with Google Maps.  I built a widget that allowed click, hold and drag drawing of rectangles, horizontal and vertical lines using markers on the corners and mid-points.  It worked.  Sort of.  I could get it to work fine, but I was slow and patient.  When users used it the response was so sluggish they the were immediately frustrated.  Another killer was the projection.  We deal mostly in global data on a rectangular equal-area projection.  The Google maps modified Mercator looked terrible on the global view and the selection scaling when dragging a rectangle above 60 north was dramatic and disconcerting.

Enter OpenLayers, the GWT-OpenLayers project and a client that said rightly that the Google Maps implementation was s!@$.  I built yet another map widget.  I think it works well.  Editing the selection is not as slick as was with the Java applet and the strict modal interface is not ideal, but I haven't heard of any browser compatibility issues.  And eliminating those was the goal all along.

The OL Map Widget is available on Google code.  There is an example deployment for JavaScript and a deployment using GWT and a Flash-based tutorial video there along with the code.

No doubt this would be more interesting (slightly less boring?) if I had links to all the previous map implementations, but it seems like too much to figure out how to find or deploy stable examples of each.


  1. Nice post,i found lot of information regarding gis. I updated my knowledge with this can help me to crack GIS jobs in Hyderabad.

  2. Great Article android based projects

    Java Training in Chennai

    Project Center in Chennai

    Java Training in Chennai

    projects for cse

    The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training