Adding Custom Push Pins

2 posts, 1 answers
  1. Sean
    Sean avatar
    10 posts
    Member since:
    Aug 2011

    Posted 17 Aug 2011 Link to this post

    I have looked through all of the samples, including the samples on this forum and I am just not understanding how to bind a collection of custom push pins using the MVVM paradigm. I understand the InformationLayer is an items control, so I should be able to bind anything to it, but it's just not working for me.

    Consider a simple class like the following:

    public class Address
        public Location Location { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Zip { get; set; }

    I'd like to be able to add a pin to the map for each Address. My intent is to eventually provide hover functionality so that a popup displays information over the pin when the mouse hovers over it, but I haven't gotten the pins to display. In the view model, I have a property of type ObservableCollection<Address>. I then bind to the address collection in the XAML with the following:

    <telerik:InformationLayer ItemsSource="{Binding AddressPins}" />

    I understand I will have to create an item template in order to achieve the hover affect I'm looking for, but it is my understanding the above code should render pins for each location specified by an Address object. The following is an ICommand that handles the DragDropManager's OnDropInfo event (I'm dragging tasks onto the map).

    if (e.Options.Status == DragStatus.DropComplete)
        RadMap map = (RadMap)e.Options.Destination;
        Location dropCursorLocation = Location.GetCoordinates(map, e.Options.RelativeDragPoint);
        Entity.Task task = (Entity.Task)e.Options.Payload;
        Address pin = new Address
                Address = task.Address,
                City = task.City,
                Location = dropCursorLocation,
                State = task.State
                Zip = task.Zip
        System.Diagnostics.Debug.WriteLine("Dropped at Latitude: {0} - Longitude: {1}", dropCursorLocation.Latitude, dropCursorLocation.Longitude);
        // Add pin to the map
        e.Handled = true;

    If somebody could please further clarify how to handle this, I would greatly appreciate it. It should be noted I also tried having the Address class extend the Pushpin class, without success. I didn't think this was necessary, however, because the WPF samples were simple POCO's.
  2. Answer
    Andrey avatar
    1681 posts

    Posted 22 Aug 2011 Link to this post

    Hello Sean,

    Your Address class is a custom data, so the information layer doesn't have any idea which property specify the location of the pushpin. So you won't be able to see any pushpins over the map without additional steps. The simplest one is to create data template for your address. For example:

    <Window x:Class="ShowPinPoints.MainWindow"
            Title="MainWindow" Height="350" Width="525">
            <DataTemplate x:Key="PushpinTemplate">
                <telerik:Pushpin telerik:MapLayer.Location="{Binding Location}" />
            <telerik:RadMap x:Name="radMap"
                    <telerik:OpenStreetMapProvider />
                <telerik:InformationLayer x:Name="informationLayer"
                        ItemsSource="{Binding AddressPins}"
                        ItemTemplate="{StaticResource PushpinTemplate}" />

    You can find additional examples here:

    Andrey Murzov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  3. DevCraft R3 2016 release webinar banner
Back to Top