Visualize the FIFA World Cup Finalists and Winners in a RadMap Control

With the 2014.Q2 release of Telerik UI for ASP.NET AJAX we released a new map control, which offers excellent client-side responsiveness and user experience. But is it easy for developers to work with? The answer is yes. I tested it right after the FIFA World Cup final, which took place on July 13, 2014 at the Maracanã Stadium in Rio de Janeiro, Brazil. I encountered a scenario in which I had to create a map showing all the countries’ finalists in the history of the championship and add a cup icon in the capital of each winning country.
I started with a blank Telerik Web Application and in the few steps shown below, I was able to configure the map:

Adding a Layer for All Countries to the Map

As a starting point, I used the Map - Shapes Layer demo in the Telerik UI for ASP.NET AJAX examples. It shows how to display and customize shapes based on data in GeoJSON format. There, I found a countries.json file, which contains the shapes declaration of all the countries, which I needed to be rendered in the map. Reviewing the DefaultCS.aspx code in the example, I found that I need an instance of the RadClientDataSource control, which is one of the new gems the 2014.Q2 release brought. It serves the JSON data to the map. Here is its declaration in the Default.aspx page of my test project.

Right afterwards, I declared the RadMap control. In its LayersCollection, I added a MapLayer with Type property set to Shape and ClientDataSourceID pointing to “CountiresClientDataSource”.

The code led to the result shown in Figure 1.

Figure 1: Map showing plain country borders

Colorizing the Shapes of the FIFA Finalists

What I needed in the data though, was how many times a country was a finalist in the FIFA World Cup. I used a simple regular expression \"users":[\d]*\ to replace all the occurrences of “users” info by "finals": 0 and then changed the 0 value for each finalist. I ended with the following file countries.json.

I attached an event handler to the RadMap’s ShapeCreated client-side event, in which the shape’s color is set according the “finals” data property.

The implementation of the radMapHandlers.OnShapeCreated JavaScript method I added in a map_handlers.js in the js folder of my project.

I included both chroma.min.js and map_handlers.js files in the Default.aspx page.

The result is shown below.

Figure 2: Map showing the FIFA World Cup finalists

Adding the Markers.

Since there are only eight countries that have won the world title so far, I decided to create a small DataSet object containing this data and bind the RadMap control to it. I found all the info on how to achieve this in the Map - DataSet example. By copying the demo source and tweaking it a little bit, I ended up with the following implementation:

The result is shown in Figure 3.

Figure 3: RadMap showing FIFA World Cup winners with default markers.

Tweaking the Markers’ Appearance

This is where the Map - Client-side Data Binding example came in handy. In it, the markers appear as small pins, so I figured out that their default appearance can be changed by adding a few simple CSS rules to the page. These are the ones my style sheet ended with.

The final result is shown in Figure 4.

Figure 4: RadMap showing FIFA World Cup winners with markers styled as a cup trophy

Try it Yourself

The rich built-in functionality of the Map enables you to add and control predefined layouts, markers, tooltips, zoom levels, UI elements and many more.

Don’t forget to download a trial of Telerik UI for ASP.NET AJAX. The source code of the demo application is also available here.