Elegant Code » bing maps http://elegantcode.com Sun, 12 Feb 2012 04:40:00 +0000 en hourly 1 http://wordpress.org/?v=3.0.5 Mapping a Route with Directions using the Bing Maps WPF Control (Beta) http://elegantcode.com/2011/09/09/mapping-a-route-with-directions-using-the-bing-maps-wpf-control-beta/?utm_source=rss&utm_medium=rss&utm_campaign=mapping-a-route-with-directions-using-the-bing-maps-wpf-control-beta http://elegantcode.com/2011/09/09/mapping-a-route-with-directions-using-the-bing-maps-wpf-control-beta/#comments Fri, 09 Sep 2011 16:51:29 +0000 Brian Lagunas http://elegantcode.com/2011/09/09/mapping-a-route-with-directions-using-the-bing-maps-wpf-control-beta/ So far we have built an earthquake application, mapped an address using geocoding, and even Prism-fied the Bing Maps WPF control.  Now let’s see how to map a route with turn-by-turn directions.  By now it should be no surprise that you will need to complete the following steps before you can create this application.

  1. Get the Bing Maps WPF control.
  2. Get a Bing Maps API key.

You MUST have a Bing Maps API key in order to use any of the SOAP services.

For this application we will be using the Geocode Service and the Route Service.  The Geocode service is used to match addresses, places, and geographic entities to latitude and longitude coordinates on the map, as well as return location information for a specified latitude and longitude coordinate.  The Route service is used to generate routes and driving directions based on locations or waypoints.

Now that you have that out of the way let’s write an application. Create a new WPF application targeting the .NET 4.0 framework. Add a reference to the Microsoft.Maps.MapControl.WPF.dll. This will most likely be located in Program Files or Program Files (x86) –> Bing Maps WPF Control –> Beta –> Libraries.

Open up your App.xaml. You need to add an ApplicationIdCredentialsProvider as a resource and enter your ApplicationId:

<Application x:Class="BingMapsCalculateRouteDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:bing="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <bing:ApplicationIdCredentialsProvider x:Key="MyCredentials" ApplicationId="Your API Key" />
    </Application.Resources>
</Application>

We need to add the Geocode and Route service to our application.  First, let’s start by adding the Geocode service.  Right click the project and select “Add Service Reference”.  Use the following address:

http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc

Give your service a name. I called mine BingServices.  Now we need to add the Route service, but we don’t want to add a separate service reference.  Ideally we would have a single service that contained both the Geocode and Route services.  Luckily there is a trick we can use to do just that.  Select the Project and click the “Show All Files” button at the top of the Solution Explorer.  Expand the Service Reference folder and then expand the BingServices service.  Look for a file called Reference.svcmap. Open the References.svcmap and locate the MetadataSource node.  It will loko something like this:

<MetadataSources>
  <MetadataSource Address="http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc/mex" Protocol="mex" SourceId="1" />
</MetadataSources>

Simply add a new MetatdataSource as follows:

<MetadataSources>
  <MetadataSource Address="http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc/mex" Protocol="mex" SourceId="1" />
  <MetadataSource Address="http://dev.virtualearth.net/webservices/v1/routeservice/routeservice.svc/mex" Protocol="mex" SourceId="2" />
</MetadataSources>

As you can see we added a new MetadataSource that points to the Route service and we gave it a SourceId of 2.  Now right click the service and select “Update Service Reference”.  This will generate a single service proxy for both the Geocode and Route services.  Pretty slick huh?

The next step will be to create a ViewModel that will contain an ICommand that will execute the route calculation, properties that will represent a “To” address and a “From” address.  We will also need a property for the RouteResult and for the directions we generate.  Lets first create our Direction object:

public class Direction
{
    public string Description { get; set; }
    public Location Location { get; set; }
}

Now we will need a make-shift delegate command (do not use in production code):

public class DelegateCommand : ICommand
{
    private Action _execute;
    public DelegateCommand(Action execute)
    {
        _execute = execute;
    }
    public bool CanExecute(object parameter)
    {
        return true;
    }
    public event EventHandler CanExecuteChanged;
    public void Execute(object parameter)
    {
        _execute.Invoke();
    }
}

Now on to the ViewModel itself:

public class RouteViewModel: INotifyPropertyChanged
{
    public ICommand CalculateRouteCommand { get; private set; }

    private string _from = "Meridian, ID";
    public string From
    {
        get { return _from; }
        set
        {
            _from = value;
            OnPropertyChanged("From");
        }
    }

    private string _to = "Boise, ID";
    public string To
    {
        get { return _to; }
        set
        {
            _to = value;
            OnPropertyChanged("To");
        }
    }

