ArcGIS Server Sample Flex Viewer: TwitterFeedWidget

I have been thinking about how Twitter could be used to enhance the capabilities/user experience of a web mapping system and came op with some decent stories. The first would be providing users with access to a feed dedicated to the application which contains information about it including updates, news, changes, downtimes, etc. The second would be users who wish to perform searches of Twitter content that may be related to the map and eventually, overlaying geolocated Tweets onto the map. These (and the fact that I just wanted to poke around the Twitter API) gave me enough of an excuse to start messing with the Twitter API. I ended up with a simple little widget that allows users to search for tweets within a specified geographic location, in this case, a circle. Nothing earth shattering but still maybe somewhat useful. Before giving you some of the nuts and bolts of this, I want to be sure and reference the materials I used:

• Flex Cookbook Entry: Display a Twitter Feed
  
• Flex Cookbook Entry: Accessing Resources CrossDomain
• Free Twitter Icons
• Custom Draw with Circle Tool
• Distance Calculations website
• Flex XML Syndication Tools
• Flex CoreLib Utility
  

Some Details on how it works.
It is really pretty simple. The user is able to draw a circle on the map and any tweets that originated from within that location based on the Twitter user's location property are returned as an ATOM Feed. The processes uses the Twitter API geocode parameter where a lat, long and radius of a circle are needed. The widget obtains the lat, long, and radius values from the circle tool. I added a coordinate transformation function to the Circle Tool component to convert the distance units (radius of the circle) to miles from decimal degrees. I used the Great Circle Distance Formula. The ATOM feed is parsed using the Flex XMLSyndication package and is validated using the Flex CoreLib Utility Package (see links above).

Proxy Server
As with any application making cross-domain asynchronous data requests, a proxy server is needed to "fool" the browser security settings. Flex has a nice framework for bypassing this. If the feed host contains a crossdomain.xml file that allows cross-domain access, you are good to go. However, Twitter locks this down (Twitter crossdomain.xml). I have included a proxy server implemented in Java within the package. It is NOT PRODUCTION quality but will get you started. There are other implementations that are easier out there. Have a look at the resources I sited for some other examples.

Known Issues and Limitations
Simply put, there are several limitations with this that make it, lets say, less than production quality. I hope to rectify these soon. These include:

• I haven't tested the feed results very well. The widget catches feeds that are empty which is good but the way I did this is kind of sloppy. I won't go into it here but if you have questions, I can elaborate.
• The coordinate transformation for the distance units (radius conversion from DD to miles) I am using is very rough but good enough for this use.
• It doesn't play very nicely with the map action and map navigation state of the Sample Flex Viewer (SFV). Given that the draw circle component wasn't designed for use with the SFV, it isn't integrated very well with the event driven model the SFV uses. Not to say it isn't a nice component because it is. Using it in the Sample Flex Viewer is just a bit of a stretch. There are alot of issues with this but from a use perspective, users have to keep clicking on the draw circle tool after each use and then state defaults back to the default map navigation (pan). Another problem is if the user trys to change the map action or map navigation state (by selecting another component that does so), during the middle of component use, bad things happen. One of the reasons for this is that I didn't want to make changes to the core by adding custom events, etc. However, I am hopeful that I can improve this without making changes to the core and will look into it.
• Improvement can be made to the tweet results listing (links to profile, user timeline, etc...).
  
• Alot of other testing needs to occur as well. Just running out of time right now.
  

Webmap of US Oil and Gas Production

The USGS Energy Resources Program recently upgraded the US Oil and Gas Production map service for use in their new web mapping platform called Envision which is based on the ArcGIS Server Sample Flex Viewer. The ERP is actively updating the system to deliver all legacy map services and has recently upgraded the US Oil and Gas Production map (By Laura R.N. Biewick USGS DDS 69-q)

ArcGIS Server Sample Flex Viewer: Adding ArcIMS Image Map Service Support

Adding ArcIMS image map service support to the Sample Flex Viewer (SFV) is rather simple and handy for those of you who might have loads of legacy services that might not make the AGS migration any time soon. It is simply a matter of extending the ConfigManager class and MapManager class. You will then need to make a slight modification to any ArcIMS elements in the config.xml file.



