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.

 

Markup
<telerik:RadClientDataSource runat="server" ID="CountiresClientDataSource">
    <DataSource>
       <WebServiceDataSourceSettings ServiceType="GeoJSON">
            <Select Url="Content/countries.json" DataType="JSON" />
        </WebServiceDataSourceSettings>
    </DataSource>
</telerik:RadClientDataSource>

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”.

 

Markup
<telerik:RadMap ID="FifaWorldCupMap" runat="server">
    <LayersCollection>
        <telerik:MapLayer ClientDataSourceID="RadClientDataSource1" Type="Shape" ></telerik:MapLayer>
    </LayersCollection>
</telerik:RadMap>

The code led to the result shown in Figure 1.

Map Countries
Figure 1
: Map showing plain country borders

Colorizing the Shapes of the FIFA Finalists

 

The Overview article about RadMap starts with the following statement: “RadMap for ASP.NET AJAX is a control powered by the Kendo UI DataViz Map widget”. So I decided to review the online examples of Kendo UI Components as well. I found exactly what I was looking for in the Map / Binding to GeoJSON demo. In this example, all the countries’ background color is scaled by a JavaScript library for color conversions called chroma-js according to the “users” property provided in the GeoJSON data bound to the map. It turns out that it is the same data I had already acquired.

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.

 

Markup
<telerik:RadMap ID="FifaWorldCupMap" runat="server”>
    <ClientEvents OnShapeCreated="radMapHandlers.OnShapeCreated" />
    <LayersCollection>
        <telerik:MapLayer ClientDataSourceID="RadClientDataSource1" Type="Shape" ></telerik:MapLayer>
    </LayersCollection>
</telerik:RadMap>

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

JavaScript
(function () {
    var radMapHandlers = window.radMapHandlers = window.radMapHandlers || {},
        scale = chroma
            .scale(["white", "#35B3FD"])
            .domain([0, 8]);
  
    radMapHandlers.OnShapeCreated = function (e) {
        var shape = e.shape;
        var finals = shape.dataItem.properties.finals;
        if (finals) {
            var color = scale(finals).hex();
            shape.fill(color);
        }
    }
})();

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

Markup
<script src="js/chroma.min.js" type="text/javascript"></script>
<script src="js/map_handlers.js" type="text/javascript"></script>

The result is shown below.

Map Fifa Finalists
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:

 

Markup
<telerik:RadMap ID="FifaWorldCupMap" runat="server">
    <DataBindings>
        <MarkerBinding DataTitleField="City" DataTooltipContentField="ToolTip" DataLocationLatitudeField="Latitude" DataLocationLongitudeField="Longitude" />
    </DataBindings>
    <ClientEvents OnShapeCreated="radMapHandlers.OnShapeCreated" />
    <LayersCollection>
        <telerik:MapLayer ClientDataSourceID="CountiresClientDataSource" Type="Shape"></telerik:MapLayer>
    </LayersCollection>
</telerik:RadMap>

c#
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        FifaWorldCupMap.DataSource = GetFifaWorldCupWinners();
        FifaWorldCupMap.DataBind();
    }
}
  
private DataSet GetFifaWorldCupWinners()
{
    DataSet ds = new DataSet("FifeTitleWinners");
  
    DataTable dt = new DataTable("FifaWorldCupWinnersTable");
    dt.Columns.Add("Country", Type.GetType("System.String"));
    dt.Columns.Add("City", Type.GetType("System.String"));
    dt.Columns.Add("ToolTip", Type.GetType("System.String"));
    dt.Columns.Add("Latitude", Type.GetType("System.Decimal"));
    dt.Columns.Add("Longitude", Type.GetType("System.Decimal"));
  
    dt.Rows.Add("Brazil", "Brasilia", "Brazil has 5 titles!", -15.86670, -47.91670);
    dt.Rows.Add("Germany", "Berlin", "Germany has 4 titles!", 52.51670, 13.33330);
    dt.Rows.Add("Italy", "Rome", "Italy has 4 titles!", 41.86670, 12.61670);
    dt.Rows.Add("Argentina", "Buenos Aires", "Argentina has 2 titles!", -34.33320, -58.49990);
    dt.Rows.Add("Uruguay", "Montevideo", "Uruguay has 2 titles!", -34.83320, -56.16660);
    dt.Rows.Add("France", "Paris", "France has 1 title!", 48.85000, 2.33330);
    dt.Rows.Add("England", "London", "England has 1 title!", 51.50000, -0.11670);
    dt.Rows.Add("Spain", "Madrid", "Spain has 1 title!", 40.43330, -3.70000);
  
    ds.Tables.Add(dt);
    return ds;
}

The result is shown in Figure 3.

Fifa Map Original Markers
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.

 

CSS
.RadMap span.k-marker {
    margin-top: -38px;
    background-image: url(../images/FIFA-World-Cup-32x32.png);
}
 
.RadMap span.k-marker:before {
    content: "";
    color: none;
    text-shadow: none;
    height: auto;
    width: auto;
    padding: 0;
}

The final result is shown in Figure 4.

Final Fifa Map With Winners And Styled Markers
Figure 4
: RadMap showing FIFA World Cup winners with markers styled as a cup trophy

Try it Yourself

 

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.

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.


About the Author

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.

Related Posts

Comments

Comments are disabled in preview mode.