    private BingServices.RouteResult _routeResult;
    public BingServices.RouteResult RouteResult
    {
        get { return _routeResult; }
        set
        {
            _routeResult = value;
            OnPropertyChanged("RouteResult");
        }
    }
    

    private ObservableCollection<Direction> _directions;
    public ObservableCollection<Direction> Directions
    {
        get { return _directions; }
        set
        {
            _directions = value;
            OnPropertyChanged("Directions");
        }
    }

    public RouteViewModel()
    {
        CalculateRouteCommand = new DelegateCommand(CalculateRoute);
    }

    private void CalculateRoute()
    {
        var from = GeocodeAddress(From);
        var to = GeocodeAddress(To);

        CalculateRoute(from, to);
    }

    private BingServices.GeocodeResult GeocodeAddress(string address)
    {
        BingServices.GeocodeResult result = null;

        using (BingServices.GeocodeServiceClient client = new BingServices.GeocodeServiceClient("CustomBinding_IGeocodeService"))
        {
            BingServices.GeocodeRequest request = new BingServices.GeocodeRequest();
            request.Credentials = new Credentials() { ApplicationId = (App.Current.Resources["MyCredentials"] as ApplicationIdCredentialsProvider).ApplicationId };
            request.Query = address;
            result = client.Geocode(request).Results[0];
        }

        return result;
    }

    private void CalculateRoute(BingServices.GeocodeResult from, BingServices.GeocodeResult to)
    {
        using (BingServices.RouteServiceClient client = new BingServices.RouteServiceClient("CustomBinding_IRouteService"))
        {
            BingServices.RouteRequest request = new BingServices.RouteRequest();
            request.Credentials = new Credentials() { ApplicationId = (App.Current.Resources["MyCredentials"] as ApplicationIdCredentialsProvider).ApplicationId };
            request.Waypoints = new ObservableCollection<BingServices.Waypoint>();
            request.Waypoints.Add(ConvertResultToWayPoint(from));
            request.Waypoints.Add(ConvertResultToWayPoint(to));

            request.Options = new BingServices.RouteOptions();
            request.Options.RoutePathType = BingServices.RoutePathType.Points;

            RouteResult = client.CalculateRoute(request).Result;
        }

        GetDirections();
    }

    private void GetDirections()
    {
        Directions = new ObservableCollection<Direction>();

        foreach (BingServices.ItineraryItem item in RouteResult.Legs[0].Itinerary)
        {
            var direction = new Direction();
            direction.Description = GetDirectionText(item);
            direction.Location = new Location(item.Location.Latitude, item.Location.Longitude);
            Directions.Add(direction);
        }
    }

    private static string GetDirectionText(BingServices.ItineraryItem item)
    {
        string contentString = item.Text;
        //Remove tags from the string
        Regex regex = new Regex("<(.|\n)*?>");
        contentString = regex.Replace(contentString, string.Empty);
        return contentString;
    }