Extend the ConfigManager class by adding the following:



//map

var configMap:Array = [];

var mapserviceList:XMLList = configXML..mapservice;

for (i = 0; i < mapserviceList.length(); i++)

{

var msLabel:String = mapserviceList[i].@label;

var msType:String = mapserviceList[i].@type;

var msVisible:Boolean = true;

if (mapserviceList[i].@visible == "false")

msVisible = false;

var msAlpha:Number = 1;

if (!isNaN(mapserviceList[i].@alpha))

msAlpha = Number(mapserviceList[i].@alpha);

//retrieve newly added arcims service host attribute from map service entry

var msHost:String = mapserviceList[i].@host;

var msURL:String = mapserviceList[i];

var mapservice:Object =

{

label: msLabel,

type: msType,

visible: msVisible,

alpha: msAlpha,

url: msURL,



//add newly added host attribute to mapservice object for ArcIMS Map Services

host: msHost

}

configMap.push(mapservice);

}

Continue by extending the MapManager class as follows:

for (i = 0; i < configData.configMap.length; i++)

{

var label:String = configData.configMap[i].label;

var type:String = configData.configMap[i].type;

var url:String = configData.configMap[i].url;

var visible:Boolean = configData.configMap[i].visible;

var alpha:Number = Number(configData.configMap[i].alpha);



//new variable for collecting host attribute for arcims services

var host:String = configData.configMap[i].host;



switch (type.toLowerCase())

{

case "tiled":

{

var tiledlayer:ArcGISTiledMapServiceLayer = new ArcGISTiledMapServiceLayer(url);

tiledlayer.id = label;

tiledlayer.visible = visible;

tiledlayer.alpha = alpha;

map.addLayer(tiledlayer);

break;

}

case "dynamic":

{

var dynlayer:ArcGISDynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(url);

dynlayer.id = label;

dynlayer.visible = visible;

dynlayer.alpha = alpha;

map.addLayer(dynlayer);

break;

}

case "arcims":

{

var arcimslayer:ArcIMSMapServiceLayer = new ArcIMSMapServiceLayer(host,url)

arcimslayer.id = label;

arcimslayer.visible = visible;

arcimslayer.alpha = alpha;

arcimslayer.imageFormat = "jpg"

map.addLayer(arcimslayer);

break;

}

}

}

The entry for the config.xml file would then be something like this:

<mapservice label="2008 Province 31 Assessment" type="arcims" visible="false" alpha="0.7" host="http://certmapper.cr.usgs.gov">prov31_2000</mapservice>

where the value of the element is the map service name. One thing to keep in mind with this is that some of the FLEX api features are not supported for ArcIMS image map services including the identify task. There is also some info on this in the ESRI user forums that may also be helpful.

AIR/Flex vs. Silverlight Debate

Now that the ArcGIS Server development platform has finally come of age, many are asking: which platform do I use? There are a number a criteria that enter into this equation and I think others have done a good job of defining these so I will not be discussing them here. The intent of this post is simply to provide you with some of the resources I have found that evaluate at least the 2 RIA platforms ESRI is now providing: Flex and Silverlight. There is alot of chatter/bashing going on and it is often hard to sift through some of the biases so the following are the most resent/unbiased postings I could find. For what its worth, I think they are both great and good for one another. The harder they compete, the better off we all are. Heck, I hope we even start discussing JavaFX in the near future.

The Battle for the RIA Throne: Flex vs. Silverlight
Flash vs. Silverlight: What Suits Your Needs Best?
Video: Air/Flex Silverlight Debate: MS and Adobe evangelists go head to head.

Initial ArcGIS Server Flex API Map Viewer Rollout

The USGS Energy Program is beginning to rollout their latest online mapping application using ArcGIS Server and the Flex API. It is pretty vanilla right now but includes some nice features under the hood including:

1. URL parameter interface
2. Live Map classification widget
3. Separate Map Navigation
4. US Geologic Energy Resources Summary Widget
A whole set of nice features are in the oven including:

