(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

Create a Silverlight Europe weather map

(7 votes)
Andrej Tozon
>
Andrej Tozon
Joined Jan 22, 2009
Articles:   6
Comments:   6
More Articles
10 comments   /   posted on Dec 02, 2009
Tags:   bing-maps , andrej-tozon
Categories:   General

This article is compatible with the latest version of Silverlight.

I don’t generally find the fall or winter an appropriate time to track weather conditions, but this is an exception. Microsoft recently released the Bing Maps Silverlight Control SDK, which ties Silverlight and Bing Maps closely together, allowing developers to create some very powerful mapping applications. In this article, I’ll walk the reader through the process of creating an Europe weather map application in Silverlight by using the Bing Maps Silverlight Control.

Getting started

To use the control in Silverlight projects, you have to download the Bing Maps Silverlight Control SDK and install it. If not already done so, you’ll have to create a Bing Maps Developer Account at https://www.bingmapsportal.com/ (you’ll need a Windows Live ID). After your account has been created, you’ll have to create at least one Bing Maps key for accessing the Bing Maps services (max 5 keys are allowed). With the key created, you’re ready to create your first Bing Maps Application. One last thing. After creating a Silverlight project in Visual Studio or Blend, make sure you include (Add Reference…) the following libraries in the project: Microsoft.Maps.MapControl.dll and Microsoft.Maps.MapControl.Common.dll.

Getting the data

In order to create a weather map, we need information about the current weather condition. I used XML feeds that our National Environmental Agency provides as a service. There are currently four feeds to choose from – I used the feeds for Europe’s capital and other larger cities.

Each feed provides a bunch of metadata about the feed itself (such as credits, suggested pickup time and period, etc.), as well as a collection of items, describing the weather conditions for included locations. This is an example of an item definition in one of the feeds (short excerpt):

<nn_icon>modCloudy</nn_icon> 
<nn_shortText>moderately cloudy</nn_shortText> 
<nn_decodeText>5/8 .. 6/8</nn_decodeText> 
<wwsyn_icon /> 
<wwsyn_shortText>Rain</wwsyn_shortText> 
<wwsyn_longText>Rain (not freezing)</wwsyn_longText> 
<nn_icon-wwsyn_icon>modCloudy</nn_icon-wwsyn_icon> 
<t_var_desc>Temperature</t_var_desc> 
<t_var_unit>°C</t_var_unit> 
<t>8</t> 
<t_degreesC>8</t_degreesC> 
<windchill /> 
<vis_value>45</vis_value> 
<vis_unit>km</vis_unit> 

This XML elements have to be parsed into a valid structure and stored in the database. LINQ2XML query will be used to parse the XML…WeatherCondition

var data = 
    from item in document.Root.Elements("metData")  
    select new WeatherCondition 
    { 
        MeteoId = item.Element("domain_meteosiId").Value, 
        UpdatedTime = item.Element("tsUpdated_UTC").Value, 
        City = item.Element("domain_longTitle").Value, 
        CountryCode = item.Element("domain_countryIsoCode2").Value, 
        Latitude = decimal.Parse(item.Element("domain_lat").Value, 
            System.Globalization.CultureInfo.GetCultureInfo("en-us")), 
        Longitude = decimal.Parse(item.Element("domain_lon").Value, 
            System.Globalization.CultureInfo.GetCultureInfo("en-us")), 
        Condition = item.Element("nn_shortText").Value, 
        ConditionIcon = item.Element("nn_icon").Value, 
        Weather = item.Element("wwsyn_shortText").Value, 
        Temperature = int.Parse(item.Element("t").Value), 
        TemperatureUnit = item.Element("t_var_unit").Value, 
        Humidity = item.Element("rh").Value.Length == 0 ? 
            default(int?) : int.Parse(item.Element("rh").Value), 
        HumidityUnit = item.Element("rh_var_unit").Value, 
        ... 
    };

… and LINQ2SQL will help us store it into the database…

List<WeatherCondition> items = Collect(); 
WeatherDataContext context = new WeatherDataContext(); 
context.ExecuteCommand("delete dbo.WeatherCondition"); 
context.WeatherConditions.InsertAllOnSubmit(items); 
context.SubmitChanges();

Of course, this part was done on the server side. We need to expose this data as a service:

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode=AspNetCompatibilityRequirementsMode.Allowed)]
public class WeatherService
{
    [OperationContract]
    public IEnumerable<WeatherCondition> GetWeatherConditions()
    {
        return from wc in new WeatherDataContext().WeatherConditions select wc;
    }
}

