MapPinPoint vs PushPin issue; PushPin Image

6 posts, 1 answers
  1. figueiredorj
    figueiredorj avatar
    68 posts
    Member since:
    Mar 2011

    Posted 12 May 2011 Link to this post

    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.
  2. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 17 May 2011 Link to this post

    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"
         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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. LE DREAU Steeve
    LE DREAU Steeve avatar
    74 posts
    Member since:
    Aug 2012

    Posted 08 Jul 2011 Link to this post

    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
  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 13 Jul 2011 Link to this post

    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:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  6. LE DREAU Steeve
    LE DREAU Steeve avatar
    74 posts
    Member since:
    Aug 2012

    Posted 13 Jul 2011 Link to this post

    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
  7. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts

    Posted 13 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top
DevCraft banner