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"
                MouseDoubleClick="Map_MouseDoubleClick"
               CredentialsProvider="THE KEY">
     
</m:Map>

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);
            listOfBorderLocation.Add(pinLocation);
            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>
            <s:ScatterViewItem Center="200,600" Orientation="0" CanMove="False" CanRotate="False" CanScale="False">
                <s:SurfaceButton Name="TheBtn" Content="Make Border" Click="TheBtn_Click"/>
            </s:ScatterViewItem>
   </s:ScatterView>

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)
            {
                SetUpNewPolygon();
                TheTxt.Text += "\n....MAKE BORDER.....";
                foreach (Location l in listOfBorderLocation)
                    newPolygon.Locations.Add(l);
                polygonPointLayer.Children.Add(newPolygon);
                listOfBorderLocation.Clear();
            }
 }

        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