With weather data captured and exposed as a WeatherService, we’re ready to move on to the client part .

Setting up the Map control

The first thing to do after putting a Bing Maps control on a Silverlight page is setting the Bing Maps key you created previously. All the control’s properties can be found under the Miscellaneous section. You set the key by pasting it into the CredentialsProvider field. Don’t worry if the text changes to something else when focusing out of the field; it’s just the name of the ApplicationIdCredentialsProvider object, holding a reference to your key.

image

<map:Map.CredentialsProvider>
    <map:ApplicationIdCredentialsProvider ApplicationId="Your-Key"/>
</map:Map.CredentialsProvider>

There are additional options for controlling what is displayed on the map and how: you can set the Mode property to either Road or Aerial, hide logo, copyright, navigation and scale overlays, set zoom level and initial center point, etc.

Setting various properties of the Bing Map control

Putting data into the context

The map control gets the weather data from the ViewModel, which is responsible for calling the WeatherService to collect the data, whenever required. The MainPageViewModel exposes weather conditions as a collection property to be easily consumed by the control (a common MVVM pattern scenario). The MapItemsControl object adds ItemsControl-like features to the map control,  making it bindable to a collection of items, while enabling visual appearance changes to either control itself, and/or bound items.

MapItemsControl 

Each weather condition should be represented by its own icon. There’s another class in the SDK called Pushpin – this one is used to put custom objects on the map. Using it in the MapItemsControl’s ItemTemplate will get all the bound items pinned to the bound location.

PushPin 

Pushpin’s location property can be bound to the underlying object’s location of type Location. Because the Location type is proprietary to the Map control it’s not very likely to be defined and exposed on the server side object. We can, however, extend the client proxy item class to expose the Location property:

namespace WeatherMap.WeatherServiceProxy
{
    public partial class WeatherCondition
    {
        public Location Location
        {
            get { return new Location((double)Latitude, (double)Longitude) ;}
        }
    }
}

Displaying weather icons

Each Pushpin should have a look that would correspond to the current weather condition for that place. This could easily be achieved by putting an Image control into the Pushpin template and setting its source to point to an appropriate icon file, possibly through a kind of value converter. Finding this approach being somehow limiting, I went with a bit more flexible way – using a custom template selector, I was able to define how weather would be represented for each condition. The template selector is bound to the CurrentCondtion property, which is a derivate of two parts: the sky cloud coverage (cloudiness) and precipitation (rain, snow, fog, …). Because a lot of different combinations are possible, I simplified the logic by reducing them to the following mapping table:

<local:TemplateSelector x:Name="templateSelector" DataType="{Binding CurrentCondition}">
    <local:TemplateSelector.DataTemplates>
        <local:TemplateSelectorDataTemplate DataType="clear">
            <local:Clear />
        </local:TemplateSelectorDataTemplate>
        <local:TemplateSelectorDataTemplate DataType="Clear">
            <local:Overcast />
        </local:TemplateSelectorDataTemplate>
        <local:TemplateSelectorDataTemplate DataType="overcast">
            <local:Overcast />
        </local:TemplateSelectorDataTemplate>
        <local:TemplateSelectorDataTemplate DataType="Cloudy">
            <local:Cloudy />
        </local:TemplateSelectorDataTemplate>
        <local:TemplateSelectorDataTemplate DataType="FG">
            <local:Fog />
        </local:TemplateSelectorDataTemplate>
 
        <local:TemplateSelectorDataTemplate DataType="RA">
            <local:Rain />
        </local:TemplateSelectorDataTemplate>
        <local:TemplateSelectorDataTemplate DataType="SN">
            <local:Snow />
        </local:TemplateSelectorDataTemplate>
        <local:TemplateSelectorDataTemplate DataType="TH">
            <local:Thunder />
        </local:TemplateSelectorDataTemplate>
        <local:TemplateSelectorDataTemplate>
            <TextBlock Text="{Binding CurrentCondition}" />
        </local:TemplateSelectorDataTemplate>
    </local:TemplateSelector.DataTemplates>
</local:TemplateSelector>

