Drill-Down Using The Ignite UI Map

Jordan Tsankov / Wednesday, November 28, 2012

Infragistics Ignite UI Map Drill-Down

This blog post will bring the last addition to my series on the Ignite UI Map – this time we’ll look into drill-down functionality.The feature is not something that comes out-of-the-box for the control , so I will present an alternative solution to achieving the same effect.

Drill-down is when a selection of a series item shows up additional series contained within that item , each one bearing distinct data related to it. In this example , we will be using a map of the United States , showing each state’s counties upon selection.

Let’s get on with it !

Implementation

First , as usual , you will need to reference the required JavaScript libraries – we’ll use the CDN-hosted versions of jQuery and Modernizr:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js" type="text/javascript"></script>

<script src="http://www.modernizr.com/downloads/modernizr-latest.js" type="text/javascript"></script>

Of course , we also need to add the Ignite UI /js and /css folders to the project as well , and then add a reference to the Infragistics Loader.

Now , let’s define some bushes and outlines that we will use throughout the process – we’ll need a pair for when the counties series is invisible , a pair for when any of the series is visible and finally a pair for drawing the non-selected states ( when you select a state and view its counties , all the other states are visible yet non-selected )

var outline_visible = "rgba(123,166,180, 1)";

var brush_visible = "rgba(173,216,230, 0.5)";

  

var outline_nonselected = "rgba(100, 100, 200, 0.3)";

var brush_nonselected = "rgba(200, 200, 200, 0.3)";

  

var outline_invisible = "rgba(255,255,255,0)";

var brush_invisible = "rgba(255,255,255,0)";

Next , we will create a styleSelector object that will be used for the styling of the counties. Notice how we use the bushes in direct conjunction with each shape style’s visibility.

function CountiesByStateSelector() {            

    var _selectedStateFIPS = "";

    this.stateFIPS = function (state) {

        if (arguments.length == 0) {

            return _selectedStateFIPS;

        }

        else {

            _selectedStateFIPS = state;

        }

    };

  

    this.selectStyle = function (shapeData, shapeProperties) {

        // STATE_FIPS is the property in the .dbf files that holds the ID for each county/state

        var shapeState = shapeData.fields.item("STATE_FIPS");

        

        if (shapeState === _selectedStateFIPS || _selectedStateFIPS === "") {

            shapeProperties.visibility($.ig.Visibility.prototype.visible);

            return this.visibleStyle;

        }

        else {

            shapeProperties.visibility($.ig.Visibility.prototype.collapsed);

            return this.invisibleStyle;

        }

    };

}

  

CountiesByStateSelector.prototype.invisibleStyle = {

    fill: brush_invisible,

    stroke: outline_invisible

};

  

CountiesByStateSelector.prototype.visibleStyle = {

    fill: brush_visible,

    stroke: outline_visible

};

And finally we’re ready to instantiate the map itself , we do it in a standard way – no beating around the bush with this one , it’s straightforward and you’re probably used to it already. Bear in mind you will need to .shp and .dbf files – one for the state series and one for the county series. Here’s the code snippet:

$.ig.loader({

    scriptPath: "./js/",

    cssPath: "./css/"

});

  

var shapeDataStates;

var shapeCounties;

$.ig.loader("igMap", function () {

    shapeDataStates = new $.ig.ShapeDataSource({

        shapefileSource: 'usa_states.shp',

        databaseSource: 'usa_states.dbf'

    });

  

    shapeCounties = new $.ig.ShapeDataSource({

        shapefileSource: 'usa_counties.shp',

        databaseSource: 'usa_counties.dbf'

    });

    shapeDataStates.dataBind();

    shapeCounties.dataBind();

  

    $("#map").igMap({

        width: "500px",

        horizontalZoomable: true,

        verticalZoomable: true,

        overviewPlusDetailPaneVisibility: "visible",

        series: [{

            type: 'geographicShape',

            name: 'usaStates',

            shapeDataSource: shapeDataStates,

            markerType: 'none',

            outline: outline_visible,

            brush: brush_visible

        }, {

            type: 'geographicShape',

            name: 'usaCounties',

            shapeDataSource: shapeCounties,

            markerType: 'none',

            outline: outline_invisible,

            brush: brush_invisible

        }],

        seriesMouseLeftButtonUp: countyInfo,

        windowResponse: "deferred",

        windowRect: {

            left: 0.26,

            top: 0.33,

            width: 0.1,

            height: 0.12

        }

    });

});

Now , some of you might have noticed that we’ve also defined an event handler for one of the series events – seriesMouseLeftButtonUp. This event is what will trigger the drill-down behavior , displaying the corresponding counties for a selected state. Here’s the code for the handler:

