Norfolk AIR imagery interface window

As we were designing Norfolk AIR it was apparent that the standard single mapping interface was going to be a thing of the past. If one is cool 2 must be better!

We were really worried about the amount of real estate 2 map windows would consume but I think the interface guys did a brilliant job on the layout and our users are raving about it.



So know that we have two it opens up a whole lot of functionality that would've been hard to accomplish in a single map frame design.

I give you the imagery interface window..........................



The interface consist of an ESRI .NET arcserver mapping control, an ASP.NET panel control and a standard ASP.NET dropdownlist.

First order of business was to keep both the mapping interface (discussed in the next post) and the imagery interface in sync. Things like pan one and the other follows. Zoom one and the other follows. etc.

This was accomplished with a little code behind in the Map_ExtentChanged on the server.

Protected Sub Map1_ExtentChanged(ByVal sender As Object, ByVal args As ESRI.ArcGIS.ADF.Web.UI.WebControls.ExtentEventArgs) Handles Map1.ExtentChanged
Dim env As ESRI.ArcGIS.ADF.Web.Geometry.Envelope = args.NewExtent
Dim env2 As ESRI.ArcGIS.ADF.Web.Geometry.Envelope = Map2.Extent
If env2 IsNot Nothing Then
If Not Map2.Extent.IsEqual(env) Then
Map2.Extent = env

Map1.CallbackResults.CopyFrom(Map2.CallbackResults)
End If
End If
End Sub

The above code will basically eval the current extent of the control and test to see if it is equal to the other map control. Although this isn't dynamic (ie both maps move at the same time) it is pretty quick and the users haven't complained. In the future I may look at seeing if this can be done dynamically. So for know a callback is required.

So what does this window do?
It allows users to toggle 4 years of imagery(we are adding more), display the location in nice google streetview (nice) and fire of a sub window that will tile all years of imagery together.



As the dropdown is changed, imagery requests are sent as an AJAX call to the server that updates the MapResource for the ArcGIS server Map control. When this was first developed it was a postback(slow, refresh, click, yuk). Introducing AJAX allowed us to just target this specific map control without any refresh. We used the standard callback framework for the map controls that ESRI provided and built a PageLoadingHandler. This was a bit tricky as sometimes the callback wouldn't result in a map change(ie show the google window) so we are building the callback and then evaling it on the client. If it is just a standard map callback then javascript just runs it but if it is something else (ie google, errors, open the all image subwindow) then javascript is used to handle those request.


function PageLoadingHandler(sender, args) {
var dataItems = args.get_dataItems();
if (dataItems['Map2'] != null)
//alert(dataItems['Map2']);
//alert(dataItems['DropDownList1']);
{
if (dataItems['Map2'] == 'error')
{
errorHandler();
}
else if (dataItems['Map2'] == 'showstreetview')
{
loadStreetView();
showStreetView();
}
else if (dataItems['Map2'] == 'allimage')
{
var w = dataItems['DropDownList1'];
// alert(w);
showAllImage(w);
}
else
{
hideStreetView();
processCallbackResult(dataItems['Map2'], 'Map2');
}
}
}

So as you can see from the above javascript, that we handle pretty everything in the AJAX call with javascript. We can call our subfunctions, like if the user has selected 'Block View' the server will pass a statement 'showstreetview'. This will be caught by the PageLoadingHandler and will call the loadstreetview() and showstreetview() functions.

In this case it is a nice overlayed div with the current address in google streetview



We have found using the geocoder from google that sometimes are house is down the street thus the term "Block View". We are researching using an address location and converting the geometry to pass the exact location to google but for know it is "Block View".

For the future we are looking at integrating Pictometry images into this window as well being able to see a 360 (north, south, east, west) oblique image of the property.

At first I was a bit skeptical about the 2 window design but I must say it has turned out to be one of the most productive designs that I have run across.

-chris