Each template contains a single user control, graphically representing a weather condition. And by graphically, I don’t mean just a static icon (we could have used a simple bitmap icon for that); by using XAML, we can put the icon in motion through various animations.

Current weather conditions

Lastly, we can create ‘layers’ of presenting different conditions. Using a very simple animation for switching the opacity of two controls, we can transition from an graphics conditions view to the temperature view. The ControlStoryboardAction behavior was used for starting this continuous transition when the page first loaded.

Current temperature

Showing full weather details

 

Users, wanting to know more information about current conditions, will be able to click on any weather symbol on the map to get the details. A customized ChildWindow control will be used to display the data, and a special ShowWindowAction behavior will be used to show it:

[DefaultTrigger(typeof(UIElement), typeof(System.Windows.Interactivity.EventTrigger), 
    new object[] { "MouseLeftButtonDown" })]
public class ShowChildWindowAction : TriggerAction<FrameworkElement>
{
    public string ChildWindowType { get; set; }
 
    protected override void Invoke(object parameter)
    {
        ChildWindow window = Activator.CreateInstance(
            Type.GetType(ChildWindowType, false, true)) as ChildWindow;
        if (window == null)
        {
            return;
        }
        if (AssociatedObject != null)
        {
            window.DataContext = AssociatedObject.DataContext;
        }
        window.Show();
    }
}

This behavior simply takes the name of the ChildWindow, and in case of successfully creating a new instance, sets its DataContext to whatever context the associated object had. The ChildWindowType property should be set to a fully qualified object name. This is because Silverlight doesn’t support binding to types.

Weather conditions details

Summary

Bing Maps Silverlight control is a very powerful, yet simple to use Silverlight control for creating virtually any kind of online location-based visualization application. Its data binding abilities make it “blendable” plus you can use Bing Maps Web Services to (reverse) geocode locations and even calculate a travel route.

This tutorial covered the very basics of creating a Silverlight weather map. Many improvements to the application is in the works, including better graphics (current icons were taken from the Weather Sniffer and animated), more accurate information, ability to play back recorded history, etc.

Many additional mapping samples are provided to explore through Bing Maps Silverlight Control Interactive SDK.

Download source code.

Run the Europe weather map application online.


Subscribe

Comments

  • -_-

    RE: Create a Silverlight Europe weather map


    posted by Pasc on Dec 18, 2009 18:32
    Very interesting use of the bing map sdk. Thanks too for the source code, btw the database is missing, I had to create one with a table that matches the dbml diagram.
  • andrejt

    RE: Create a Silverlight Europe weather map


    posted by andrejt on Dec 21, 2009 13:15
    Thanks! Yes, the database wasn't meant to be included in the source code package.
  • -_-

    RE: Create a Silverlight Europe weather map


    posted by femi on Feb 09, 2010 22:47
    Great article..Now how can i do the same thing but using SL3 RIA Services?
  • -_-

    RE: Create a Silverlight Europe weather map


    posted by pedros on Jun 30, 2010 16:05
    Very nice article. One thing. Would you please provide me some links where I can find weather informations for USA cities?
  • -_-

    RE: Create a Silverlight Europe weather map


    posted by Al on Jul 12, 2010 11:49

    best map weather for ever thank you

     

  • -_-

    RE: Create a Silverlight Europe weather map


    posted by Joshua on Jul 15, 2010 18:36
    The weather information isn't displaying on the map (it was a couple days ago).  FYI
  • -_-

    RE: Create a Silverlight Europe weather map


    posted by Khalid on Sep 01, 2010 10:55

    Thank you for your great article but i'm having trouble downloading the source code.

    Could you please also tell me where I could find weather information for all parts of the world?

    Thanks.

  • -_-

    RE: Create a Silverlight Europe weather map


    posted by Calvin on Jan 12, 2011 21:27
    How can I stop the animiation? I cannot stop the storyboard because it is part of the DataTemplate. Thanks.
  • lnikolov

    RE: Create a Silverlight Europe weather map


    posted by lnikolov on Feb 08, 2011 08:56
    The article has been updated to the latest version of Silverlight and Visual Studio.
  • -_-

    RE: Create a Silverlight Europe weather map


    posted by Tarkan Aydogan on May 22, 2011 15:43

    nice very nice... well work in Adobe Flash As3

    Good day

Add Comment

Login to comment:
  *      *