Custom Pushpin with Pop Up on Hover in Bing Map Silverlight Control

First let’s create a custom Pushpin class extending the Pushpin.

public class
MyCustomPushpin : Pushpin
{
public string Description { get; set; }

 }

Now let’s define the Pop Up in the MainPage.xaml

<UserControl x:Class=”MyBingApplication.MainPage”
xmlns:m=”clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243; xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

mc:Ignorable=”d” d:DesignWidth=”640″ d:DesignHeight=”480″>

<Grid x:Name=”LayoutRoot”>

<m:Map x:Name=”myMap” CredentialsProvider=”AvYH87t36Tv3ybyYagU9HUZKjsrWO2Hcup3nu1fmNhpenHKO_RvEZ6PdGGc6CYGK” Mode=”AerialWithLabels” >

<m:MapLayer x:Name=”MyPushPinLayer”>

<Canvas x:Name=”ContentPopup” Visibility=”Collapsed”>

<Rectangle x:Name=”ContentPopupRectangle” Fill=”LawnGreen” Opacity=”0.7″
 Canvas.Left=”0″ Canvas.Top=”0″ Height=”40″ Width=”120″ RadiusX=”20″ RadiusY=”20″/>
<StackPanel Canvas.Left=”20″ Canvas.Top=”10″>

<TextBlock x:Name=”ContentPopupText”
FontSize=”12″ FontWeight=”Bold” TextWrapping=”Wrap” Width=”200″>
</TextBlock>
</StackPanel>
</Canvas>

</m:MapLayer>

</m:Map>
</Grid></UserControl>

First we have added a Map Layer; inside it we have Canvas that holds the Rectangle Shape and Text Block to display the text inside it.

Our code behind would be this 

public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();string Address = "759 Jantanagar, Chandkheda, Gandhinagar, Gujarat, 382424";
GeocodeServiceClient myGeoCodeClient = new GeocodeServiceClient("BasicHttpBinding_IGeocodeService");          
// create an event hanler for GeocodeCompleted event as the service would be call asynchronously
myGeoCodeClient.GeocodeCompleted+=new EventHandler<GeocodeCompletedEventArgs>(myGeoCodeClient_GeocodeCompleted);
// create the request and pass the address to it
GeocodeRequest myGeoCodeRequest = new GeocodeRequest();
myGeoCodeRequest.Credentials = new Microsoft.Maps.MapControl.Credentials();
myGeoCodeRequest.Credentials.ApplicationId=((ApplicationIdCredentialsProvider)myMap.CredentialsProvider).ApplicationId;
myGeoCodeRequest.Query = Address;

// Pass the request to GeocodeAsyn method
myGeoCodeClient.GeocodeAsync(myGeoCodeRequest);

}

void myGeoCodeClient_GeocodeCompleted(object sender, GeocodeCompletedEventArgs e)
{
// create a map layer
MapLayer myMapLayer = new MapLayer();
myMap.Children.Add(myMapLayer);

// create a location collection class
LocationCollection myLocationColl=new LocationCollection();

foreach (GeocodeResult gr in e.Result.Results)
{
    MyCustomPushpin myPushPin = new MyCustomPushpin();
    myPushPin.Description = "Custom Pushpin";
    myPushPin.MouseEnter += new MouseEventHandler(myPushPin_MouseEnter);
    myPushPin.MouseLeave += new MouseEventHandler(myPushPin_MouseLeave);

    // set it to first found location
    myPushPin.Location = gr.Locations[0];
    // add it to location collection
    // which would be used to set the map's bound
    myLocationColl.Add(myPushPin.Location);
    // Add the drawn point to the route layer.                   
    myMapLayer.Children.Add(myPushPin);
}
var bounds = new LocationRect(myLocationColl);
myMap.SetView(bounds);
}

void myPushPin_MouseLeave(object sender, MouseEventArgs e)
{
// when mouse moves out of the popup hide it
ContentPopup.Visibility = Visibility.Collapsed;
}

void myPushPin_MouseEnter(object sender, MouseEventArgs e)
{
//Show a popup with custom pushpin
MyCustomPushpin pin = sender as MyCustomPushpin;
if (pin != null)
{
    MapLayer.SetPosition(ContentPopup, pin.Location);
    MapLayer.SetPositionOffset(ContentPopup, new Point(15, -50));  
    ContentPopupText.Text = "My Pushpin";
    ContentPopup.Visibility = Visibility.Visible;
}
}
}

 http://www.box.net/shared/5m7oap8s6p 

This is how it will look

Bye.


Author: Nishant Rana

I love working in and sharing everything about Microsoft.NET technology !

Share your thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s