When we heard about the ESRI Mashup Challenge, my team and I knew we were going to enter – the question was just what should we build. About that same time there was another flare up in the righteous indignation about the bonuses paid to AIG executives. We got to talking about how awesome it must be to get a million dollar bonus, and how abstract that really is. Most of us own homes, so we c have some appreciation for numbers in the $250,000 to $500,000 range, but we’re paying those off over 30 years. Making a million dollars in one year, or even better, as a BONUS in one year (regardless of whether or not you drove the global economy off the cliff) is nearly unfathomable. Then it clicked – we’d see if we can find some data that would let us visualize executive compensation packages in a way that we (relatively average folk) can relate to.

Some quick searching took us to a census report stating that the median household income in the US was $50,233 in 2007. So, comparing compensation packages in the 10’s of millions of dollars in a way most people can relate to was going to be a challenge.

The Data

Any compelling mashup needs good data. After some Googling, we found “Pay at the Top” at the New York Times web site. This page listed the 2008 compensation packages for 200 executives at public companies. Now, a web page is not usually that convenient a data source, but this one in particular was built using reasonably clean html. We just grabbed the page source, cut out the section we were interested in, slapped in an XML header, and Jeff Germain went after in using LINQ to Xml, and loaded the data into two tables in SQL Server.

Next up was finding some aggregate income data. Since we wanted to show this on a map, and have the display make sense, we needed to find total income by county. Conveniently the IRS has just such a dataset. Unfortunately the last year they provide data for is 2007. But since we don’t see wild fluctuations in median income levels, this would be close enough (and it was a CSV file, which made loading it painless). Once the data was loaded into SQL Server, we created a spatial view linking these numbers to a county layer in ArcSDE. I prefer using spatial views as opposed to using joins in the map document or actually adding the fields to the feature class because I know I can mess with the data using SQL without any problems.

At this point we could make maps showing all the counties in the country in which the all residents cumulatively made less than any one executive.

Since there are large variations in median income at the county level, we wanted to show, for a given county, how many households does it take to make the same amount as an executive. We were able to pull this data from the aptly name ESRI Median Household Income service on ArcGIS Online.

Flexing the Mashup

We used the Flex API because it’s something we’ve been doing a lot of work with, and the R&D time would pay off on coming projects. The app is a pretty simple flex application, using the ESRI API. We load in a simple shaded relief tile cache as the background, and use a dynamic map service to show the counties.

Map Services