function countyInfo(evt, ui) {

    clearInfoPanel();

    if (!first_run && ui.item.fields.item("COUNTY") != undefined) {

        $("#info").append("<p class='infoMap'>State: " + ui.item.fields.item("STATE") + "</p>");

        $("#info").append("<p class='infoMap'>County: " + ui.item.fields.item("COUNTY") + "</p>");

        $("#info").append("<p class='infoMap'>Square Miles: " + ui.item.fields.item("SQUARE_MIL") + "</p>");

    }

    if (selectedCountiesSelector.stateFIPS() != ui.item.fields.item("STATE_FIPS")) {

        //  Update the map only if another state is selected

        selectedCountiesSelector.stateFIPS(ui.item.fields.item("STATE_FIPS"));

        first_run = false;

        

        $("#info").append("<p class='infoMap'>State: " + ui.item.fields.item("STATE") + "</p>");

        var stateShapes = getStateShapes(selectedCountiesSelector.stateFIPS());

        var stateBounds = findShapeArrayBounds(stateShapes);

        var mapWindow = calculateMapWindow(stateBounds, 1);

  

        $("#map").igMap("option", "windowRect", mapWindow);

  

        $("#map").igMap("option", "series", [{

            name: "usaStates",

            outline: outline_nonselected,

            brush: brush_nonselected

        }]);

  

        //  Initiate repainting of the counties series

        $("#map").igMap("option", "series", [{

            name: "usaCounties",

            shapeStyleSelector: selectedCountiesSelector

        }]);

    }

}

What happens here is that , first , we update a small information frame with data from the currently selected item. The crucial bits are lines 8 & 10 , and then from 14 to 30.

On lines 8 & 10 , we check if the newly selected state is different than the last one and if it is , we save its ID ( in this case called STATE_FIPS ).

Then , on line 14 we use this ID to look up all the shapes for the selected state. We have a function written just for this case.

On line 15 we use these shapes to get the bounds of all the shapes contained within the state.

And on line 16 we reposition the view rectangle ( the map window ) to zoom in on the state that we have selected.

Here are the functions used:

function getStateShapes(stateFIPS) {

    //  Finds all shapes in the current data source that have

    //  a specific ID (the field is called STATE_FIPS in this case)

    var shapeEnumerator = shapeDataStates.converter().getEnumerator();

    var shapesArray = [];

    while (shapeEnumerator.moveNext()) {

        var currentItem = shapeEnumerator.current();

        if (currentItem.fields.item("STATE_FIPS") === stateFIPS) {

            shapesArray.push(currentItem);

        }

    }

    return shapesArray;

}

  

function findShapeArrayBounds(shapeArray) {

    //  Store to improve performance and readability

    var sCount = shapeArray.length;

  

    if (sCount > 0) {

        var left, top, right, bottom;

  

        //  Enumerate shapes

        for (var s = 0; s < sCount; s++) {

            var currentShapeBounds = findShapeBounds(shapeArray[s]);

  

            if (currentShapeBounds.left < left || !left) left = currentShapeBounds.left;

            if (currentShapeBounds.right > right || !right) right = currentShapeBounds.right;

  

            if (currentShapeBounds.top > top || !top) top = currentShapeBounds.top;

            if (currentShapeBounds.bottom < bottom || !bottom) bottom = currentShapeBounds.bottom;

        }

  

        return {

            left: left,

            right: right,

            top: top,

            bottom: bottom

        };

    }

}

  

function findShapeBounds(shape) {

    var left, top, right, bottom;

    var points = shape.points.item(0);

    var pCount = points.count();

    //  Enumerate shape points

    if (pCount > 0) {

        //  Find bounds of the state

        for (var i = 0; i < pCount; i++) {

            currentPoint = points.item(i);

  

            if (currentPoint.__x < left || !left) left = currentPoint.__x;

            if (currentPoint.__x > right || !right) right = currentPoint.__x;

  

            if (currentPoint.__y > top || !top) top = currentPoint.__y;

            if (currentPoint.__y < bottom || !bottom) bottom = currentPoint.__y;

        }

  

        return {

            left: left,

            right: right,

            top: top,

            bottom: bottom

        };

    }

}

  

function calculateMapWindow(minViewWindow, zoomRatio) {

    if (!zoomRatio) {

        zoomRatio = 1;

    }

    //  Calculate central point and required radius

    var width = minViewWindow.right - minViewWindow.left;

    var height = minViewWindow.top - minViewWindow.bottom;

    var centered = {

        longitude: minViewWindow.right - width / 2,

        latitude: minViewWindow.top - height / 2,

        radius: (width > height) ? width / 2 * zoomRatio : height / 2 * zoomRatio

    };

    //  Calculate map window in relative units

    var zoomRect = $("#map").igMap("getZoomFromGeographic", geographicFromCentered(centered));

    return zoomRect;

}

  

//  Calculates the geographic coordinates of a square around a central point and radius

function geographicFromCentered(centered) {

    var geographic =

    {

        left: centered.longitude - centered.radius,

        top: centered.latitude - centered.radius,

        width: centered.radius * 2,

        height: centered.radius * 2

    };

    return geographic;

}

And of course , you will need to have a DOM element to render the map into , let’s just use a div. While we’re at it , let’s also make one for the info panel.

<div id="map"></div>

<div id="info" style="border: 1px solid black; width: 200px; height: 200px;">Information<br /></div>

And that’s it , you’ve got yourself a drill-down map of the United States !

Download this sample by clicking on this link and play around it it. You’ll see all the code in action.

Additionally , you can view more samples on this page.