Silverlight Bing Map Control Example :

Silverlight Bing Map Control Example : 

       Hi here I will explain how to build a bing map control using silverlight. In this example I explained how to show pushpin, and some details one the bing map control.

Output Screen : 

Reference dll :

      Before you start coding you need to add the following dll files in your silverlight program (in solution explorer->References->add references)
"Microsoft.Maps.MapControl.dll" 
"Microsoft.Maps.MapControl.Common.dll"

Where to get the dll files :

    To get this dll what you need to do is go to http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=2949 and download the exe file.After you  install that file,you will get the dll files from the following location
 C:\Program Files (x86)\Bing Maps Silverlight Control\V1\Libraries - you will find: Microsoft.Maps.MapControl.dll

Bing Map KEY :

       Before use the bing map control you need to get CredentialsProvider key from https://www.bingmapsportal.com/ 




Design Page : 


Xaml Code : 

          Use the following code between User Control

  <Grid x:Name="LayoutRootBackground="White">

<Button Content="Button" Height="23" HorizontalAlignment "Left" Margin="349,27,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />

<TextBox Height="23HorizontalAlignment "Left" Margin="148,27,0,0" Name="textBox1VerticalAlignment="Top" Width="176" />

<m:Map BorderBrush="#FF00A2FF" BorderThickness="5"  ZoomLevel="10"  x:Name="MapName" CredentialsProvider="Your Key" AnimationLevel="Full"Margin="0,75,0,0" Height="400" Width="700HorizontalAlignment "Left" VerticalAlignment="Top" />

</Grid >

Add Service Reference :

        You need to add service reference in your silverlight program to access the map location.
Go to solution explorer->References->right click add Service Reference->type the following url http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc/mex ->give Service Reference name as GeocodeService_ (You can give other names also)

C# Code :

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Maps; using Microsoft.Maps.MapControl.Common; using M = Microsoft.Maps.MapControl; using mapsample.GeocodeService_;
namespace mapsample { public partial class MainPage : UserControl { //this variables used in pushpin mouse enter events to show some details Grid gridmappopup = new Grid(); M.MapLayer m_PushpinLayer; public MainPage() { InitializeComponent(); MapName.ZoomLevel = 3; //zoom level of map }

//button click event========================================================= private void button1_Click(object sender, RoutedEventArgs e) { geocode(textBox1.Text, 1); }
 //Following 3 functions will locate the push pin================================
public void geocode(string addr, int waypointindex)
 {
            GeocodeService_.GeocodeServiceClient geocodeservice = new GeocodeService_.GeocodeServiceClient ("BasicHttpBinding_IGeocodeService");
            geocodeservice.GeocodeCompleted += new EventHandler<GeocodeCompletedEventArgs>(geocodeservice_GeocodeCompleted);
            GeocodeService_.GeocodeRequest request = new GeocodeService_.GeocodeRequest();
            request.Credentials= new M.Credentials();
            request.Credentials.ApplicationId = (MapName.CredentialsProvider as M.ApplicationIdCredentialsProvider).ApplicationId;
            request.Query = addr;
            geocodeservice.GeocodeAsync(request, waypointindex);
 }
void geocodeservice_GeocodeCompleted(object sender, GeocodeCompletedEventArgs e)
 {
            GeocodeResult georesult = null;
            georesult = e.Result.Results[0];
            this.mapmaker(georesult, 1);
}
private void mapmaker(GeocodeResult result, int index)
 {
            GeocodeLocation loc = result.Locations[0];
            M.Pushpin location = new M.Pushpin();
            //this push pin name used in pushpin click events
            location.Name = Convert.ToString(result.DisplayName);
            //pushpin events
            location.MouseEnter += new MouseEventHandler(location_MouseEnter);
            location.MouseLeave += new MouseEventHandler(location_MouseLeave);
            location.MouseLeftButtonUp += new MouseButtonEventHandler(location_MouseLeftButtonUp);
          
            location.Location = new M.Location(loc.Latitude, loc.Longitude);
            clearpushpin(); //this function clear previous pushpin
            MapName.Children.Add(location);
            MapName.Center = new M.Location(loc.Latitude, loc.Longitude);
            MapName.ZoomLevel = 2;
 }
 //remove old push pin=======================================================
private void clearpushpin()
 {
            MapName.Children.Clear();
 }
 //pushpin mouse enter event(increase size of pin,and show location name below the pin)========
 void location_MouseEnter(object sender, MouseEventArgs e)
  {
            M.Pushpin pushpin = sender as M.Pushpin;
            // increase pushpin size
            ScaleTransform st = new ScaleTransform();
            st.ScaleX = 1.4;
            st.ScaleY = 1.4;
            // set center of scaling to center of pushpin
            st.CenterX = (pushpin as FrameworkElement).Height / 2;
            st.CenterY = (pushpin as FrameworkElement).Height / 2;
            pushpin.RenderTransform = st;
            //show some details on the map(here we show location name blow pushpin)
            m_PushpinLayer = new M.MapLayer();
            MapName.Children.Add(m_PushpinLayer);
            Label lbl = new Label();
            lbl.Background = new SolidColorBrush(Color.FromArgb(255, 25, 162, 222));
            lbl.Foreground = new SolidColorBrush(Colors.White);
            lbl.Content = pushpin.Name;
            gridmappopup.Children.Add(lbl);
            //margin for the grid which contain location name
            double y = pushpin.Location.Latitude, x = pushpin.Location.Longitude;
            m_PushpinLayer.AddChild(gridmappopup, new Microsoft.Maps.MapControl.Location(y, x), M.PositionOrigin.Center);       
 }
  //pushpin mouseleave event(Decrease size,and remove puspin detail)================
 void location_MouseLeave(object sender, MouseEventArgs e) 
 { 
 M.Pushpin pushpin = sender as M.Pushpin
 // remove the pushpin transform
 pushpin.RenderTransform = null;
 //remove pushpin details 
 gridmappopup.Children.Clear(); 
 m_PushpinLayer.Children.Clear(); 
 }
//mouse click event of push pin============================================
void location_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { M.Pushpin pp = sender as M.Pushpin; MessageBox.Show(pp.Name); }

Thats all...
If you want know more you can refer this link 

Comments

Popular posts from this blog

Upload Single/Multiple file by using the REST API and jQuery SharePoint 2013

A type named 'SP.Data. could not be resolved by the model error

Add content type to SharePoint List/Library using REST API