Getting Started with Adobe After Effects - Part 6: Motion Blur


Upload Image Close it
Select File

Dinesh's Blog
Browse by Tags · View All
brh 20
#SILVERLIGHT 19
#DOTNET 18
silverlight 18
#ASP.NET 15
Silverlight 4.0 9
bing 7
bing maps 6
wcf services 5
map 5

Archive · View All
August 2010 10
September 2010 3
July 2010 3
June 2010 3
October 2010 1

Adding Pushpin on Bing Map in Silverlight

Jul 27 2010 6:25PM by Dinesh Sodani   

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);
  }
}

Bing Map with Multiple Pushpin via c sharp

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:

Bing Map with Multiple Custom Pushpin via c sharp

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...

Tags: bing maps, silverlight, bing, brh, xml, RenderTransform, ScaleTransform, Pushpin.RenderTransform, Resizing Pushpin, Geospatial, #SILVERLIGHT, wcf, wcf services, Windows Communication Foundation, bing map, bing map binding with sql server, sql server, #XML, #WCF, web services and wcf serices, multiple pushpin in code behind, c sharp, multiple pushpin,


Dinesh Sodani
30 · 6% · 1807
0
Liked
 
0
Lifesaver
 
0
Refreshed
 
0
Learned
 
0
Incorrect



Submit

5  Comments  

  • Very good works. However, I tried to add multiple pushpins in my project, but I found the call PushPinLayer.AddChild(pin, d); in methos GetCustomersCompleted(...) can't been called more than once, Otherwise an exception occures. What can be the problem? I have another question, how to use customer image for pushpin? Is there any code to share?

    Thanks, Kuan

    commented on Sep 20 2010 5:57PM
    kdeng1955
    3065 · 0% · 2
  • Thanks, The only reason I can think is the name of the pushpins you are adding is not unique. In my case the customer id was unique so I choose that customer id for name of the pushpin.

    Regarding display customer image in the pushpin... I have a next article in this series that will be posted very soon...

    commented on Oct 2 2010 8:42AM
    Dinesh Sodani
    30 · 6% · 1807
  • Dinesh,

    Hello. How do I deploy this web service to Windows Server 2003, Windows Server 2008 and Windows 7? Your help would be greatly appreciated.

    commented on Oct 7 2011 8:32AM
    kmilburn
    3065 · 0% · 2
  • Dinesh,

    Useful artical but the lines

    st.CenterX = (pin as FrameworkElement).Height / 2;
    st.CenterY = (pin as FrameworkElement).Height / 2;
    

    caused me some headaches as my pushpins started moving around on changing zoom level. It looks like since the pin object is not yet rendered it has no height and therefore the two transform parameters end up being zero. I figured this out from the article http://pietschsoft.com/post/2010/06/04/Resizing-and-Auto-Scaling-Pushpin-in-Bing-Maps-Silverlight.aspx and changed the parameterd to 17 and 34 respectively and everything worked.

    All the same, nice samples on using Map Control.

    commented on Nov 4 2011 5:25AM
    IanK
    3065 · 0% · 2
  • Greate post and works fine in vs2010, but can't get to work in web server 2008 R2 and IIS7. A post on how to deploy would be very welcome!

    thanks,

    steve

    commented on Nov 15 2011 10:54AM
    stegrace
    3065 · 0% · 2

Your Comment


Sign Up or Login to post a comment.

    Copyright © Rivera Informatic Private Ltd Contact us      Privacy Policy      Terms of use      Report Abuse      Advertising      [ZULU1097]