MapPinPoint vs PushPin issue; PushPin Image

[figueiredorj]

Hi.

I am kind of new with telerik siilverligth radmap, although i had used before Virtual Earth.

I was trying to set Pushpin image with no success. Somehow it seems pushpin only to have a Background property color only. In my "googling" i found out that there is a MapPinPoint object.

Which are differences between the 2 and which one should I use?

And by the way, how to set image? hope to find out before someone answers but if not....
an example would be nice (I am not successfully adding PinPoint to map)

var pin = new MapPinPoint()
              {
                  ImageSource = new BitmapImage(new Uri("/Images/icons/car.png", UriKind.Relative))
              };
MapLayer.SetLocation(pin, new Location(result.Lat, result.Long));
var mapLayer = new InformationLayer();
mapLayer.MapControl = mapcontrol.MapObject;
mapLayer.Items.Add(pin);
mapcontrol.MapObject.Items.Add(mapLayer);

'mapcontro'l is a Wrapper to RadMap.


Thanks in advance.

[Andrey]

Hi,

The InformationLayer is an ItemsControl. Similar to any other Silverlight ItemsControl it allows you to show your business data using custom representation. The Pushpin is just a visualization for Location object which is available "out of the box". The MapPinPoint is mostly used to represent specific data types from the KML or ESRI shape files. But you can use it for other purposes. Your code is OK except for the image URI. When image is a resource in the Silverlight project you must setup URI in a different way:

MapPinPoint pin = new MapPinPoint()
{
    ImageSource = new BitmapImage(new Uri("/Your_Silverlight_Project;component/Path_To_Image", UriKind.Relative))
};

You can customize presentation of your business data using item templates. For example:

public class PointOfInterest : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private Location location;
    private string title;
    private string description;
    private HotSpot hotSpot;
    private Brush background;
    private Brush borderBrush;
    private Thickness borderThickness;

    public Location Location
    {
        get
        {
            return this.location;
        }

        set
        {
            this.location = value;
            this.NotifyPropertyChanged("Location");
        }
    }

    public string Title
    {
        get
        {
            return this.title;
        }

        set
        {
            this.title = value;
            this.NotifyPropertyChanged("Title");
        }
    }

    public string Description
    {
        get
        {
            return this.description;
        }

        set
        {
            this.description = value;
            this.NotifyPropertyChanged("Description");
        }
    }

    public HotSpot HotSpot
    {
        get
        {
            return this.hotSpot;
        }

        set
        {
            this.hotSpot = value;
            this.NotifyPropertyChanged("HotSpot");
        }
    }

    public Brush Background
    {
        get
        {
            return this.background;
        }

        set
        {
            this.background = value;
            this.NotifyPropertyChanged("Background");
        }
    }

    public Brush BorderBrush
    {
        get
        {
            return this.borderBrush;
        }

        set
        {
            this.borderBrush = value;
            this.NotifyPropertyChanged("BorderBrush");
        }
    }

    public Thickness BorderThickness
    {
        get
        {
            return this.borderThickness;
        }

        set
        {
            this.borderThickness = value;
            this.NotifyPropertyChanged("BorderThickness");
        }
    }


    protected void NotifyPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

<UserControl x:Class="ShowPinPointsCS.MainPage"
     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"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>
        <DataTemplate x:Key="CustomTemplate">
            <Border telerik:MapLayer.Location="{Binding Location}"
                    telerik:MapLayer.HotSpot="{Binding HotSpot}"
                    Background="{Binding Background}"
                    BorderBrush="{Binding BorderBrush}"
                    BorderThickness="{Binding BorderThickness}">
                <Grid Width="50" Height="70" Margin="5">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="0" Text="{Binding Title}" HorizontalAlignment="Center"  />
                    <TextBlock Grid.Row="1" Text="{Binding Description}" HorizontalAlignment="Center" />
                </Grid>
            </Border>
        </DataTemplate>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadMap x:Name="radMap"
            Center="42, -100"
            ZoomLevel="8">
            <telerik:RadMap.Provider>
                <telerik:OpenStreetMapProvider />
            </telerik:RadMap.Provider>
            <telerik:InformationLayer x:Name="informationLayer"
                  ItemTemplate="{StaticResource CustomTemplate}" />
        </telerik:RadMap>
    </Grid>
</UserControl>

Greetings,
Andrey Murzov
the Telerik team

[LE DREAU Steeve]

Hi,

Using your example, I would like to know how you would add some behaviors like when I click on one control of my datatemplate, it shows a details bubble.
I'm asking this because I have a problem :

I'm using hotspots to show a small red point, and when I click on it, it shows a details bubble. In fact, in the mouseLeftButtonUp event, I change the visibility property of my bubble (it's a border). It works well but in fact, when I have some points that are near to each other, even if my bubble is collapsed, I can't click on other points that would be behind the bubble if it was visible. I think the hotspot takes the maximum size of my datatemplate even if the bubble is not shown (and then the size should be less).

Is there a workaround about this please ?
Thanks

Steeve

[Andrey]

Hello Le Dreau Steeve,

Hi Steeve,
 
First of all, just to be sure that we are using same terms for the same things. In RadMap the HotSpot is not a class which represents something visible over the map. It sets position inside the framework element which should be placed to the item location.
 
There are several changes I would recommend to do in your project:
 
1. You shouldn't change opacity of the control, but change its Visibility:

