Windows 8 – XAML/C# how to Add multi push pins to map control Bing maps

Greetings readers I promised you in my previous post that I am gonna go a little bit deeper in the Bing map control and I will should more advanced scenarios and one is push pins,

Basically I am going to tell you how you can add push pin to your map and also how to dynamically populate those push pins using binding

Refer to my previous article Using bing maps part one for more details cause I am going build on it so if you ever feel that you don’t understand something just click the link and spend a few minutes reading it, I promise you it will prove worthy.

First lets add a normal push pin to our map 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <bm:Map x:Name="MyMap" Width="640" Height="480" 
              Credentials="{StaticResource BingMapsApiKey}" >
            <bm:Map.Children>
                <bm:Pushpin x:Name="pushPin1" />
            </bm:Map.Children>
        </bm:Map>

    </Grid>

Check the code sample above describing how to add a push pin to the map

Below is showing the default position of the push pin

If we want to set the location we place the code below, I will put it on the onnavigate event

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.         ///  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            try
            {
                MapLayer.SetPosition(pushPin1, new Location(12f, 14f));
            }
            catch (Exception ex)
            {
                var x = ex.Message;
                throw;
            }
            base.OnNavigatedTo(e);
        }

Now let’s see how it is going to look like

 Looks good so far now what happen if we wanted to add more push pins to the map, well we would probably copy and paste the push pin tag as many as we wanted but what if we needed to dynamic this part, suppose that we have a list of locations and I want to dynamically create as many pushpins as there is in this list

The answer is simple databinding and data template

First I am gonna add the pushpin as map item template in the resource section

<DataTemplate x:Key="LogoTemplate">
            <bm:Pushpin IsTapEnabled="True" Background="#FFB6DE2E" >
                <bm:MapLayer.Position> 
                    <bm:Location Latitude="{Binding Latitude}" Longitude="{Binding Longitude}" />
                </bm:MapLayer.Position>
            </bm:Pushpin>
        </DataTemplate>

Then I am going to add this to the Bing map control

Like the code below

<bm:Map x:Name="MyMap" Width="640" Height="480" 
              Credentials="{StaticResource BingMapsApiKey}" >
            <bm:MapItemsControl ItemTemplate="{StaticResource LogoTemplate}" ItemsSource="{Binding PushpinCollection}" >
            </bm:MapItemsControl>
        </bm:Map>

Now let’s prepare the data-bind collection we are going to work on and it has to be an observable collection of a custom type pushpin

Here is the definition for pushpin class

public class PushpinModel
    {
        public double Longitude { get; set; }
        public double Latitude { get; set; }
    }

And lets add the
fillings for this collection in the constructor here in the code below

public ObservableCollection<PushpinModel> PushpinCollection { get; set; }

        public MainPage()
        {
            this.InitializeComponent();
            PushpinCollection = new ObservableCollection<PushpinModel>();
            PushpinCollection.Add(new PushpinModel(){Latitude = 14f,Longitude = 15f});
            PushpinCollection.Add(new PushpinModel() { Latitude = 14f, Longitude = 15f });
            PushpinCollection.Add(new PushpinModel() { Latitude = 10f, Longitude = 15f });
            PushpinCollection.Add(new PushpinModel() { Latitude = 14f, Longitude = 11f });
            PushpinCollection.Add(new PushpinModel() { Latitude = 13f, Longitude = 15f });
            PushpinCollection.Add(new PushpinModel() { Latitude = 19f, Longitude = 15f });
            PushpinCollection.Add(new PushpinModel() { Latitude = 14f, Longitude = 10f });
            PushpinCollection.Add(new PushpinModel() { Latitude = 13f, Longitude = 15f });
            PushpinCollection.Add(new PushpinModel() { Latitude = 15f, Longitude = 17f });
            PushpinCollection.Add(new PushpinModel() { Latitude = 20f, Longitude = 19f });
            PushpinCollection.Add(new PushpinModel() { Latitude = 18f, Longitude = 18f });
            DataContext = this;

        }

Now run and check the output screen below

it works just as that u have multi pushpins dynamically created using binding




thanks for reading