1. Metadata and static legend integration
2. Access to over 100 different services
3. Custom widgets based on content type.

Formatting Dates In Flex

If you have been working with any of the new AGS apis (at least Flex or DOJO in my experience), you have probably encountered one of these:

Mon Dec 31 17:00:00 MST 2001

This is the date string returned within a query result featureSet.

var assessmentDateString:String = featureSet.attributes[0][assessmentDateLabel];

Not very usable really. However, there is hope! Flex has a nice little class called DateFormatter. DateFormatter does alot of stuff but what is really handy is its ability to parse pretty much any date string into a real date object. The langref gives you all the details on how to do this but converting the date string above into an actual date is a simple as:

private function getFormattedDate(dateString:String):Date
{
var formatter:DateFormatter = new DateFormatter(); formatter.formatString = "EEE MMM DD H:NN:SS YYYY" var newDate:Date = new Date(formatter.format(dateString)); return newDate;
}

Take special notice that the formatString pattern does not try to match the "MST" portion of the date string. This portion is simply ignored. This is not because literal characters aren't allowed, just not caps. Lowercase along with punctuation and numbers can be used in the pattern if needed.

ArcGIS Server Sample Flex Viewer: Capturing and Using Configuration Data

The Sample Flex Viewer (SFV) uses a simple xml file (config.xml) for application initialization and configuration. Application properties managed by this configuration file include, among others, UI attributes such as banner, title and logo, primary menu configuration, widget management, and layer management.

It is almost a certainty that any customization will require custom configuration settings, either populated by passing in URL parameters (in a future post) or by setting custom properties in the config.xml file. These data can be captured and used by making a few changes to core classes in the SFV. This example focuses on capturing a custom attribute added to one of the existing elements, in this case, the <mapservice> element.

The ultimate goal of this example is to provide some means of categorizing map services identified in the configuration file for display in multiple instances of the livemaps widget, each containing subsets of specific map services. We will do this by adding a custom attribute to the <mapservice> element called group.

<mapservice label="map label" type="dynamic, tiled, arcims, etc" visible="true/false" alpha="0..1" group="wlci">url</mapservice>

Now, getting the data. But first, we need some background. While we won’t be using it directly in this example, it is important to mention the configData class. The configData class does nothing more than provide a place to store the configuration data. It is a collection of arrays which correspond to application functional groups such as UI, menus, maps services, widgets etc. If your intent is to create an entirely new class of configuration data, let’s say for url parameters (more on that in a later post), you would provide the framework for that data in this class. Our example is a bit simpler, we are simply adding a new attribute to an existing class.

The class that does most of the legwork is the configManager. It begins by establishing and HTTPService connection (configService) to the config.xml file and then listens for a result (ResultEvent.RESULT). The important stuff occurs in the handler for this event. Within this handler, an instance of configData is created along with an xml dataset containing the contents of config.xml:

var configData:ConfigData = new ConfigData();

var configXML:XML = event.result as XML;

It then proceeds to parse out the functional collections of data as needed. The following illustrates how it parses out <mapservice> configuration data. This pattern can be used to obtain any attributes added to the mapservice element in the config file.

//================================================

//map

var configMap:Array = [];

var mapserviceList:XMLList = configXML..mapservice;

for (i = 0; i < mapserviceList.length(); i++) {

var msLabel:String = mapserviceList[i].@label;

var msType:String = mapserviceList[i].@type;

var msVisible:Boolean = true;

if (mapserviceList[i].@visible == "false")

msVisible = false;

var msAlpha:Number = 1;

if (!isNaN(mapserviceList[i].@alpha))

msAlpha = Number(mapserviceList[i].@alpha);

var msURL:String = mapserviceList[i];

var mapservice:Object =

{

label: msLabel,

type: msType,

visible: msVisible,

alpha: msAlpha,

url: msURL,

}

configMap.push(mapservice);

}

configData.configMap = configMap;

The previous block of code begins by creating an empty array for populating local data.

var mapserviceList:XMLList = configXML..mapservice;

