Making Sense of Geographic Data with Dundas Map and AJAX

This is a showcase review for our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

• Download a full evaluation copy of Dundas Map for ASP.NET here

Introduction

The newest ASP.NET offering from Dundas Software is Dundas Map, released September 12^th 2006. (Download a full evaluation copy of Dundas Map for ASP.NET here.) The primary purpose of Dundas Map is to give a geographical context to data. Like its sister product (Dundas Chart), the Map control makes shrewd use of AJAX to implement some of its core functionality. In addition to this, Dundas Map also provides a complete structure upon which developers can incorporate additional interactivity through the use of AJAX.

What is AJAX?

AJAX (Asynchronous JavaScript and XML) is a web development technique used in the development of interactive web applications. Through the exchange of small amounts of data between clients and servers, AJAX offers an ideal means of delivering highly responsive, fast-loading, user-friendly ASP.NET applications.

AJAX in Dundas Map

Dundas Map for ASP.NET uses AJAX to manage the following built-in features:

• Viewport Panning
• Navigation
• Zooming

Let's take a closer look at these features.

Zooming, Panning and Navigation

After dropping a map control onto your workspace enabling zooming, panning and panel-driven navigation is very straightforward. These properties can be enabled through the properties browser, the Dundas Map Wizard™ or programmatically as follows:

MapControl1.ZoomPanel.Visible = true;
MapControl1.NavigationPanel.Visible = true;
MapControl1.Viewport.EnablePanning = true;

Once these three properties are enabled the map will adopt default zoom and navigation parameters such as minimum and maximum zoom. These parameters can then be modified to meet the logical constraints and aesthetic needs of your map-based application.

Figure 1: Interactive Zoom and Navigation panels enabled

Using the zooming, panning and navigation functionalities users can easily drive the map, allowing them to dictate the area of interest and the degree of detail in the map. In this example Symbols representing cities have been attached to a layer named "LayerCities". This layer is set to be visible from a zoom level of 250 to 1200.

Figure 2: The Layer Collection Editor in the Properties Browser

As we zoom into the the map these cities become visible giving our map greater informational depth. With a just few mouse actions we can achieve a view such as the one found in Figure 3 below. This view was achieved by zooming in (using the zoom panel) and navigating and panning to our area of interest, in this case East Africa. It is worth noting that there is a Layer property, LabelVisibleFromZoom. This property allows us to make Symbols visible while hiding their labels, this is very useful at low zoom levels and in maps with high Symbol density.

Figure 3: Zoomed in view of the map

All of the functionality we have seen to this point (AJAX driven or otherwise) is native to Dundas Map control and can be implemented without writing a single line of code. Adding custom interactivity to maps will however require a little coding. Thankfully making customizations is simplified by the comprehensive AJAX support built into the component. AJAX in conjunction with callbacks allow us to update map elements (or entire map controls) without requiring a page refresh. This flexibility opens up a world of possibilities such as the ability to perform real-time updates to maps and their elements. This could involve changes in aesthetics, visibility, cartographic projection, underlying data, or behavior. Let's implement some custom interactivity.

Custom Interactivity and AJAX

With the above functionality already in place we can easily add further user-driven functionality with just a few lines of code. Using AJAX we can modify the existing symbols. Using an HTML checkbox we can give users the ability to add ToolTips to Symbols when their labels are hidden.

To enable this functionality we need just two things, a short JavaScript function and a callback.

// Client-side JavaScript 
function CheckboxCapitals_onclick()
{
    var mapControl = document.getElementById("MapControl1");
    var checkCities = document.getElementById("CheckboxCities");
    mapControl.doCallback("CityVisbility", checkCities.checked);
}

// Server-side C# callback routine
protected void MapControl1_Callback(object sender, 
          Dundas.Maps.WebControl.CallbackEventArgs e)
{   
    MapControl mapControl = e.MapControl;
    if (e.CommandName == "CityVisbility")
    {
        if (e.CommandArgument == "true")
        {
            mapControl.Layers[0].VisibleFromZoom = 
                            mapControl.Viewport.Zoom;

            //Detach SymbolField data from the tooltip 
            //of each symbol in the map's collection
            foreach (Symbol city in mapControl.Symbols)
            {
                city.ToolTip = "";
            }
        }
        else
        {
            //Attach NAME SymbolField data to the tooltip 
            //of each symbol in the map's collection
            foreach (Symbol city in mapControl.Symbols)
            {
                city.ToolTip= "#NAME";
            }
        }
        e.ReturnCommandName = "UpdatePageElements";
    }
}

The sample above uses a map control with a Callback event configured to receive callbacks created by the map. The callback routine itself uses the CommandName and CommandArgument passed back to it from the client to decide what action to take. The CommandName is used to address what change is to be made to the map, this is important as multiple client-side actions can be linked to a single callback routine. The CommandArgument parameter is used to feed arguments to the server to assist it in making changes. In this example it is used to pass a simple true or false string to determine the state of the client-side checkbox.

Figure 4: The modification above produce the map above

To achieve the map in Figure 4, we (programmatically) equate LayerCities' VisibleFromZoom property to the Viewport's current zoom, making the cities visible. We also add tooltips to each city to assist the user in evaluating the map. (Note: you will need to hover over a symbol for its tooltip to appear.) All data Fields (in Groups, Shapes, Symbols, and Paths) can be accessed directly in code by appending a "#" to the beginning of the field's name. This direct access allows data to be easily attached and detached from map elements. Let's explore this functionality a little further by showing the populations of countries in our existing map.

To show populations, we need to create a ShapeRule. Within this rule, we must set the ShapeField value that we want reflected in the Color Swatch, in this case population. Again, these properties can be set programmatically or through the ShapeRule Collection Editor. Set the ShapeField to POPULATION, and group the data using equal distribution. With a few aesthetic changes, our map will look like this:

Figure 5: Map showing populations by country and major cities

In instances where the data we aim to show is found in an external database, we can use the DataBindingRules Collection Editor to create/edit rules specifying a BindingField and a DataMember to equate to that field. In this scenario, the actual data is not incorporated into the map until runtime. This will ensure that the most up-to-date information is used every time a map is generated. We can update this data using AJAX in the same way we modified Symbol tooltips.

At the tail end of a callback, once changes have been made on the server-side, the client is updated accordingly. On top of this, the server is capable of returning a command to the client. This is done by setting the ReturnCommandName property. This, in turn, can be used by client-side scripts to make additional changes to the ASP.NET page hosting the map control.

Conclusion

Dundas Map for ASP.NET's AJAX support allows developers to quickly realize map applications with great data depth, while allowing for a high degree of custom interactivity. This data richness and interactive capacity allows developers to easily create powerful, user-friendly, map-based applications for ASP.NET.

Download a full evaluation copy of Dundas Map for ASP.NET here.