Saturday, 10 March 2012

Surface project - part 3 (WPF Bing Map Control)

After discussed with project supervisors, we decided that the first demo application would be a dummy map with multi-media interaction.  Thus, how to build the map ? The answer is WPF Bing Map Control.

The WPF Bing Map Control is quite flexible. It supports multi-layer, custom shapes and web services for location searching. To fully understand how to use this control in your application, you need to read the SDK documentation.

For my project, I certainly need to seperate the map into many custom area for users to play with. Listed below is how to define custom area for your map.

1. In order to use the Bing Maps WPF Control, you need a Bing Maps Key to authenticate your application.

2. Add a map control into your grid, I set the centre point at Groote, where the indigenous people live.
<m:Map Name="TheMap" Grid.Row="0" Center="-14, 136.53" ZoomLevel="11" Mode="Road"
               CredentialsProvider="THE KEY">
3. Add the "Map_MouseDoubleClick" event handler in cs file to record the wanted points and display it on the screen.
          private List<Location> listOfBorderLocation = new List<Location>();
          private void Map_MouseDoubleClick(object sender, MouseButtonEventArgs e)
                      // Disables the default mouse double-click action.
                      e.Handled = true;
            //Get the mouse click coordinates
            Point mousePosition = e.GetPosition(this);
            //Convert the mouse coordinates to a locatoin on the map
            Location pinLocation = TheMap.ViewportPointToLocation(mousePosition);
            TheTxt.Text += "\n" + pinLocation.Latitude + "," + pinLocation.Longitude;

4. To display selected point and make a border based on these button, I put a scatter view on top the map
  <s:ScatterView Grid.Row="0" >
            <s:ScatterViewItem Center="200,400" Orientation="0" CanMove="False" CanRotate="False" CanScale="False">
                <TextBox Name="TheTxt"  Width="250"  Height="800" TextWrapping="Wrap"/>
            <s:ScatterViewItem Center="200,600" Orientation="0" CanMove="False" CanRotate="False" CanScale="False">
                <s:SurfaceButton Name="TheBtn" Content="Make Border" Click="TheBtn_Click"/>
5. Add the "TheBtn_Click" event handler in cs file to make border based on selected point
private void TheBtn_Click(object sender, RoutedEventArgs e)
            if(listOfBorderLocation.Count >=2)
                TheTxt.Text += "\n....MAKE BORDER.....";
                foreach (Location l in listOfBorderLocation)
        private MapPolygon newPolygon = null;
        private MapLayer polygonPointLayer = new MapLayer();
        private void SetUpNewPolygon()
            newPolygon = new MapPolygon();
            // Defines the polygon fill details
            newPolygon.Locations = new LocationCollection();
            newPolygon.Fill = new SolidColorBrush(Colors.Blue);
            newPolygon.Stroke = new SolidColorBrush(Colors.Green);
            newPolygon.StrokeThickness = 3;
            newPolygon.Opacity = 0.5;

6. Run the application and double click three different point on the map to make a custom area


  1. hi Liwei,

    great example. I am trying something similar, but got stuck very early in the process. So I decided to try your example (part 3) adding bing maps with scatterview on top.

    When I try this, my map doesn't react at all. I repeated the steps you wrote. But no effect. Do you need to do something special to get events from the map?

    Hope you can help me with this.....

    thnx Martijn

    1. Never thought there will be a real reader :)

      I have review the example code, the application logic looks straightforward. I have upload the complete example as zip file at

      Hopes that helps.

    2. Well, it's an interesting topic. So I guess I am not the only one. Thanks for the example, I will have a look at it. And I will read your othe posts on this topic as well!

      Thanks again!