creates an XMLList of all nodes in the DOM hierarchy called mapservice. The XMLList can then be examined just like an array, stepping through it by using a for statement. Attributes of the elements within the XMLList are then accessed explicitly via the attribute name. For example:

var msLabel:String = mapserviceList[i].@label;

retrieves the value assigned to the label attribute for that particular mapservice node. The value of the node itself is retrieved using the following syntax:

var msURL:String = mapserviceList[i];

For each node instance, a generic object of name/values pairs is then created containing each attribute value along with the value of the node itself. That object is then added to a local array for each node instance and then is assigned to the configData instance upon parsing completion.

For this example, recall that we have added a new attribute called group to each <mapservice> element. To retrieve that value, we simply need to create and assign a new local variable with the attribute value, add it to the generic name/value pairs object and we are golden.

//================================================

//map

...


for (i = 0; i < mapserviceList.length(); i++)

{

...

//retrieve newly added group attribute from mapservice entry

var msGroup:String = mapserviceList[i].@group;

...

var mapservice:Object =

{

...

//add newly added group attribute to mapservice object

group: msGroup,

}

configMap.push(mapservice);

}

configData.configMap = configMap;

Our configData instance now contains the newly added "group" attribute. Once it is completely populated, the CONFIG_LOADED event is dispatched which essentially notifies the application that the configData instance is now available for use. Using the data is even easier. All that is needed is to listen for the CONFIG_LOADED event:

SiteContainer.addEventListener(AppEvent.CONFIG_LOADED, config);

where config is a function whos argument is an event containing the data itself. It is then accessed via the following:

private function config(event:AppEvent):void

{

configData = event.data as ConfigData;

}

This is done by default in the MapManager.mxml component. Have a look at the function called config is this component and you will see that pattern for obtaining data from configData.

private function config (event:AppEvent):void

{

configData = event.data as ConfigData;

....

for (i = 0; i <donfigData.configMap.length; i++)

{

...

var url:String = confData.configMap[i].url;

...

}

}

A nice feature in the Sample Flex Viewer is that the BaseWidget class (that which we extend for all new widgets) exposes the configData object by default. This means we can then obtain data parsed from the config.xml file by the ConfigManager from any widget that extends the BaseWidget. To do this, we do something similar to what the MapManager component does.

for (var i:Number = 0; i <configData.configMap.length; i++)

{

...

var group:string = configData.configMap[i].group.toString();

...

}

JS vs Flex ArcGIS Server Sample Viewers

In recent weeks, ESRI has released 2 versions of a sample viewer application based on both their latest development platforms, the JS platform (released January 2009) and the Flex platform (released November 2008, updated February 2009). They both look and function similarly out of the box. Each features a icon oriented navigation bar based on various functional classes including maps, navigation, tools and resources. They both use REST based ArcGIS Server services both dynamically generated and cached very easily (although I was able to add ArcIMS Service Support to the Flex version without much hassle). Each features some pretty nice design patterns which allow developers to worry less about core functionality. Custom functions are implemented as "widgets" which function independently of the software core.

After tinkering with the Flex application for a few weeks and having a look at the JS version, I have a few impressions to share. First, they both use design patterns (Container Event Bus and Dependence Injection) that help decouple core functionality from custom functionality and really make it easy to extend. The flex viewer, based on Adobe's Opensource Flex 3.2 platform is very sexy and alleviates many cross-browser compatibility issues because of its required Flash plugin. Recently released as an opensource project, Flex offers a rich user experience with flashy graphical displays and fluid GUI performance. However, it requires an specific IDE based on the Eclipse IDE called Flex Builder which is rather pricey (ranging from $200.00 - $700.00). I have had the fortune of getting the IDE and have begun some "widget building" myself and have found it to be quite easy. I was able to construct a simple Map Navigation Widget in just a few days without any prior Flex development experience.While I haven't tinkered as much with the JS version, my initial impression is that it is also very slick and does not require a plugin. However, it's sex appeal is lacking a bit compared to the Flex version and it sounds as if (based on comments from the sample download blog) that it has some issues in IE 7.