    private BingServices.Waypoint ConvertResultToWayPoint(BingServices.GeocodeResult result)
    {
        BingServices.Waypoint waypoint = new BingServices.Waypoint();
        waypoint.Description = result.DisplayName;
        waypoint.Location = result.Locations[0];
        return waypoint;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

Let’s walk though the CalculateRoute Method.  First we geocode the “From” and “To” properties the same way we did in the geocoding post.  Once we have our From and To locations we use those results to generate a RouteRequest and send that request to the Route service.  The service will generate a result and we set our RouteResult property accordingly.  This property will be used in data binding shortly.  Next we generate an ObservableCollection<Direction> by looping through all the ItineraryItems in the result. 

Now that we have generate all of our data, we need to create a View that supports and displays this data, but before we do that we need to create some attached properties.  Why do you ask?  Well because as it stands, the Bing Maps WPF control is not data binding friendly.  So we need to enable data binding with the use of attached properties.  We will need an attached property for the Route result which will be responsible for drawing the route line on the map.  We will also need one for the MapLayer that will be used to contain the route line.  Here is the code:

public class MapInteractivity
{
    #region RouteResult

    public static readonly DependencyProperty RouteResultProperty = DependencyProperty.RegisterAttached("RouteResult", typeof(BingServices.RouteResult), typeof(MapInteractivity), new UIPropertyMetadata(null, OnRouteResultChanged));
    public static BingServices.RouteResult GetRouteResult(DependencyObject target)
    {
        return (BingServices.RouteResult)target.GetValue(RouteResultProperty);
    }
    public static void SetRouteResult(DependencyObject target, BingServices.RouteResult value)
    {
        target.SetValue(RouteResultProperty, value);
    }

    private static void OnRouteResultChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
    {
        OnRouteResultChanged((Map)o, (BingServices.RouteResult)e.OldValue, (BingServices.RouteResult)e.NewValue);
    }

    private static void OnRouteResultChanged(Map map, BingServices.RouteResult oldValue, BingServices.RouteResult newValue)
    {
        MapPolyline routeLine = new MapPolyline();
        routeLine.Locations = new LocationCollection();
        routeLine.Opacity = 0.65;
        routeLine.Stroke = new SolidColorBrush(Colors.Blue);
        routeLine.StrokeThickness = 5.0;

        foreach (BingServices.Location loc in newValue.RoutePath.Points)
        {
            routeLine.Locations.Add(new Location(loc.Latitude, loc.Longitude));
        }

        var routeLineLayer = GetRouteLineLayer(map);
        if (routeLineLayer == null)
        {
            routeLineLayer = new MapLayer();
            SetRouteLineLayer(map, routeLineLayer);
        }

        routeLineLayer.Children.Clear();
        routeLineLayer.Children.Add(routeLine);

        //Set the map view
        LocationRect rect = new LocationRect(routeLine.Locations[0], routeLine.Locations[routeLine.Locations.Count - 1]);
        map.SetView(rect);
    }

    #endregion //RouteResult

    #region RouteLineLayer

    public static readonly DependencyProperty RouteLineLayerProperty = DependencyProperty.RegisterAttached("RouteLineLayer", typeof(MapLayer), typeof(MapInteractivity), new UIPropertyMetadata(null, OnRouteLineLayerChanged));
    public static MapLayer GetRouteLineLayer(DependencyObject target)
    {
        return (MapLayer)target.GetValue(RouteLineLayerProperty);
    }
    public static void SetRouteLineLayer(DependencyObject target, MapLayer value)
    {
        target.SetValue(RouteLineLayerProperty, value);
    }
    private static void OnRouteLineLayerChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
    {
        OnRouteLineLayerChanged((Map)o, (MapLayer)e.OldValue, (MapLayer)e.NewValue);
    }
    private static void OnRouteLineLayerChanged(Map map, MapLayer oldValue, MapLayer newValue)
    {
        if (!map.Children.Contains(newValue))
            map.Children.Add(newValue);
    }

    #endregion //RouteLineLayer
}

The RouteResult property simply creates a MapPolyline, loops through all the points in the result and adds the locations to the route line.  It then gets the RouteLineLayer and adds it to the map.  Lastly, it sets the map’s view to best fit the route line.

Now we are ready for the View:

<Window x:Class="BingMapsCalculateRouteDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:bing="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
        xmlns:core="clr-namespace:BingMapsCalculateRouteDemo.Core"
        Title="MainWindow" Height="600" Width="800">

    <Window.Resources>
        <DataTemplate x:Key="RouteTemplate">
            <Ellipse Width="12" Height="12" Fill="Red" Opacity="0.8"
                     bing:MapLayer.Position="{Binding Location}"
                     bing:MapLayer.PositionOrigin="Center"
                     Tag="{Binding}"
                     MouseEnter="Route_MouseEnter"
                     MouseLeave="Route_MouseLeave"/>
        </DataTemplate>
    </Window.Resources>
    
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        
        <StackPanel MinWidth="150" Margin="10">
            <TextBox Text="{Binding From}" />
            <TextBox Text="{Binding To}"/>
            <Button Content="Get Route" Command="{Binding CalculateRouteCommand}"/>
        </StackPanel>

        <bing:Map Grid.Column="1" Mode="AerialWithLabels" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AnimationLevel="Full"
                  core:MapInteractivity.RouteResult="{Binding RouteResult}"
                  core:MapInteractivity.RouteLineLayer="{Binding ElementName=RouteLineLayer}"
                  CredentialsProvider="{StaticResource MyCredentials}" >
            
            <bing:MapLayer x:Name="RouteLineLayer" />
            
            <bing:MapLayer>
                <bing:MapItemsControl ItemsSource="{Binding Directions}"
                                      ItemTemplate="{StaticResource RouteTemplate}"/>
            </bing:MapLayer>

            <bing:MapLayer x:Name="ContentPopupLayer">
                <Grid x:Name="ContentPopup" Visibility="Collapsed" Background="White">
                    <StackPanel Margin="15">
                        <TextBlock x:Name="ContentPopupText" FontSize="12" FontWeight="Bold" TextWrapping="Wrap" />
                    </StackPanel>
                </Grid>
            </bing:MapLayer>
        </bing:Map>
    </Grid>
</Window>

Oh and don’t forget the code behind:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new RouteViewModel();
    }

