Creating a custom Virtual Earth Web Part in SharePoint 2010

I had a requirement to create a web part that will pull the address information from one of the records in CRM and show it on the map.

One of the issues I faced while trying out different approaches was that after adding the web part to the SharePoint page, the scrollbar used to go missing in that page.

Finally with help of below two links I managed to develop a the web part.

http://sundium.wordpress.com/2008/06/15/dynamics-crm-40-virtual-earth/

http://virtualearthwebpart.codeplex.com/

Well we could make use of the below code to achieve that

public class MyVirtualEarthWebPart : WebPart
{
protected override void OnLoad(EventArgs e)
{
System.Web.UI.ClientScriptManager csm = Page.ClientScript;
StringBuilder builder = new StringBuilder();
string SCRIPT_NAME = "MapScript" + this.ID;

builder.Append("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"> \n");
builder.Append("<script type=\"text/javascript\" src=\"http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2\"></script> \n");
builder.Append("<script type=\"text/javascript\"> \n");
builder.Append("    var map = null; \n");
builder.Append("    var latitude = null; \n");
builder.Append("    var longitude = null; \n");
builder.Append("    var address = ''; \n");
builder.Append("    var titles = new Array(); \n");

builder.Append("    function GetMap() \n");
builder.Append("    { \n");
builder.Append("        try  \n");
builder.Append("        { \n");
builder.Append("            address = 'New C G Road, chandkheda, gandhinagar';\n");
builder.Append("            map = new VEMap('myMap');\n");
builder.Append("            map.LoadMap(null,4,VEMapStyle.Hybrid); \n");
builder.Append("            map.Find(null,address,null,null,0,10,true,true,true,true,FindCallBack); \n");
builder.Append("        } \n");
builder.Append("        catch (e) \n");
builder.Append("        { \n");
builder.Append("            alert('GetMap: ' + e.message); \n");
builder.Append("        } \n");
builder.Append("    } \n");

builder.Append("    function FindCallBack(shapeLayer, results, positions, moreResults, e) \n");
builder.Append("    { \n");
builder.Append("        try  \n");
builder.Append("        { \n");
builder.Append("             if(positions != null && positions.length > 0) \n");
builder.Append("              { \n");
builder.Append("                PlacePushPin(positions[0].LatLong.Latitude,positions[0].LatLong.Longitude); \n");
builder.Append("                latitude = positions[0].LatLong.Latitude; \n");
builder.Append("                longitude = positions[0].LatLong.Longitude; \n");
builder.Append("               } \n");
builder.Append("        } catch (e) { \n");
builder.Append("            alert('FindCallBack: ' + e.message); \n");
builder.Append("        } \n");
builder.Append("      }      \n");

builder.Append("    function PlacePushPin(lat, lon){ \n");
builder.Append("                latlong = new VELatLong(lat,lon); \n");
builder.Append("                customerPushPin = new VEShape(VEShapeType.Pushpin,latlong); \n");
builder.Append("                customerPushPin.SetTitle(address); \n");
builder.Append("                map.AddShape(customerPushPin); \n");
builder.Append("                map.SetCenterAndZoom(latlong,15);  \n");
builder.Append("                } \n");

builder.Append("_spBodyOnLoadFunctionNames.push('GetMap'); \n</script> \n");
csm.RegisterClientScriptBlock(
this.GetType(),
SCRIPT_NAME,
builder.ToString(),
false);

}
protected override void CreateChildControls()
{
base.CreateChildControls();
StringBuilder builder = new StringBuilder();
builder.Append("<div id='myMap' style='position: relative; width: 300px; height: 300px;'></div>");
this.Controls.Add(new LiteralControl(builder.ToString()));
}
}

Bye.

Error: ‘VEMap’ is undefined

If we get the above error while working with Virtual Earth first thing we need to check is whether the internet connection is working or not.

Next thing to check is whether JavaScript is disabled for the browser. And if this is the case, to enable it in case of IE.

Go to Tools à Internet Options à Security Tab

Find the entry Active Scripting and enable it.

Hope it helps.

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.

Using GeoCode service to show addresses as PushPin(s) in Bing Map Silverlight Control.

For this first we need to add service reference to Geocode service to our Silverlight Application

http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc

On how to create Silverlight Application that uses Bing Map Control please refer to

https://nishantrana.wordpress.com/2011/03/05/using-bing-maps-silverlight-control/

Geocode service will return us the results found (locations) based on the address passed to it.

We can use the below sample code that displays the Pushpins on Bing Map based on the query (address) provided. (Here I am providing my permanent address)

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)
    {
        Pushpin myPushPin = new Pushpin();
        // 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);
}
}

 

This is how it looks 


Bye.

Using Bing Maps Silverlight Control

To use Bing Maps Silverlight Control first we need to have Bing Map key with us, for this we need go to https://www.bingmapsportal.com/ (bing map account center) to create an account and generate a key for us.

Once we have the key, we need to download Bing Map Silverlight Control SDK.

After this is done, we need to create a Silverlight Application Project.

Add References to

  1. Microsoft.Maps.MapControl.dll
  2. Microsoft.Maps.MapControl.Commin.dll

We can found them at C:\Program Files\Bing Maps Silverlight Control\V1\Libraries.

Then make the following changes to 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=”OurBingMapKey” Mode=”AerialWithLabels” ></m:Map>

</Grid>
</UserControl>

Build the solution and run the OurApplicationtestpage.aspx.