[Solved] Binding data to Rectangle in RadMap

[Kevin]

Hi everybody,

I'm working as on that example: http://www.telerik.com/help/silverlight/radmap-features-data-binding.html

But my data is not being binding. Someone can help me?

I have copied my code bellow:

MainPage.xaml
-------------------------

 

<UserControl x:Class="DemoSL.MainPage"

        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"

        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

 <Grid x:Name="LayoutRoot">

  <telerik:RadMap x:Name="radMap" Width="600" Height="480">

    <telerik:InformationLayer x:Name="informationLayer" Visibility="Visible">

     <telerik:InformationLayer.ItemTemplate>

      <DataTemplate x:Name="dataTemplate">

       <Grid x:Name="gridContent" 

       telerik:MapLayer.BaseZoomLevel="{Binding BaseZoomLevel}"

       telerik:MapLayer.Location="{Binding Location}"

       telerik:MapLayer.ZoomRange="{Binding ZoomRange}">                        

        <telerik:MapLayer.HotSpot>

          <telerik:HotSpot X="0.5" Y="0.5"  XUnits="Fraction" YUnits="Fraction" 
                            ElementName="PART_Rectangle" />

        </telerik:MapLayer.HotSpot>

        <Rectangle x:Name="PART_Rectangle" Width="800" Height="800" Stroke="Red"

       StrokeThickness="3" Fill="Yellow" RadiusX="2" RadiusY="2">

          <ToolTipService.ToolTip>

           <ToolTip Content="{Binding Caption}" />

          </ToolTipService.ToolTip>

         </Rectangle>

        </Grid>

       </DataTemplate>

      </telerik:InformationLayer.ItemTemplate>

     </telerik:InformationLayer>

   </telerik:RadMap>

  </Grid>

</UserControl>

MainPage.xaml.cs
-------------------------

public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            BingMapProvider bingMap = new BingMapProvider(MapMode.Aerial, true, "MyBingMapKey");
            this.radMap.Provider = bingMap;
            this.radMap.InitializeCompleted += radMap_InitializeCompleted;
        }
        void radMap_InitializeCompleted(object sender, EventArgs e)
        {
            ObservableCollection<MapItem> items = new ObservableCollection<MapItem>();
            items = GetMapData();
            this.informationLayer.ItemsSource = items;
        }

        private ObservableCollection<MapItem> GetMapData()
        {
            ObservableCollection<MapItem> data = new ObservableCollection<MapItem>();
            data.Add(new MapItem("Item1", new Location(42.6957539183824, 23.3327663758679), 5, new ZoomRange(5, 12)));
            data.Add(new MapItem("Item2", new Location(42.1429369264591, 24.7498095849434), 5, new ZoomRange(5, 12)));
            data.Add(new MapItem("Item3", new Location(42.5131732087098, 27.4611884843576), 5, new ZoomRange(5, 12)));
            data.Add(new MapItem("Item4", new Location(43.2073941930888, 27.9275176988258), 5, new ZoomRange(5, 12)));
            return data;
        }
    }

MapItem.cs
----------

public class MapItem
    {
        public MapItem(string caption, Location location, double baseZoomLevel, ZoomRange zoomRange)
        {
            this.Caption = caption;
            this.Location = location;
            this.BaseZoomLevel = baseZoomLevel;
            this.ZoomRange = zoomRange;
        }
        public string Caption
        {
            get;
            set;
        }
        public Location Location
        {
            get;
            set;
        }
        public double BaseZoomLevel
        {
            get;
            set;
        }
        public ZoomRange ZoomRange
        {
            get;
            set;
        }
    }

Location.cs
-----------

public class Location
    {
        public Location(double xlocation, double ylocation)
        {
            this.Xlocation = xlocation;
            this.Ylocation = ylocation;
        }

        public double Xlocation
        {
            get;
            set;
        }
        public double Ylocation
        {
            get;
            set;
        }
    }

ZoomRange.cs
------------

public class ZoomRange
    {
        public ZoomRange(double xzoom, double yzoom)
        {
            this.Xzoom = xzoom;
            this.Yzoom = yzoom;
        }

        public double Xzoom
        {
            get;
            set;
        }
        public double Yzoom
        {
            get;
            set;
        }

    }

[Andrey]

Hello Kevin,

You've overridden Location and ZoomRange structures in your code. It will not work. You must use Location and ZoomRange structures from the Telerik.Windows.Controls.Map namespace.

Greetings,
Andrey Murzov
the Telerik team

[Kevin]

ohhh, Thank you so much, can you tell me if exists click event on MapRectangle?

Thank you so much again :)

[Andrey]

Hello Kevin,

I think you can use the MouseLeftButtonDown event of the MapRectangle. The handler should set the Handled property of event arguments to "true" to prevent propagating the event to the map to avoid panning it to center according to standard behavior of mouse click.

        private void rect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

        {

            // ...


            // prevent propagating event to the map

            e.Handled = true;

        }

All the best,
Andrey Murzov
the Telerik team