    private void Route_MouseEnter(object sender, MouseEventArgs e)
    {
        FrameworkElement pin = sender as FrameworkElement;
        MapLayer.SetPosition(ContentPopup, MapLayer.GetPosition(pin));
        MapLayer.SetPositionOffset(ContentPopup, new Point(20, -15));

        var location = (Direction)pin.Tag;

        ContentPopupText.Text = location.Description;
        ContentPopup.Visibility = Visibility.Visible;
    }

    private void Route_MouseLeave(object sender, MouseEventArgs e)
    {
        ContentPopup.Visibility = Visibility.Collapsed;
    }
}

Now let’s view the fruits of our labor at runtime.

image

As you can see, given a “From” and “To” address, we can draw a route line and provide turn-by-turn directions as the user hovers over the direction pins.  Pretty neat huh?  And it wasn’t too difficult to pull off.  As always you can Download the Source and start playing.

]]> http://elegantcode.com/2011/09/09/mapping-a-route-with-directions-using-the-bing-maps-wpf-control-beta/feed/ 0 Prism-fy the Bing Maps WPF Control (Beta) http://elegantcode.com/2011/08/31/prism-fy-the-bing-maps-wpf-control-beta/?utm_source=rss&utm_medium=rss&utm_campaign=prism-fy-the-bing-maps-wpf-control-beta http://elegantcode.com/2011/08/31/prism-fy-the-bing-maps-wpf-control-beta/#comments Wed, 31 Aug 2011 16:13:02 +0000 Brian Lagunas http://elegantcode.com/2011/08/31/prism-fy-the-bing-maps-wpf-control-beta/ If you know me or know of me you are aware that I am a big Prism advocate/evangelist.  You may have also noticed that I have been playing around with the new Bing Maps WPF control.  So it shouldn’t surprise you that I would find a way to compose a Bing Map of loosely coupled MapLayers at runtime using Prism.

The concept is simple.  We want a Bing Maps application that can be extended at runtime.  By extended, I mean that I want the ability to add new elements/modules to the Map at runtime.  The important thing about these elements/modules is that they can come from anywhere and they should be loosely coupled from the Map as well as other elements/modules that may exist on the Map.

Luckily for us this is extremely simple to accomplish.  All we have to do is create a custom RegionAdapter, register it with our Prism application, and then apply it to our Bing Map control.  So let’s start with the RegionAdapter.

public class MapRegionAdapter : RegionAdapterBase<Map>
{
    public MapRegionAdapter(IRegionBehaviorFactory regionBehaviorFactory)
        : base(regionBehaviorFactory)
    {

    }

    protected override void Adapt(IRegion region, Map regionTarget)
    {
        region.Views.CollectionChanged += (s, e) =>
        {
            if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add)
            {
                foreach (FrameworkElement element in e.NewItems)
                    regionTarget.Children.Add(element);
            }
            else if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Remove)
            {
                foreach (FrameworkElement element in e.OldItems)
                    if (regionTarget.Children.Contains(element))
                        regionTarget.Children.Remove(element);
            }
        };
    }

    protected override IRegion CreateRegion()
    {
        return new AllActiveRegion();
    }
}

Now in the Bootstrapper we need to register our mapping.

protected override RegionAdapterMappings ConfigureRegionAdapterMappings()
{
    RegionAdapterMappings mappings = base.ConfigureRegionAdapterMappings();
    mappings.RegisterMapping(typeof(Map), Container.Resolve<MapRegionAdapter>());
    return mappings;
}

Now we simply give the Map a region name. (this is actually all the shell has in it)

<Grid>
    <bing:Map prism:RegionManager.RegionName="{x:Static inf:RegionNames.MapRegion}" Center="40,-95" ZoomLevel="4" />
</Grid>

That is all there is to it.  You can now start injecting modules onto the Map at runtime.  Lets look at my two modules I am using as an example.  Here is the structure of my application:

image

  • ModuleA will inject a MapPolygon in the Shape of Texas.
  • ModuleB is the Earthquake application we built in an earlier post.
  • Infrastructure is the project where shared code goes, in this case our MapRegionAdapter
  • BingMapsPrismfiedDemo is of course our shell project.

This is what the application looks like at runtime when both modules have been injected into it.

image

