Skip to main content

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

Comments

  1. Great article and very informative thanks dapfor. com

    ReplyDelete
    Replies
    1. thanks i am glad i was of a help, and thanks for the praise again :)

      Delete


  2. Why I have namespace error in this line?

    PS. Very nice article.

    ReplyDelete
    Replies
    1. Which line exactly are we talking about, any how I will upload the source code if possible if not please refer to which line

      Delete
  3. you are adding the pushpin as map item template in the resource section. kindly define "resource section"??

    ReplyDelete
  4. for Xaml and element can have his own resources for instance i could use
    for windows phone page is what i ment .. would look like

    </phone.appplicationpage.Resources

    Hope this helps

    ReplyDelete

Post a Comment

Popular posts from this blog

Xamarin Forms Core components Part 1 Dependency Service

Intro Xamarin Forms is a collection of controls that can be used and rendered on multiple platforms, and in order of them to function as they are suppose to, they do need a set of core components that defines the way these controls, in how they are created, how they are rendered to how they are used, of course every platform is different and sometimes a platform specific extra configuration is required, specially that there are so many differences between the different platforms in matter of design, user experience and operating system behavior. So one of the core components of  Xamarin  Forms is the Dependency Service, and by the name suggest it does act as the dependency resolver for all forms controls, if you are not familiar with IOC " I nversion O f C ontrol" and Dependency Injection please refer to the link for a quick intro i wrote a while ago on IOC  IOC Part 1 - Inversion of control Principle .  And as of such the Dependency Service is the concrete inboxe

Xamarin Forms: XAML Creating Custom Controls The MVVM Way

Intro For a growing UI page there always comes a need to create sub views that can be used inside a bigger view, and for that we need custom controls, which are controls that are derived either from a layout or a simple view which is the basic control for almost any UI component in Xamarin forms, and therefore for a start i will use that as an example. And in such example we will create a custom control with a set of bindable properties and explain how they work, also how to add an event that can also be bound to Commands Lets Create the control  I have just went ahead and created a custom control that inherits from Xamarin.Forms.View and have some properties such color and checked all properties to be bound to by the ViewModel serving as the datacontext of the this control. here is the code below using System; using Xamarin.Forms; namespace UserControls { public class CustomView : View { public Color Color { get ; set ;

Windows Phone 8 - Application bar command binding MVVM

This is a short post in which i will explain how on Windows phone 8 to bind the application bar button or menu item, first this is only a fix for the  BindableApplicationbar  which supports windows phone 7 only, i just made it support windows 8 no features added or anything. i have uploaded the dll file here so it can be accessible easily here is the link to download http://sdrv.ms/RApUal now that you got the link lets check how we gonna use it you can refer to BinableApplicationbar  or check out the code here that i actually used in my app and i already read it there !  Add a reference to the BindableApplicationBar library here is the link again  http://sdrv.ms/RApUal Add XML namespace declaration in your page's XAML: xmlns : bar ="clr-namespace:BindableApplicationBar;assembly=BindableApplicationBar" Set Bindable.ApplicationBar property on your page code as in the snippet below: < phone : PhoneApplicationPage >     …     < bar : Bindable.App