Bing Map – Nishant Rana's Weblog

Simple Bing Map HTML Web Resource to show Country location in Dynamics 365

Just sharing a HTML Web resource code to show Country location inside the map using name of the country.

Source Code: –


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My Bing Map</title>
<script charset="UTF-8" type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>
<script type="text/javascript">
var map = null;

// get the bing map key https://msdn.microsoft.com/en-us/library/ff428642.aspx
var credentials = "AvYH87t36Tv3ybyYagU9HUZKjsrWO2Hcup3nu1fmNhpenHKO_xxxxx";

function GetMap() {

// countryName - name of the country from the CRM's form
var countryName = parent.Xrm.Page.getAttribute("new_name").getValue();

// calling virtual earth api
var geocodeRequest = "https://dev.virtualearth.net/REST/v1/Locations?countryRegion=" + countryName + "&key=" + credentials + "&jsonp=GeocodeCallback";

CallRestService(geocodeRequest);
}

function GeocodeCallback(result) {

if (result && result.resourceSets && result.resourceSets.length > 0 && result.resourceSets[0].resources && result.resourceSets[0].resources.length > 0) {

var coordinates = result.resourceSets[0].resources[0].point.coordinates;
var centerPoint = new Microsoft.Maps.Location(coordinates[0], coordinates[1]);

map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{
credentials: credentials,
center: centerPoint,
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 5
});

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter());
map.entities.push(pushpin);
}
}

function CallRestService(request) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", request);
document.body.appendChild(script);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position: relative; width: 600px; height: 300px;"></div>
</body>
</html>

Check this helpful post as well

https://blogs.bing.com/maps/2015/03/05/accessing-the-bing-maps-rest-services-from-various-javascript-frameworks/

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

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