Now I can easily add more layers to this map as I see fit.  As always, Download the Source and start playing.  You may want to add MEF support as well.

]]> http://elegantcode.com/2011/08/31/prism-fy-the-bing-maps-wpf-control-beta/feed/ 2 Mapping an Address with the Bing Maps WPF Control (Beta) http://elegantcode.com/2011/08/30/mapping-an-address-with-the-bing-maps-wpf-control-beta/?utm_source=rss&utm_medium=rss&utm_campaign=mapping-an-address-with-the-bing-maps-wpf-control-beta http://elegantcode.com/2011/08/30/mapping-an-address-with-the-bing-maps-wpf-control-beta/#comments Tue, 30 Aug 2011 22:21:00 +0000 Brian Lagunas http://elegantcode.com/2011/08/30/mapping-an-address-with-the-bing-maps-wpf-control-beta/ In my last post I showed you how to get started using the Bing Maps WPF control by creating an earthquake application.  Now I want to introduce you to the Bing Maps SOAP Services.  The Bing Maps SOAP Services is a set of programmable SOAP services that allow you to integrate maps and imagery, driving directions, distance calculations, and other location intelligence into your applications, business processes, and Web sites.

Let’s start with the Geocode Service which is used to match addresses, places, and geographic entities to latitude and longitude coordinates on the map, as well as return location information for a specified latitude and longitude coordinate.  We will create a simple application that allows you to enter an address and place a pushpin at that location.  First thing is first:

  1. Get the Bing Maps WPF control.
  2. Get a Bing Maps API key.

You MUST have a Bing Maps API key in order to use any of the SOAP services.  Now that you have that out of the way let’s write an application. Create a new WPF application targeting the .NET 4.0 framework. Add a reference to the Microsoft.Maps.MapControl.WPF.dll. This will most likely be located in Program Files or Program Files (x86) –> Bing Maps WPF Control –> Beta –> Libraries.

Open up your App.xaml.  You need to add an ApplicationIdCredentialsProvider as a resource and enter your ApplicationId:

<Application x:Class="BingMapsGeocodeDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:bing="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <bing:ApplicationIdCredentialsProvider x:Key="MyCredentials" ApplicationId="Your API Key" />
    </Application.Resources>
</Application>

Now create a very simple UI that will accept an address and a button to perform the geocoding:

<Window x:Class="BingMapsGeocodeDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:bing="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
        Title="MainWindow" Height="600" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal" Margin="10" >
            <TextBox x:Name="_txtAddress" MinWidth="250" />
            <Button Content="Map It" IsDefault="True"/>
        </StackPanel>

        <bing:Map Grid.Row="1" CredentialsProvider="{StaticResource MyCredentials}" Center="40,-95"
                  ZoomLevel="4" AnimationLevel="Full" >
        </bing:Map>
    </Grid>
</Window>

The next thing we need to do is add a new Service Reference to the project and point to the following service:

http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc

Give your service a name (I called mine BingMapsService) and just for fun, in the “Add Service Reference” dialog, click the “Advanced” button and click “Generate asynchronous operations”.

Next we need to create a ViewModel to support our View.  This is a WPF application after all.  This ViewModel will need a command for the button that will perform the geocoding, and a property that will represent the result of the service that the UI will use to map the address.  It should resemble something like this:

public class GeocodeViewModel : INotifyPropertyChanged
{
    public ICommand GeocodeAddressCommand { get; private set; }

    private BingMapsService.GeocodeResult _geocodeResult;
    public BingMapsService.GeocodeResult GeocodeResult
    {
        get { return _geocodeResult; }
        set
        {
            _geocodeResult = value;
            OnPropertyChanged("GeocodeResult");
        }
    }

    public GeocodeViewModel()
    {
        GeocodeAddressCommand = new DelegateCommand<String>(GeocodeAddress);
    }

