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:
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
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.
I included both chroma.min.js and map_handlers.js files in the Default.aspx page.Markup
The result is shown below.
Figure 2: Map showing the FIFA World Cup finalists
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.
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
With a few easy steps by reviewing both Telerik UI For ASP.NET and Kendo UI online demos, you are able to create helpful map modules in ASP.NET WebForms applications.
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.
Stanimir Patarinski is currently a senior software developer at Telerik Corp. He joined the company in the end of 2008 and his experience is centered on the ASP.NET AJAX products from Telerik, particularly the RadEditor control. He is an MCPD certified Web, SharePoint and Azure developer and has extensive knowledge about the integration of RadControls in third-party applications including SharePoint 2007, 2010, 2013.
Subscribe to be the first to get our expert-written articles and tutorials for developers!