Introducing the Earthquake Locator – A Bing Maps Silverlight Application, part 1
- by Bobby Diaz
Update: Live demo and source code now available!
The recent wave of earthquakes (no pun intended) being reported in the news got me wondering about the frequency and severity of earthquakes around the world. Since I’ve been doing a lot of Silverlight development lately, I decided to scratch my curiosity with a nice little Bing Maps application that will show the location and relative strength of recent seismic activity.
Here is a list of technologies this application will utilize, so be sure to have everything downloaded and installed if you plan on following along.
Silverlight 3
WCF RIA Services
Bing Maps Silverlight Control *
Managed Extensibility Framework (optional)
MVVM Light Toolkit (optional)
log4net (optional)
* If you are new to Bing Maps or have not signed up for a Developer Account, you will need to visit www.bingmapsportal.com to request a Bing Maps key for your application.
Getting Started
We start out by creating a new Silverlight Application called EarthquakeLocator and specify that we want to automatically create the Web Application Project with RIA Services enabled.
I cleaned up the web app by removing the Default.aspx and EarthquakeLocatorTestPage.html. Then I renamed the EarthquakeLocatorTestPage.aspx to Default.aspx and set it as my start page. I also set the development server to use a specific port, as shown below.
RIA Services
Next, I created a Services folder in the EarthquakeLocator.Web project and added a new Domain Service Class called EarthquakeService.cs. This is the RIA Services Domain Service that will provide earthquake data for our client application. I am not using LINQ to SQL or Entity Framework, so I will use the <empty domain service class> option. We will be pulling data from an external Atom feed, but this example could just as easily pull data from a database or another web service. This is an important distinction to point out because each scenario I just mentioned could potentially use a different Domain Service base class (i.e. LinqToSqlDomainService<TDataContext>).
Now we can start adding Query methods to our EarthquakeService that pull data from the USGS web site. Here is the complete code for our service class:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.ServiceModel.Syndication;
using System.Web.DomainServices;
using System.Web.Ria;
using System.Xml;
using log4net;
using EarthquakeLocator.Web.Model;
namespace EarthquakeLocator.Web.Services
{
/// <summary>
/// Provides earthquake data to client applications.
/// </summary>
[EnableClientAccess()]
public class EarthquakeService : DomainService
{
private static readonly ILog log = LogManager.GetLogger(typeof(EarthquakeService));
// USGS Data Feeds: http://earthquake.usgs.gov/earthquakes/catalogs/
private const string FeedForPreviousDay =
"http://earthquake.usgs.gov/earthquakes/catalogs/1day-M2.5.xml";
private const string FeedForPreviousWeek =
"http://earthquake.usgs.gov/earthquakes/catalogs/7day-M2.5.xml";
/// <summary>
/// Gets the earthquake data for the previous week.
/// </summary>
/// <returns>A queryable collection of <see cref="Earthquake"/> objects.</returns>
public IQueryable<Earthquake> GetEarthquakes()
{
var feed = GetFeed(FeedForPreviousWeek);
var list = new List<Earthquake>();
if ( feed != null )
{
foreach ( var entry in feed.Items )
{
var quake = CreateEarthquake(entry);
if ( quake != null )
{
list.Add(quake);
}
}
}
return list.AsQueryable();
}
/// <summary>
/// Creates an <see cref="Earthquake"/> object for each entry in the Atom feed.
/// </summary>
/// <param name="entry">The Atom entry.</param>
/// <returns></returns>
private Earthquake CreateEarthquake(SyndicationItem entry)
{
Earthquake quake = null;
string title = entry.Title.Text;
string summary = entry.Summary.Text;
string point = GetElementValue<String>(entry, "point");
string depth = GetElementValue<String>(entry, "elev");
string utcTime = null;
string localTime = null;
string depthDesc = null;
double? magnitude = null;
double? latitude = null;
double? longitude = null;
double? depthKm = null;
if ( !String.IsNullOrEmpty(title) && title.StartsWith("M") )
{
title = title.Substring(2, title.IndexOf(',')-3).Trim();
magnitude = TryParse(title);
}
if ( !String.IsNullOrEmpty(point) )
{
var values = point.Split(' ');
if ( values.Length == 2 )
{
latitude = TryParse(values[0]);
longitude = TryParse(values[1]);
}
}
if ( !String.IsNullOrEmpty(depth) )
{
depthKm = TryParse(depth);
if ( depthKm != null )
{
depthKm = Math.Round((-1 * depthKm.Value) / 100, 2);
}
}
if ( !String.IsNullOrEmpty(summary) )
{
summary = summary.Replace("</p>", "");
var values = summary.Split(
new string[] { "<p>" },
StringSplitOptions.RemoveEmptyEntries);
if ( values.Length == 3 )
{
var times = values[1].Split(
new string[] { "<br>" },
StringSplitOptions.RemoveEmptyEntries);
if ( times.Length > 0 )
{
utcTime = times[0];
}
if ( times.Length > 1 )
{
localTime = times[1];
}
depthDesc = values[2];
depthDesc = "Depth: " + depthDesc.Substring(depthDesc.IndexOf(":") + 2);
}
}
if ( latitude != null && longitude != null )
{
quake = new Earthquake()
{
Id = entry.Id,
Title = entry.Title.Text,
Summary = entry.Summary.Text,
Date = entry.LastUpdatedTime.DateTime,
Url = entry.Links.Select(l => Path.Combine(l.BaseUri.OriginalString,
l.Uri.OriginalString)).FirstOrDefault(),
Age = entry.Categories.Where(c => c.Label == "Age")
.Select(c => c.Name).FirstOrDefault(),
Magnitude = magnitude.GetValueOrDefault(),
Latitude = latitude.GetValueOrDefault(),
Longitude = longitude.GetValueOrDefault(),
DepthInKm = depthKm.GetValueOrDefault(),
DepthDesc = depthDesc,
UtcTime = utcTime,
LocalTime = localTime
};
}
return quake;
}
private T GetElementValue<T>(SyndicationItem entry, String name)
{
var el = entry.ElementExtensions.Where(e => e.OuterName == name).FirstOrDefault();
T value = default(T);
if ( el != null )
{
value = el.GetObject<T>();
}
return value;
}
private double? TryParse(String value)
{
double d;
if ( Double.TryParse(value, out d) )
{
return d;
}
return null;
}
/// <summary>
/// Gets the feed at the specified URL.
/// </summary>
/// <param name="url">The URL.</param>
/// <returns>A <see cref="SyndicationFeed"/> object.</returns>
public static SyndicationFeed GetFeed(String url)
{
SyndicationFeed feed = null;
try
{
log.Debug("Loading RSS feed: " + url);
using ( var reader = XmlReader.Create(url) )
{
feed = SyndicationFeed.Load(reader);
}
}
catch ( Exception ex )
{
log.Error("Error occurred while loading RSS feed: " + url, ex);
}
return feed;
}
}
}
The only method that will be generated in the client side proxy class, EarthquakeContext, will be the GetEarthquakes() method. The reason being that it is the only public instance method and it returns an IQueryable<Earthquake> collection that can be consumed by the client application. GetEarthquakes() calls the static GetFeed(String) method, which utilizes the built in SyndicationFeed API to load the external data feed. You will need to add a reference to the System.ServiceModel.Web library in order to take advantage of the RSS/Atom reader. The API will also allow you to create your own feeds to serve up in your applications.
Model
I have also created a Model folder and added a new class, Earthquake.cs. The Earthquake object will hold the various properties returned from the Atom feed. Here is a sample of the code for that class. Notice the [Key] attribute on the Id property, which is required by RIA Services to uniquely identify the entity.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ComponentModel.DataAnnotations;
namespace EarthquakeLocator.Web.Model
{
/// <summary>
/// Represents an earthquake occurrence and related information.
/// </summary>
[DataContract]
public class Earthquake
{
/// <summary>
/// Gets or sets the id.
/// </summary>
/// <value>The id.</value>
[Key]
[DataMember]
public string Id { get; set; }
/// <summary>
/// Gets or sets the title.
/// </summary>
/// <value>The title.</value>
[DataMember]
public string Title { get; set; }
/// <summary>
/// Gets or sets the summary.
/// </summary>
/// <value>The summary.</value>
[DataMember]
public string Summary { get; set; }
// additional properties omitted
}
}
View Model
The recent trend to use the MVVM pattern for WPF and Silverlight provides a great way to separate the data and behavior logic out of the user interface layer of your client applications. I have chosen to use the MVVM Light Toolkit for the Earthquake Locator, but there are other options out there if you prefer another library. That said, I went ahead and created a ViewModel folder in the Silverlight project and added a EarthquakeViewModel class that derives from ViewModelBase. Here is the code:
using System;
using System.Collections.ObjectModel;
using System.ComponentModel.Composition;
using System.ComponentModel.Composition.Hosting;
using Microsoft.Maps.MapControl;
using GalaSoft.MvvmLight;
using EarthquakeLocator.Web.Model;
using EarthquakeLocator.Web.Services;
namespace EarthquakeLocator.ViewModel
{
/// <summary>
/// Provides data for views displaying earthquake information.
/// </summary>
public class EarthquakeViewModel : ViewModelBase
{
[Import]
public EarthquakeContext Context;
/// <summary>
/// Initializes a new instance of the <see cref="EarthquakeViewModel"/> class.
/// </summary>
public EarthquakeViewModel()
{
var catalog = new AssemblyCatalog(GetType().Assembly);
var container = new CompositionContainer(catalog);
container.ComposeParts(this);
Initialize();
}
/// <summary>
/// Initializes a new instance of the <see cref="EarthquakeViewModel"/> class.
/// </summary>
/// <param name="context">The context.</param>
public EarthquakeViewModel(EarthquakeContext context)
{
Context = context;
Initialize();
}
private void Initialize()
{
MapCenter = new Location(20, -170);
ZoomLevel = 2;
}
#region Private Methods
private void OnAutoLoadDataChanged()
{
LoadEarthquakes();
}
private void LoadEarthquakes()
{
var query = Context.GetEarthquakesQuery();
Context.Earthquakes.Clear();
Context.Load(query, (op) =>
{
if ( !op.HasError )
{
foreach ( var item in op.Entities )
{
Earthquakes.Add(item);
}
}
}, null);
}
#endregion Private Methods
#region Properties
private bool autoLoadData;
/// <summary>
/// Gets or sets a value indicating whether to auto load data.
/// </summary>
/// <value><c>true</c> if auto loading data; otherwise, <c>false</c>.</value>
public bool AutoLoadData
{
get { return autoLoadData; }
set
{
if ( autoLoadData != value )
{
autoLoadData = value;
RaisePropertyChanged("AutoLoadData");
OnAutoLoadDataChanged();
}
}
}
private ObservableCollection<Earthquake> earthquakes;
/// <summary>
/// Gets the collection of earthquakes to display.
/// </summary>
/// <value>The collection of earthquakes.</value>
public ObservableCollection<Earthquake> Earthquakes
{
get
{
if ( earthquakes == null )
{
earthquakes = new ObservableCollection<Earthquake>();
}
return earthquakes;
}
}
private Location mapCenter;
/// <summary>
/// Gets or sets the map center.
/// </summary>
/// <value>The map center.</value>
public Location MapCenter
{
get { return mapCenter; }
set
{
if ( mapCenter != value )
{
mapCenter = value;
RaisePropertyChanged("MapCenter");
}
}
}
private double zoomLevel;
/// <summary>
/// Gets or sets the zoom level.
/// </summary>
/// <value>The zoom level.</value>
public double ZoomLevel
{
get { return zoomLevel; }
set
{
if ( zoomLevel != value )
{
zoomLevel = value;
RaisePropertyChanged("ZoomLevel");
}
}
}
#endregion Properties
}
}
The EarthquakeViewModel class contains all of the properties that will be bound to by the various controls in our views. Be sure to read through the LoadEarthquakes() method, which handles calling the GetEarthquakes() method in our EarthquakeService via the EarthquakeContext proxy, and also transfers the loaded entities into the view model’s Earthquakes collection.
Another thing to notice is what’s going on in the default constructor. I chose to use the Managed Extensibility Framework (MEF) for my composition needs, but you can use any dependency injection library or none at all. To allow the EarthquakeContext class to be discoverable by MEF, I added the following partial class so that I could supply the appropriate [Export] attribute:
using System;
using System.ComponentModel.Composition;
namespace EarthquakeLocator.Web.Services
{
/// <summary>
/// The client side proxy for the EarthquakeService class.
/// </summary>
[Export]
public partial class EarthquakeContext
{
}
}
One last piece I wanted to point out before moving on to the user interface, I added a client side partial class for the Earthquake entity that contains helper properties that we will bind to later:
using System;
namespace EarthquakeLocator.Web.Model
{
/// <summary>
/// Represents an earthquake occurrence and related information.
/// </summary>
public partial class Earthquake
{
/// <summary>
/// Gets the location based on the current Latitude/Longitude.
/// </summary>
/// <value>The location.</value>
public string Location
{
get { return String.Format("{0},{1}", Latitude, Longitude); }
}
/// <summary>
/// Gets the size based on the Magnitude.
/// </summary>
/// <value>The size.</value>
public double Size
{
get { return (Magnitude * 3); }
}
}
}
View
Now the fun part! Usually, I would create a Views folder to place all of my View controls in, but I took the easy way out and added the following XAML code to the default MainPage.xaml file. Be sure to add the bing prefix associating the Microsoft.Maps.MapControl namespace after adding the assembly reference to your project.
The MVVM Light Toolkit project templates come with a ViewModelLocator class that you can use via a static resource, but I am instantiating the EarthquakeViewModel directly in my user control. I am setting the AutoLoadData property to true as a way to trigger the LoadEarthquakes() method call. The MapItemsControl found within the <bing:Map> control binds its ItemsSource property to the Earthquakes collection of the view model, and since it is an ObservableCollection<T>, we get the automatic two way data binding via the INotifyCollectionChanged interface.
<UserControl x:Class="EarthquakeLocator.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:bing="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
xmlns:vm="clr-namespace:EarthquakeLocator.ViewModel"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
>
<UserControl.Resources>
<DataTemplate x:Key="EarthquakeTemplate">
<Ellipse Fill="Red" Stroke="Black" StrokeThickness="1"
Width="{Binding Size}" Height="{Binding Size}"
bing:MapLayer.Position="{Binding Location}"
bing:MapLayer.PositionOrigin="Center">
<ToolTipService.ToolTip>
<StackPanel>
<TextBlock Text="{Binding Title}" FontSize="14" FontWeight="Bold" />
<TextBlock Text="{Binding UtcTime}" />
<TextBlock Text="{Binding LocalTime}" />
<TextBlock Text="{Binding DepthDesc}" />
</StackPanel>
</ToolTipService.ToolTip>
</Ellipse>
</DataTemplate>
</UserControl.Resources>
<UserControl.DataContext>
<vm:EarthquakeViewModel AutoLoadData="True" />
</UserControl.DataContext>
<Grid x:Name="LayoutRoot">
<bing:Map x:Name="map" CredentialsProvider="--Your-Bing-Maps-Key--"
Center="{Binding MapCenter, Mode=TwoWay}"
ZoomLevel="{Binding ZoomLevel, Mode=TwoWay}">
<bing:MapItemsControl ItemsSource="{Binding Earthquakes}"
ItemTemplate="{StaticResource EarthquakeTemplate}" />
</bing:Map>
</Grid>
</UserControl>
The EarthquakeTemplate defines the Ellipse that will represent each earthquake, the Width and Height that are determined by the Magnitude, the Position on the map, and also the tooltip that will appear when we mouse over each data point. Running the application will give us the following result (shown with a tooltip example):
That concludes this portion of our show but I plan on implementing additional functionality in later blog posts. Be sure to come back soon to see the next installments in this series.
Enjoy!
Additional Resources
USGS Earthquake Data Feeds
Brad Abrams shows how RIA Services and MVVM can work together