    private void GeocodeAddress(string address)
    {

    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

I want to point out that the DelegateCommand<T> is a very simple ICommand implementation and should NOT be used in production applications.  Here is the code:

public class DelegateCommand<T> : ICommand
{
    private Action<T> _execute;

    public DelegateCommand(Action<T> execute)
    {
        _execute = execute;
    }

    public bool CanExecute(object parameter)
    {
        return true;
    }

    public event EventHandler CanExecuteChanged;

    public void Execute(object parameter)
    {
        _execute.Invoke((T)parameter);
    }
}

Let’s hook our UI up to our command.  it should look something like this:

<StackPanel Orientation="Horizontal" Margin="10" >
            <TextBox x:Name="_txtAddress" MinWidth="250" />
            <Button Content="Map It" IsDefault="True"
                    Command="{Binding GeocodeAddressCommand}"
                    CommandParameter="{Binding Text,ElementName=_txtAddress}"/>
        </StackPanel>

Notice that we are using the text of the TextBox as the CommandParameter.  Next, we need to implement the command:

private void GeocodeAddress(string address)
{
    using (BingMapsService.GeocodeServiceClient client = new BingMapsService.GeocodeServiceClient("CustomBinding_IGeocodeService"))
    {
        client.GeocodeCompleted += (o, e) =>
        {
            if (e.Error == null)
            {
                GeocodeResult = e.Result.Results[0];
            }
        };

        BingMapsService.GeocodeRequest request = new BingMapsService.GeocodeRequest();
        request.Credentials = new Credentials() { ApplicationId = (App.Current.Resources["MyCredentials"] as ApplicationIdCredentialsProvider).ApplicationId };
        request.Query = address;
        client.GeocodeAsync(request);
    }
}

In this command we are simply creating an instance of the service client, creating a GeocodeRequest, setting the credentials using the ApplicationId we have stored in the App.xaml, and then using the address as the Query for the request.  When the call to the service is completed we are setting the GeocodeResult property to the first element in the results.

Now the tricky part.  We want to place a Pushpin on the address that was entered and then move the map to that location.  We also need to make sure that when another address is entered, we clear any previous Pushpins that may exist on the map.  We also have to be aware that other elements my be on the map and we don’t want to accidentally alter those elements.  Oh and did I mention this was an MVVM application and this has to be done with just data binding?

The approach that I decided to go with is to use Attached Properties.  So I created two attached properties; one for the GeocodeResult and another for a MapLayer that will be dedicated to the GeocodeResult.  This will allow us to create a MapLayer that is specific to our GeocodeResut and not alter any other elements that may be on the map.  Let’s check out the code.

public class MapInteractivity
{
    #region GeocodeResult

    public static readonly DependencyProperty GeocodeResultProperty = DependencyProperty.RegisterAttached("GeocodeResult", typeof(BingMapsService.GeocodeResult), typeof(MapInteractivity), new UIPropertyMetadata(null, OnGeocodeResultChanged));
    public static BingMapsService.GeocodeResult GetGeocodeResult(Map target)
    {
        return (BingMapsService.GeocodeResult)target.GetValue(GeocodeResultProperty);
    }
    public static void SetGeocodeResult(Map target, BingMapsService.GeocodeResult value)
    {
        target.SetValue(GeocodeResultProperty, value);
    }
    private static void OnGeocodeResultChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
    {
        OnGeocodeResultChanged((Map)o, (BingMapsService.GeocodeResult)e.OldValue, (BingMapsService.GeocodeResult)e.NewValue);
    }
    private static void OnGeocodeResultChanged(Map map, BingMapsService.GeocodeResult oldValue, BingMapsService.GeocodeResult newValue)
    {
        Location location = newValue.Locations.Select(x => new Location(x.Latitude, x.Longitude)).First();

        Pushpin pin = new Pushpin();
        pin.Location = location;
        pin.ToolTip = newValue.Address.FormattedAddress;

        var locationLayer = GetGeocodeResultLayer(map);
        if (locationLayer == null)
        {
            locationLayer = new MapLayer();
            SetGeocodeResultLayer(map, locationLayer);
        }

        locationLayer.Children.Clear();
        locationLayer.Children.Add(pin);

        map.SetView(location, map.ZoomLevel);
    }

    #endregion //GeocodeResult

    #region GeocodeResultLayer

    public static readonly DependencyProperty GeocodeResultLayerProperty = DependencyProperty.RegisterAttached("GeocodeResultLayer", typeof(MapLayer), typeof(MapInteractivity), new UIPropertyMetadata(null, OnGeocodeResultLayerChanged));
    public static MapLayer GetGeocodeResultLayer(DependencyObject target)
    {
        return (MapLayer)target.GetValue(GeocodeResultLayerProperty);
    }
    public static void SetGeocodeResultLayer(DependencyObject target, MapLayer value)
    {
        target.SetValue(GeocodeResultLayerProperty, value);
    }
    private static void OnGeocodeResultLayerChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
    {
        OnGeocodeResultLayerChanged((Map)o, (MapLayer)e.OldValue, (MapLayer)e.NewValue);
    }
    private static void OnGeocodeResultLayerChanged(Map map, MapLayer oldValue, MapLayer newValue)
    {
        map.Children.Add(newValue);
    }

    #endregion //GeocodeResultLayer
}

Notice that when the GeocodeResult changes we get the Location and create a pushpin for that location.  We also set the tooltip to the FormattedAddress of the GeocodeResult.  So when we hover over the pushpin we will see a nice little tooltip of the address.  Next we try to get the GeocodeResultLayer from the map, if it is null this means it doesn’t exist on the map yet so we create one and assign it accordingly.  We clear the layer child elemnts and then add out pushpin.  The last thing we do is call the SetView method of the Map control passing in the location and the current ZoomLevel.

The final step is to use our AttachedProperty on the map.  Be sure to create a namespace for the MapInteractivity class and define it as follows:

<bing:Map Grid.Row="1" CredentialsProvider="{StaticResource MyCredentials}" Center="40,-95"
          core:MapInteractivity.GeocodeResult="{Binding GeocodeResult}"
          ZoomLevel="4" AnimationLevel="Full" >
</bing:Map>

One last thing.  Be sure to remember to set your DataContext of your View to the ViewModel we have created:

public MainWindow()
{
    InitializeComponent();
    DataContext = new GeocodeViewModel();
}

That’s it.  You now have an application the can map (geocode) an address using the Bing Maps WPF Control and the Geocoding SOAP Service.  Oh and we are doing this all with MVVM and data binding which is my favorite part.  Be sure to Download the Source and start playing around.

]]> http://elegantcode.com/2011/08/30/mapping-an-address-with-the-bing-maps-wpf-control-beta/feed/ 0 Build an Earthquake Application with Bing Maps WPF Control (Beta) http://elegantcode.com/2011/08/26/build-an-earthquake-application-with-bing-maps-wpf-control-beta/?utm_source=rss&utm_medium=rss&utm_campaign=build-an-earthquake-application-with-bing-maps-wpf-control-beta http://elegantcode.com/2011/08/26/build-an-earthquake-application-with-bing-maps-wpf-control-beta/#comments Fri, 26 Aug 2011 21:45:33 +0000 Brian Lagunas http://elegantcode.com/2011/08/26/build-an-earthquake-application-with-bing-maps-wpf-control-beta/ Recently you may have noticed that the Bing Maps team released a WPF Map control which is currently in Beta.  In light of the recent earth quake on the east coast of the United States, I thought an earthquake application would be a great way to become familiar with the Map control.  There are a few things you must do before we can get started.

  1. Get the Bing Maps WPF control.
  2. Get a Bing Maps API key. (not needed for development)

