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.

USGS Report Released: Energy Resources in SouthWester Wyoming (WLCI)

The USGS Central Region Energy Resources Science Center (Author: Laura R.H. Biewick)recently released a report characterizing oil and gas production within the South Western Wyoming (Wyoming Landscape Conservation Initiative). The report contains a variety of geospatial data, maps and such that are free to the public.

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.

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();

...

}

2009 ESRI Petroleum User Group (PUG) Conference

Today is day two of the 2009 Petroleum User's Group conference. Yesterday featured the standard PUG fair including the usual ESRI plenary "dog and pony" show followed by some really good user presentations. Lead by Clint Brown, the tone of the plenary talks centered on "Web GIS." Highlights included ArcGIS 9.3.1 discussion, demos of the JS and FLEX APIs as well as some discussion about yet another sharing framework being designed via ArcGIS Online. To the dismay of a typically traditional GIS audience, it is clear that the focus of ESRI's R & D/future direction is "Web GIS." I'm not even sure if Desktop was even mentioned. The term "consumable" in the context of data and services was mentioned at least a dozen times with emphasis is user experience oriented towards the Google and VE patterns.