<UserControl x:Class="TelerikMapTests.PinPointControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             Background="Transparent"
             d:DesignHeight="300" d:DesignWidth="400">

    <StackPanel x:Name="LayoutRoot" Background="Transparent">
        <Border x:Name="ControlToHideOrShow"
                Background="#44a4a4a4"
                CornerRadius="2"
                Padding="5 2 5 2"
                Canvas.Top="-30"
                Canvas.Left="-50"
                BorderBrush="Black"
                BorderThickness="1"
                Visibility="Collapsed">
            <Border.RenderTransform>
                <ScaleTransform ScaleX="0.7" ScaleY="0.7" />
            </Border.RenderTransform>
            <Border.RenderTransformOrigin>
                <Point X="0.5" Y="0.5" />
            </Border.RenderTransformOrigin>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Title}" FontSize="8" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </StackPanel>
        </Border>

        <Path Stroke="Black"
                x:Name="PART_Ellipse"
                StrokeThickness="0.5"
                Fill="Red"
                Width="10"
                Height="10"
                Stretch="Fill"
                StrokeLineJoin="Round"
                Data="F1 M 35.5061,96.4271C 35.6406,96.2119 29.3333,73.5246 16.0583,65.131C 6.48358,59.0769 0.5,48.05 0.5,35.8692C 0.5,16.3799 16.2992,0.580719 35.5733,0.500031C 54.8474,0.419281 70.8079,16.6424 70.8079,36.1316C 70.8079,48.3124 64.8243,59.3394 55.2496,65.3934C 41.9746,73.787 35.3716,96.2119 35.5061,96.4271 Z ">
        </Path>
    </StackPanel>
</UserControl>

Partial Public Class PinPointControl
    Inherits UserControl

    Public Sub New
        InitializeComponent()
    End Sub

    Private _CurrentShownLabelDirecto13Loc As Border = Nothing

    Public Sub PART_Ellipse_MouseLeftButtonUp(sender As System.Object, e As System.Windows.Input.MouseButtonEventArgs)
        If _CurrentShownLabelDirecto13Loc IsNot Nothing AndAlso _CurrentShownLabelDirecto13Loc.Equals(Me.ControlToHideOrShow) Then
            If _CurrentShownLabelDirecto13Loc.Visibility = Windows.Visibility.Collapsed Then
                _CurrentShownLabelDirecto13Loc.Visibility = Windows.Visibility.Visible
            Else
                _CurrentShownLabelDirecto13Loc.Visibility = Windows.Visibility.Collapsed
            End If
        Else
            If _CurrentShownLabelDirecto13Loc IsNot Nothing Then
                _CurrentShownLabelDirecto13Loc.Visibility = Windows.Visibility.Collapsed
            End If
            _CurrentShownLabelDirecto13Loc = Me.ControlToHideOrShow
            _CurrentShownLabelDirecto13Loc.Visibility = Windows.Visibility.Visible
        End If
    End Sub
End Class

 
2. The MapLayer.HotSpot property can be set on the top level element in the data template. Since you bind the hot spot to the "PART_Ellipse" element which is inside of the visual tree of the PinPointControl the data template should looks like the following:

<DataTemplate x:Key="Tpl">
        <local:PinPointControl telerik:MapLayer.Location="{Binding Coords}"
                               telerik:MapLayer.ZoomRange="{Binding ZoomRange}"
                               telerik:MapLayer.BaseZoomLevel="{Binding ZoomLevelBase}"
                               MouseLeftButtonUp="PART_Ellipse_MouseLeftButtonUp">
            <telerik:MapLayer.HotSpot>
                <telerik:HotSpot X="0.5" Y="0.5" XUnits="Fraction" YUnits="Fraction" ElementName="PART_Ellipse" />
            </telerik:MapLayer.HotSpot>
        </local:PinPointControl>
</DataTemplate>

 
3. When you change visibility of the same parts of the custom control which is placed into the information layer yo should force the information layer to re-arrange item. As you can see in the #2 I've attached MouseLeftButtonUp in the data template. I did it to be able to get access the information layer when necessary:

Private Sub PART_Ellipse_MouseLeftButtonUp(sender As System.Object, e As System.Windows.Input.MouseButtonEventArgs)
    Dim pin As PinPointControl = sender
    pin.PART_Ellipse_MouseLeftButtonUp(sender, e)
    Me.informationLayer.ArrangeItem(pin.DataContext)
End Sub

Kind regards,

Andrey Murzov

the Telerik team

[LE DREAU Steeve]

hi,

Thanks for your answer.
I'm trying to migrate to the last internal build on a test machine and I have a problem with the RadRichTextBoxRibbonUI:RichTextCommand attachable property that doesn't exists anymore. I've searched on the Telerik website about this change but found no answer.
Could you please tell me what I have to change to make it work again ?

Thanks

Steeve

[Iva Toteva]

Hi Steeve,

I tested the behavior of RadRichTextBox and RadRichTextBoxRibbonUI with the dlls from the LIB and was not able to reproduce the issue.
Sometimes such problems occur on upgrading when not all assembly references are changed. (Visual Studio and Expression Blend tend to play tricks with that, too). Could you please verify that all needed assembly references have been updated and point to the folder where you extracted the dlls from the LIB? If not, you may need to delete the bin and obj folders manually. If the problem persists, we would appreciate a sample demo illustrating the problem.

Greetings,
Iva
the Telerik team