Now that you have that out of the way let’s write an application.  Create a new WPF application targeting the .NET 4.0 framework.  Add a reference to the Microsoft.Maps.MapControl.WPF.dll.  This will most likely be located in Program Files or Program Files (x86) –> Bing Maps WPF Control –> Beta –> Libraries.  Next you need to declare a namespace in XAML:

xmlns:map="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"

Now just add the control to your view:
 
<Grid>
    <map:Map />
</Grid>

 

And this is the control at run time:

 
image_thumb1

Not much to look at, but it’s definitely a map. Notice that because we are not using an API key we get a nice little message that tells us where to get one.  Well this is great and all, but we want to see earth quakes!  So let’s start doing the real coding now. We know we will need an object to hold information about the earthquakes.

public class Earthquake
{
    public string Title { get; set; }
    public string Description { get; set; }
    public Location Location { get; set; }
}

That should take care of that.  Next we need data about earthquakes and their locations.  Luckily for us there is a free resource available to grab this information from USGS.  So let’s write a simple service to get this information:

public class EarthquakeService
{
    public static void GetRecentEarthquakes(EventHandler<EarthquakeEventArgs> callback)
    {
        WebClient client = new WebClient();
        client.OpenReadCompleted += (o, e) =>
        {
            XDocument doc = XDocument.Load(e.Result);

            var data = (from eq in doc.Element("rss").Element("channel").Elements("item")
                        select new Earthquake()
                        {
                            Title = eq.Element("title").Value,
                            Description = eq.Element("description").Value,
                            Location = new Location(Convert.ToDouble(eq.Element(XName.Get("lat", "http://www.w3.org/2003/01/geo/wgs84_pos#")).Value), Convert.ToDouble(eq.Element(XName.Get("long", "http://www.w3.org/2003/01/geo/wgs84_pos#")).Value))
                        }).ToList();

            callback(null, new EarthquakeEventArgs(data));
        };
        client.OpenReadAsync(new Uri("http://earthquake.usgs.gov/eqcenter/recenteqsww/catalogs/eqs7day-M2.5.xml"));
    }
}

public class EarthquakeEventArgs : EventArgs
{
    public List<Earthquake> Locations { get; set; }

    public EarthquakeEventArgs(List<Earthquake> locations)
    {
        Locations = locations;
    }
}

The last thing we need is a ViewModel that will expose our earthquakes from consumption by our view:

