Customizing the Infragistics Map for jQuery Dashboards

In the latest video about our marketing dashboard sample application, we're going to take you behind the scenes of how we've customized the map specifically for the dashboard.

Often our map is used with OpenStreetMaps or Bing Maps to provide rich interaction for geographical data, but for our purposes we have some specific needs of how we want the look and feel of the map to reflect the theme of the application.

On top of that for this use case we're simply plotting data over a static map, so here we've disabled zooming and panning and we just want to provide an overview of where the map is coming from.

The map you see here is our map control used with a custom shape and database files. The data points are plotted on the map at a one second interval. All right, now let's dig into the code so you can see how we've put it together.

As you begin working with the solution for the marketing dashboard, you'll encounter a JavaScript file called renderingService.js. This service is a JavaScript module that's responsible for rendering not only controls, but other elements into the dashboard.

You'll see that there's a function specific for the map. The control is instantiated by calling IG Map and passing in a number of options. We begin by setting the width and the height and then saying that we don't want the map to zoom.

The reason for this is because we're providing a custom shape file and it does a really good job of tracing the outline of the world's continents, but it's not a high resolution file. By not providing a high resolution file, this is another benefit to us because it keeps the shape file down and file size and so it makes the sight responsive.

We set the data source to the array of data that's relevant to the map and then set the window rectangle. These are the dimensions of the map itself inside the container. The height and the width are the container for the map, but the window rectangle basically sets the initial zoom level. We're turning off cross-hair visibility and then setting background content equal to null.

This step is important because normally this is where you would set up OpenStreetMaps or Bing Maps. Again, since we're providing a custom visualization, we'll set that background content equal to null.

Now there's two series for the map. The first series is a geographic shape series. We're giving it the name of World. The shape data source is being set to that shape file that I was referring to previously.

Now along with shape information you also have to provide the map with data to know how to plot the individual data points that you provide in subsequent series, so here this database file has all the information that the control needs in order to plot data relative to the shape that it draws within the map.

Then set the colors for brush and outline to give it the look and feel that we want. That basically takes care of the background of the map. The next series is the series that we use in order to plot data on the map. The type here is geographicProportionalSymbol. This series allows us to provide values for latitude and longitude, so the map knows where to plot the data.

We're going to set the marker type to circle and then give it some color. Now we'd like to provide a custom tool tip for the map and so we'll use the tool tip template here in order to show the country and the number of sessions associated with that country.

The value of this item is calculated by using radius member path and that will come in on the data object under the scaled sessions property. As it animates we'll set the transition duration to 1,000.

That's the setup for the map. Now we'll move over to the view model in order to show you how we're interacting with it. Now if you recall from how the dashboard works, we have the map in a progress bar underneath the map that animates once you press the button, so what we need to do now is implement the code that runs once you click that play button.

This is the handler for the button that you click in order to start plotting data on the map. This function will toggle between pausing the animation and playing the animation. The first thing that it does is looks to see if there's an existing interval. If this button's been clicked and the interval has a value, then that means that we have to stop the animation.

If that's true it will go to clear the interval, change the text on the map button to say play and remove the selected class. Once it's done with that it can return up to the collar. If we need to turn that animation on then we can go down and create the interval and then implement the logic to update the data rendered on the map.

Here we're tracking the current index of the data point that we're plotting on the map. We need to make sure that it fits within the bounds. If it goes out of bounds then we'll set it back to zero.

Then we'll take that value and set it as the value for the progress bar so that the progress bar below the map continues to be updated and then we update the map data by sending in the current data items per location data. That happens every one second.

Once that interval setup then we set the map text, it will pause and then add the selected class. Before we finish up, let's take a look at the function for update map data.

Here what we're doing is taking the current map data and setting that aside into the map variable and then simply updating each one of the individual data member points inside the loop. That way the data that's bound to the map is updated by the data that we pass into the function. Then by calling IG Maps notify set item method it knows to update the data that's rendered on the map and now we have the freshest data available on the screen.

And that’s it! If you haven't had an opportunity to download and work with the code yourself, make sure to download Ultimate and get the code via the banner below. Enjoy!