Adding Custom Push Pins

[Sean]

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
    this.AddressPins.Add(pin);

    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.

[Andrey]

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"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="PushpinTemplate">
            <telerik:Pushpin telerik:MapLayer.Location="{Binding Location}" />
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <telerik:RadMap x:Name="radMap"
            Center="42,-100"
            ZoomLevel="8"
            UseDefaultLayout="False">
            <telerik:RadMap.Provider>
                <telerik:OpenStreetMapProvider />
            </telerik:RadMap.Provider>
            <telerik:InformationLayer x:Name="informationLayer"
                    ItemsSource="{Binding AddressPins}"
                    ItemTemplate="{StaticResource PushpinTemplate}" />
        </telerik:RadMap>
    </Grid>
</Window>

You can find additional examples here:

http://demos.telerik.com/silverlight/#Map/DataBinding

Greetings,

Andrey Murzov

the Telerik team