public class EarthquakeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Earthquake> _earthquakes;
    public ObservableCollection<Earthquake> Earthquakes
    {
        get { return _earthquakes; }
        set
        {
            _earthquakes = value;
            OnPropertyChanged("Earthquakes");
        }
    }        

    public EarthquakeViewModel()
    {
        EarthquakeService.GetRecentEarthquakes((o, ea) =>
        {
            Earthquakes = new ObservableCollection<Earthquake>(ea.Locations);
        });
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

Don’t forget to set the DataContext of the view to our ViewModel:

public MainWindow()
{
    InitializeComponent();
    DataContext = new EarthquakeViewModel();
}

 
Now we need to data bind our Earthquakes property to the Map control and to do that we need to use a MapItemsControl:
 
<map:Map>
    <map:MapItemsControl ItemsSource="{Binding Earthquakes}" />
</map:Map>

 

Here is what you will see when you run the application:

image_thumb3

HEY! Where the hell are my earthquakes?  This thing sucks!  Piece of sh….. Oh wait, I need to tell the map how to render the earthquakes.  So we need to create a DataTemplate:

<Window.Resources>
    <DataTemplate x:Key="EarthquakeTemplate">
        <map:Pushpin map:MapLayer.Position="{Binding Location}" />
    </DataTemplate>
</Window.Resources>

And don’t forget to specify the ItemTemplate:

<map:Map>
    <map:MapItemsControl ItemsSource="{Binding Earthquakes}"
                        ItemTemplate="{StaticResource EarthquakeTemplate}"/>
</map:Map>

 

Now let’s see what we get when we run the application:

image_thumb5

image_thumb7

Hey look! Earthquakes.  That is so cool. But wait, I want to see information about the earth quake.  Preferably in a popup when I hover over a Pushpin.  Well Lets wire that up real quick.  First we need to add a MapLayer to the map that will act as our popup:

<map:Map>
    <map:MapItemsControl ItemsSource="{Binding Earthquakes}"
                        ItemTemplate="{StaticResource EarthquakeTemplate}"/>

    <map:MapLayer x:Name="ContentPopupLayer">
        <Grid x:Name="ContentPopup" Visibility="Collapsed" Background="White" Opacity="0.85">
            <StackPanel Margin="15">
                <TextBlock x:Name="ContentPopupText" FontSize="12" FontWeight="Bold" ></TextBlock>
                <TextBlock x:Name="ContentPopupDescription" FontSize="12"></TextBlock>
            </StackPanel>
        </Grid>
    </map:MapLayer>
</map:Map>

Now we need to add some event handler to the ItemTemplate.

<DataTemplate x:Key="EarthquakeTemplate">
    <map:Pushpin map:MapLayer.Position="{Binding Location}" Tag="{Binding}" MouseEnter="Pushpin_MouseEnter" MouseLeave="Pushpin_MouseLeave" />
</DataTemplate>

We have added two event handlers; one for when we mouse over and the other for when the mouse is no longer over the pushpin.  Notice that I am storing the bound item in the Tag of the Pushpin object.  We will need that to change the location of popup.

private void Pushpin_MouseEnter(object sender, MouseEventArgs e)
{
    FrameworkElement pin = sender as FrameworkElement;
    MapLayer.SetPosition(ContentPopup, MapLayer.GetPosition(pin));
    MapLayer.SetPositionOffset(ContentPopup, new Point(20, -15));

    var location = (Earthquake)pin.Tag;

    ContentPopupText.Text = location.Title;
    ContentPopupDescription.Text = location.Description;
    ContentPopup.Visibility = Visibility.Visible;
}

private void Pushpin_MouseLeave(object sender, MouseEventArgs e)
{
    ContentPopup.Visibility = Visibility.Collapsed;
}

 

Now when we hover over the Pushpin we get some useful information about the earthquake:

image_thumb9

That’s it for this application.  The Bing Maps WPF Control has been a long awaited control and I am glad it finally made it to WPF.  As you can see it is pretty easy to use as well.  Now you can Download the source and start playing.

]]> http://elegantcode.com/2011/08/26/build-an-earthquake-application-with-bing-maps-wpf-control-beta/feed/ 6 NETDUG: Silverlight Bing Maps Sample Code http://elegantcode.com/2010/07/17/netdug-silverlight-bing-maps-sample-code/?utm_source=rss&utm_medium=rss&utm_campaign=netdug-silverlight-bing-maps-sample-code http://elegantcode.com/2010/07/17/netdug-silverlight-bing-maps-sample-code/#comments Sun, 18 Jul 2010 00:24:09 +0000 Brian Lagunas http://elegantcode.com/2010/07/17/netdug-silverlight-bing-maps-sample-code/ Thanks to everyone who attended last weeks NETDUG presentations. For those of you who would like to get started right away with Bing Maps in your Silverlight applications, you can start here:

You can also get the source code to my presentation here:  Download the source.

Note: You will need to download the Bing Maps Silverlight control and re-reference the DLLs before the source will compile.  Also, you have to have a Bing Maps API key in order to use any of the geocoding service examples.

]]> http://elegantcode.com/2010/07/17/netdug-silverlight-bing-maps-sample-code/feed/ 0