I have recently covered the Ignite UI symbol & shape series in these two blogs. Today , I will be introducing yet another type of series of the map – the contour line series. This type of series is useful for when you want to illustrate how a set of values are distributed over a region of space on the map. Altitude , precipitation , population – all of these come to mind as being possible scenarios that would call for the use of a contour line series.

Let’s get on with it !

Setup

As with all other Ignite UI components , you will need to include some JavaScript references to your project. My preferred way of doing so is by obtaining them through the Google-hosted CDN. With that out of the way , add a reference to the script loader as well – we’ll use that to fetch the resources we need for the Ignite UI Map.

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

   1:  

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

   1: </script>

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

   1: </script>

   2: <script src="js/infragistics.loader.js">

</script>

When we’re done with referencing the script files , we’re free to get to the map itself. Now , those of you that have followed recent posts about the Ignite UI Map may have a hunch about what’s coming next – initializing a contour line series map is a lot similar to the shape series one , except there are some additional properties you will need to make use of. We will cover those right away.

   1: $.ig.loader(function () {

   2:     $("#map").igMap({

   3:         width: "700px",

   4:         verticalZoomable: true,

   5:         horizontalZoomable: true,

   6:         overviewPlusDetailPaneVisibility: "visible",

   7:         series: [{

   8:             type: "geographicContourLine",

   9:             name: "contour",

  10:             fillScale: {

  11:                 type: "value",

  12:                 brushes: ["red", "green", "blue", "yellow"]

  13:             },

  14:             longitudeMemberPath: "x",

  15:             latitudeMemberPath: "y",

  16:             valueMemberPath: "val",

  17:             dataSource: points

  18:         }],

  19:         windowResponse: "deferred"

  20:     });

  21: });

The differences in setup spring up at line 10 – the fillScale property is what is used to specify the brush that will be used to color the shapes in the series. The left-most color and the right-most one will be used for the minimum and maximum values , respectively. The values in between will be colored by mixing in the appropriate brushes , according to the palette provided.

The longitudeMemberPath , latitudeMemberPath and valueMemberPath specify which fields in the data source represent longitute , latitude and value respectively. These will most likely value from data source to data source , so remember to update these accordingly.

Now , you probably noticed that there is also a dataSource property provided too , now here’s something you’ll need to remember when using it. When you supply a dataSource property , it will work with a set of javascript-defined objects such as this one:

   1: var points = [

   2: { x: 10, y: 10, val: 1 },

   3: { x: 10, y: 0, val: 2 },

   4: { x: 0, y: 10, val: 3 },

   5: { x: 0, y: 0, val: 4 },

   6: { x: 20, y: 20, val: 1 },

   7: { x: 20, y: 0, val: 2 },

   8: { x: 0, y: 20, val: 3 },

   9: { x: 0, y: 0, val: 4 }

  10: ];

If , however , you intend on using an .ITF file , you will need to use the triangulationDataSource property and provide a path to your .ITF file. Keep in mind that your server should be able to handle .ITF files – if you’re having errors retrieving the files ( and are using locally-hosted files , of course ) you will most likely need to adjust the handling of the ITF MIME type.

Additionally , there are three properties – triangleMemberVertexPath1 , triangleMemberVertexPath2 and triangleMemberVertexPath3 that are used to define the property names in the ITF file which hold the indexes of the vertices for each triangle. Make use of those as well if you’re working with triangulated files.

Take a look at another sample on this topic on this page.

Or download the example project by following this link.