We are hosting the county income map service (http://204.133.225.169/ArcGIS/rest/services/Mashup/CountyIncome/MapServer), and it’s design is worth noting. We have two layers – one that shows the county outlines, and a second that shades the counties green. Of course we don’t want to show all the counties as green – just the counties where the total income is less than what the executive made. We simply setup the layer in the map with a default definition query of 1=0, which is never true, so no green counties will show up. When we have an executive, we use the Flex API to change the definition query for that layer (on a request by request basis) so that only those counties who’s total adjusted gross income (AGI) is less than the CEO’s compensation. This is a really handy technique which we use a lot.

Web App & Data Services

As usual, we built the back-end of the web app using ASP.NET MVC. The web app has two roles – first, it detects if the request is coming from an iPhone or Android device, and routes the request to a different view that’s optimized for those devices. The second thing the web app does is provide a set of data services to the Flex and Javascript apps (the mobile app is just HTML and jQuery). The data services hit the compensation data stored in SQL Server, and return it to the flex app as JSON.

Mobile View

As I noted the app will present a different view to for iPhone or Android browsers – this is much simpler, but still conveys the same information. The map used is actually OpenLayers, so you can pan & zoom. Mike Juniper and Brian Noyle will be talking more about this technology at their Dev Summit session (1:45pm – 2:15pm Wednesday March 24th)

The Video

In order to enter the contest, you have to submit a video on YouTube. Here’s ours:

Link: http://www.youtube.com/watch?v=a3dzn9ZxMw8

So that’s the app as it stands – I also wanted to give a shout out to Michael Hayden and Bob Binckes who did the bulk of the Flex coding for this – Thanks guys!

There is a lot more that could be done, and there are a few design tweaks I’d like to make, but given the time we had, it came together really well. Check it out and let us know what you think!

http://mashup.dtsagile.com

The ESRI Flex Sample Viewer is a great starting point for creating map centric RIA’s. The widgetized nature of the starter kit facilitates significant re-use of components, and there are a couple dozen plug-and-play components available from the Flex Code Gallery. Woot!

The downside of this ease of re-use is that we are seeing a new wave of cookie cutter sites out there. It’s great that these sites can the whipped up so quickly, but it’s pretty clear that (for the most part) little or no thought is given to how the user should interact with the site. We see hordes of menus and tons of widgets, all gloriously trying to pseudo replicate ArcMap. Let’s be clear – if your users need ArcMap, give them ArcMap. If they actually know the data model to the point that an ad-hoc query tool will be useful, chances are they will need more functionality than you can build into the Flex app anyhow. Right tools, right place and all that…

Where was I… oh yeah… remixing the sample viewer. When I’m designing an application, I want to build it as focused as possible. Every mouse click and menu drop down I can remove, the better it is for the user. So – here are a few of the things that I wanted from a UI/behavior perspective…

• I want top level menu items that do something on-click. I don’t want a pull down with a single item on it – I want a print icon that opens the print dialog when it’s clicked.
• The shortcut menu is a great idea, but I want to have things that “only” appear on the short cut menu. Having something in two places in a UI is counter intuitive in most cases, and wastes UI space.
• I want to have a limited set of base maps available, and I want them to be displayed as top level icons on the menu. Clicking them will turn on the layer. Active layer should have a “glow” indicating that it’s… well… active.
• I want widgets that can’t be closed. One thing I’ve seen when letting clients run a Flex app is when they close widgets they are confused about how to re-open it. Thus I want a sub-type of widget that can only be minimized and not closed.
• I want a full width banner across the top of the page – providing more room for top level items.
• I want a search box in the top banner so it’s easy to search.
• I want a zoom to / book mark tool on the top bar so it’s easy to jump to commonly accessed extents

And I want all the same level of flexibility in terms of configuration, and the ability to leverage existing widgets. Now.

Design Sketches

In coming up with this list of things I wanted, I did some sketches…  (apparently my scanner is crap!)

In the past I’ve used visio or balsamiq to create wireframes, but more recently I’ve been getting back into sketching simply because it’s so fast. I’ve been using Jason Robb’s wireframe templates as a starting point (article and direct download of pdf).

More Tile Caches…

Since ESRI is changing their caches over to Web Mercator, I wanted to start working with some web mercator tile caches. ESRI has *some* services available now (google search here), but realistically most of these are pretty weak for base maps. So, I created tile layers for OpenStreetMap and CloudMade. Once I finish a few tweaks to these layers (need to display the copyright statements on the map) I’ll release them – likely to the ESRI Code Gallery, but I also want them on a SCM somewhere. Maybe GitHub? Thoughts?

Let’s take a peek…

Things are not fully dialed in yet, and I really need to focus on detailing this out for my client, but this is the generic starting point. I’ll post some live links when my client’s site is ready for beta testing.

This shows the full width banner, the address search, zoom to drop down (needs skinning), an “Always Open” widget, the two base map icons, and the top level print widget. The tiles are from the CloudMade Midnight Commander cache.

This one shows the locate dialog that’s opened by running a search from the banner bar. As you can see there are still a few issues with this widget. Since “locate” is not the key focus of the app, this widget can be closed. I’m also going to work on the actual search logic – right now it’s parsing out the address based on commas, and then sending to the ESRI geocoder. I may look at using another service that has more matching logic on the back end so I don’t have to figure out how to de-construct the address.

This shows the print widget, accessed by just clicking the printer icon (no drop down required). Oh, and the Open Street map cache in the background.

What’s nice about this is that the user does not need to go digging around in menus to access the functions they need. This template will be used for very focused applications – do one thing, and do it well is the mantra for the project – and so keeping things up front will really help out.

Behind the Scenes

So – the real question is – can we share this? Good question! I’ll be blogging more about how we (big shout out to Jeff Germain who whipped up the “toolbars” stuff) created various aspects of this, and at the very least, you can re-implement most of this stuff pretty quickly. We had to hack at the core of the Sample Viewer (specifically ControllerManager.as) and added a bunch of additional controls for our “toolbars”. At this point things are “working” for the scenarios we need right now, but I suspect we’ll have some refactoring in our future. I’ve got at least 3 apps that will build on this, and by the time all 3 are released, we should have tracked down all the weirdness, and have something that supports all the out-of-the-box Sample Viewer stuff, as well as our extensions. Stay tuned!