Blog

Introduction to Geographic High Density Scatter Series in Ignite UI Map control

Marina Stoyanova / Monday, December 2, 2013

The igMap control uses the Canvas HTML5 tag to draw actual maps and visualize data on them. Choosing between different background content delivered by a map imagery provider (like Bing® Maps, CloudMade, or OpenStreetMap) you can display custom data and show it to the end user. In this blog we will go over the new feature of the control – the Geographic High-Density Scatter Series and make a sample that will show the earthquake activity in the last few years.

Earthquakes

Main Idea and features

The Geographic High Density Scatter Series feature, which is included in the 13.2 release of Ignite UI, binds and shows scattered data points ranging from hundreds to millions points represented by color pixels and loading extremely fast. The scatter series are based on the Cartesian coordinate to display values of two variables for set of data. The two variables are represented by the latitude and longitude values.This feature is meant to deal with a great amount of data, that is why when there is a high density of points, they start to coalesce and color  in different tint. All of this is handled by the control’s many options which help you visualize your data in more accessible and more comprehensible way. For example you can use the heat maximum and heat minimum options to set the density value that maps respectively to the maximum and minimum heat color. In that way when you zoom in you will be able to see the separate pixels in the color you have chosen for the minimum heat, and when you zoom out you will see how the areas that are more saturated with points begin to change their color to the one you have set to the max heat option.

Code:

  1. heatMinimum: 0,
  2. heatMaximum: 5,
  3. heatMaximumColor: "red",
  4. heatMinimumColor: "yellow"

Image:

ZoomIn ZoomOut effect

 

By using the point extent option which enlarge the points’ size, you will achieve the effect of a heat map, but be aware that the point size affects the series performance – meaning that the higher the property value is the lower the performance will be.

  1. pointExtent:3

 

Image:

Heat Map

Another way to change the pixels is by setting the series object’s resolution a value bigger than 1, which is the default value. Using a low value means better resolution, but diminished performance.

If you want your data to load in less time and use less memory you can set the use brutal force property which renders all the data points every time, when true, rather than building its internal data structures. To render tooltips, you should first set the mouseOverEnabled property to true. That way the mouseOver event will be permitted.

You can find more information about the feature and it’s properties in the product's API  or in the documentation. And you can see live demo in the sample browser.

The Sample

To begin with we need a div tag for placing our map control. After that we initialize the control using the following lines:

  1. <div id="map">div>

 

  1. $("#map").igMap({
  2.     width: "500px",
  3.     height: "500px"
  4. }

By using the backGroundContent property you can choose what kind of map to use. In this sample we will use a Bing map and we will give the imagerySet property, the AerialWithLabels value. That way we will have a physical map of different countries and cities of the world.

JS:

  1. $("#map").igMap({
  2.     width: "500px",
  3.     height: "500px",
  4.     backgroundContent: {
  5.         type: "bing",
  6.         key: "123456abcdef",
  7.         imagerySet: "AerialWithLabels "
  8.     }
  9. }

MVC:

  1. @(Html.Infragistics().Map(Model)
  2.     .ID("map")
  3.     .Width("500px")
  4.     .Height("500px")
  5.     .BackgroundContent(bgr => bgr.BingMaps("123456abcdef")
  6.                 .ImagerySet(ImagerySet.Aerial))
  7.     .Render()    
  8. )

If you want to be able to zoom in and zoom out the map, you should set the verticalZoomable and the horizontalZoomable to true. The last thing to add to our control configuration is the series. Well we want to display the earthquakes all over the world that is why we need appropriate data like that:

  1. var events =[
  2. { lat:"18.871" , lng:"146.2927" , dkm:"99.9" , mag:"5.7" , source:"NEIC" , date:"2011/06/26 09:19:48.2000"},
  3. { lat: "42.0", lng: "142.62", dkm: "44.2", mag: "5.6", source: "NEIC", date: "2011/06/24 17:39:25.0000" },
  4. . . .
  5. ];

The data we are using is the same as in the  Earthquake sample, which is taken from National Earthquake Information Center. Now in the series we take the data by setting the dataSource option to – events, and for the latitudeMemberPath and the longitudeMemberPath properties we use he respective items from the data. So our code will look like this:

JS:

  1. series: [{
  2.     type: "geographicHighDensityScatter",
  3.     name: "earthQuakes",
  4.     dataSource: events,
  5.     latitudeMemberPath: "lat",
  6.     longitudeMemberPath: "lng",
  7.     heatMinimum: 0,
  8.     heatMaximum: 5,
  9.     heatMaximumColor: "red",
  10.     heatMinimumColor: "orange",
  11. }]

MVC:

  1. .Series(series =>
  2. {
  3.     series.GeographicHighDensityScatter("earthQuakes")
  4.         .LatitudeMemberPath("Lat")
  5.         .LongitudeMemberPath("Lng")
  6.         .HeatMaximum(5)
  7.         .HeatMinimum(0);
  8. })

Image:

Geographic High Density Scatter Series

 

Conclusion

The Ignite UI  Geographic High Density Scatter Series feature of the igMap control, comes in handy when you need to display a large amount of data over the map. With its overflowing points you can easily show the most saturated places and thus help the end users make conclusions based on the presented data. For instance you can show all of the cities in US and the map will look like that:

Cities in US

 

You can find the sample ASP.NET MVC project demo.

 

Downliad Ignite UI

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!