In this article I will show how to add multiple pushpins on the Bing Map in Silverlight in c-sharp.

In previous article we saw one of the ways to add multiple locations on the Bing Map in Silverlight by fetching data from SQL Server Database. But in that everything was done in xaml file. As a developer we always want to have more controls by doing things in code behind. In this article I will explain this.

To start have a look at my First Article of this series to start and create a Bing Map integrated application in Silverlight.We will use the same WCF Service as we created in my previous article.

Let’s add two functions on the page called Load and Clear.

On Load call the WCF Service (DemoSqlServer.DataService) to fetch data from SQL Service.

public void Load()
{
     DemoSqlServer.DataService.DataServiceClient objCust = 
			new DemoSqlServer.DataService.DataServiceClient();
     objCust.GetCustomersCompleted += new EventHandler
		<DemoSqlServer.DataService.GetCustomersCompletedEventArgs>(GetCustomersCompleted);
     objCust.GetCustomersAsync();
}

Let’s create a method to call when WCF service call is completed.

void GetCustomersCompleted(object sender, 
		DemoSqlServer.DataService.GetCustomersCompletedEventArgs e)
{
   MapLayer pushpinLayer = null;
   pushpinLayer = new MapLayer();
   pushpinLayer.Name = "PushPinLayer";
   MyMap.Children.Add(pushpinLayer);

   foreach (DemoSqlServer.DataService.Customer C in e.Result)
   {
        Pushpin pin;
        Location d = new Location(Convert.ToDouble(C.Latitude)
				  , Convert.ToDouble(C.Longitude));
        pin = new Pushpin();
        pin.Location = d;
        pin.Name = C.CustomerId.ToString() ;

        ScaleTransform st = new ScaleTransform();
        st.ScaleX = 0.25;
        st.ScaleY = 0.25;
        st.CenterX = (pin as FrameworkElement).Height / 2;
        st.CenterY = (pin as FrameworkElement).Height / 2;

        pin.RenderTransform = st;
        pin.Background = new SolidColorBrush(Colors.Blue);
               
        PushPinLayer.AddChild(pin, d);
   }
}

Few things to notice here:

1. We can add as many Layers on the map as we want.
2. We created a MapLayer in Line - 4 and added to the Map in Line – 7
3. In Line-14 we created a PushPin for each record we fetched from database and added on the Map layer on the Location in the result set in Line 27.
4. We formatted Pushpin based on our requirement like Size, Background color.

Let’s now create Clear function to remove all the pushpin on the Map

public void Clear()
{
  List<UIElement> elementsToRemove = new List<UIElement>();
  List<UIElement> pushpinToRemove = new List<UIElement>();
  foreach (UIElement element in MyMap.Children)
  {
    if (element.GetType() == typeof(MapLayer))
    {
        MapLayer Lay = (MapLayer)element;
        if (Lay.Name == "PushPinLayer")
        {
            foreach (UIElement p in Lay.Children)
            {
            	if (p.GetType() == typeof(Pushpin))
                {
                	pushpinToRemove.Add(p);
                }
            }
            foreach (UIElement pin in pushpinToRemove)
            {
            	Lay.Children.Remove(pin);
            
        }
        elementsToRemove.Add(Lay);
    }
  }
  foreach (UIElement e in elementsToRemove)
  {
	MyMap.Children.Remove(e);
  }
}

One of the thing is missing from previous posts, is the Tool Tip on Pushpin. Let’s create a custom class called CustomerPushpin by Overriding Pushpin class so that we can show more information on the tooltip.

public class CustomerPushpin : Pushpin
{
  public string CustomerName { get; set; }
  public string CustomerId { get; set; }
  public string CustomerAddress { get; set; }
  public CustomerPushpin(Color Bg)
  {
  	this.Name = Guid.NewGuid().ToString();
        SolidColorBrush scb = new SolidColorBrush(Bg);
        this.Background = scb;
  }
}

Now let’s add a Layer called”PushPinLayer” on the Map and add a Canvas in the layer. We will show the canvas as tooltip on the pushpin.

<m:MapLayer x:Name="PushPinLayer">
      <Canvas x:Name="ContentPopup" Visibility="Collapsed" 
		Opacity="0.85" >
	<Rectangle x:Name="ContentPopupRectangle" Fill="White" 
		Canvas.Left="0" Canvas.Top="0" Height="100" 
		Width="300" RadiusX="20" RadiusY="20"/>
	<StackPanel Canvas.Left="10" Canvas.Top="10">
			<TextBlock x:Name="ContentPopupText"  
				FontSize="12" FontWeight="Bold" 
				TextWrapping="Wrap" Width="250">
			</TextBlock>
	</StackPanel>
      </Canvas>   
</m:MapLayer>

Now change the method GetCustomersCompleted as following:

void GetCustomersCompleted(object sender, DemoSqlServer.DataService.GetCustomersCompletedEventArgs e)
{
  foreach (DemoSqlServer.DataService.Customer C in e.Result)
  {
    CustomerPushpin pin;
    Location d = new Location(Convert.ToDouble(C.Latitude), 
			Convert.ToDouble(C.Longitude));
    if (C.CustomerId > 10050)
        pin = new CustomerPushpin(Colors.Blue );
    else
        pin = new CustomerPushpin(Colors.Red);

    pin.Location = d;
    pin.Name = C.CustomerId.ToString() ;
    pin.CustomerId = C.CustomerId.ToString();
    pin.CustomerName = C.CustomerName.ToString();
    ScaleTransform st = new ScaleTransform();
    st.ScaleX = 0.25;
    st.ScaleY = 0.25;
    st.CenterX = (pin as FrameworkElement).Height / 2;
    st.CenterY = (pin as FrameworkElement).Height / 2;

    pin.RenderTransform = st;
    pin.MouseEnter += new MouseEventHandler(point_MouseEnter);
    pin.MouseLeave += new MouseEventHandler(point_MouseLeave);
    PushPinLayer.AddChild(pin, d);
  }
}

In line 25-26 we added two events called MouseEnter and MouseLeave on the pushpin.

void point_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
  //Show a popup with data about that point
  CustomerPushpin pin = sender as CustomerPushpin;
  if (pin != null)
  {
      MapLayer.SetPosition(ContentPopup, pin.Location);
      MapLayer.SetPositionOffset(ContentPopup, new Point(15, -50));

      string contentString = pin.CustomerId.ToString() + "   " + pin.CustomerName.ToString();  
      //Remove tags from the string
      Regex regex = new Regex("<(.|\n)*?>");
      contentString = regex.Replace(contentString, string.Empty);
      ContentPopupText.Text = contentString;
      ContentPopup.Visibility = Visibility.Visible;
  }
}

void point_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
  //Hide the popup
  CustomerPushpin point = sender as CustomerPushpin;
  ContentPopup.Visibility = Visibility.Collapsed;
}

By adding events to pushpin you can do many things like by clicking on the pushpin show a dialog box, display menu …

The final output is as following:

You can download the code from here

Hope you enjoy the article !!!

So far we assume that we have Longitude and Latitude of address. But what if we have only the Address of the customer and you want to show them on the Bing map. In the next article I will explain this...