<UserControl x:Class="SalesFusionSL.Views.WebMapActivity"
mc:Ignorable="d" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:Local="clr-namespace:SalesFusionSL.mapCollection" d:DesignHeight="300" d:DesignWidth="400"> <Grid x:Name="LayoutRoot"> <Grid.Resources> <Local:WayPointCollection x:Key="WayPoints" IsDataSource="True"/> <Local:POICollection x:Key="PointsOfInterest" IsDataSource="True"/> <DataTemplate x:Key="LeftWayPointTemplate"> <Border> <telerik:MapLayer.HotSpot> <telerik:HotSpot X="0.5" Y="1.0" ElementName="Pin" /> </telerik:MapLayer.HotSpot> <Canvas x:Name="Pin" Height="32" Width="20"> <Path Fill="Yellow" Height="32.005" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="Black" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="20.01" Data="M1054.5088,458.105L1065.5188,458.105C1067.7278, 458.105,1069.5188,459.896,1069.5188,462.105L1069.5188,473.084C1069.5188,475.293,1067.7278,477.084,1065.5188,477.084C1065.5188,477.084, 1062.6868,476.831,1062.2128,479.103C1061.6608,481.751,1060.2208,489.11,1060.2208,489.11L1059.3548,489.11C1059.3548,489.11,1058.0138, 482.546,1057.2888,479.106C1056.8538,477.041,1054.5088,477.084,1054.5088,477.084C1052.2998,477.084,1050.5088,475.293,1050.5088,473.084L1050.5088, 462.105C1050.5088,459.896,1052.2998,458.105,1054.5088,458.105z" /> <Path Canvas.Top="2.989" Canvas.Left="3.188" Data="M1066.6162,472.8125C1066.6212,473.9125,1065.7252,474.8125,1064.6252,474.8125L1055.2502, 474.8125C1054.1502,474.8125,1053.2462,473.9125,1053.2412,472.8125L1053.1962,462.5935C1053.1912,461.4935,1054.0872,460.5935,1055.1872, 460.5935L1064.5622,460.5935C1065.6622,460.5935,1066.5662,461.4935,1066.5712,462.5935z" Fill="Black" Height="14.219" Stretch="Fill" Width="13.42"/> </Canvas> </Border> </DataTemplate> <DataTemplate x:Key="CenterWayPointTemplate"> <Border> <telerik:MapLayer.HotSpot> <telerik:HotSpot X="0.5" Y="1.0" ElementName="Pin" /> </telerik:MapLayer.HotSpot> <Canvas x:Name="Pin" Height="32" Width="20"> <Path Fill="White" Height="32.005" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="Black" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="20.01" Data="M1054.5088,458.105L1065.5188,458.105C1067.7278,458.105,1069.5188,459.896,1069.5188,462.105L1069.5188,473.084C1069.5188,475.293,1067.7278,477.084,1065.5188,477.084C1065.5188,477.084,1062.6868,476.831,1062.2128,479.103C1061.6608,481.751,1060.2208,489.11,1060.2208,489.11L1059.3548,489.11C1059.3548,489.11,1058.0138,482.546,1057.2888,479.106C1056.8538,477.041,1054.5088,477.084,1054.5088,477.084C1052.2998,477.084,1050.5088,475.293,1050.5088,473.084L1050.5088,462.105C1050.5088,459.896,1052.2998,458.105,1054.5088,458.105z" /> <Path Canvas.Top="2.989" Canvas.Left="3.188" Data="M1066.6162,472.8125C1066.6212,473.9125,1065.7252,474.8125,1064.6252,474.8125L1055.2502,474.8125C1054.1502,474.8125,1053.2462,473.9125,1053.2412,472.8125L1053.1962,462.5935C1053.1912,461.4935,1054.0872,460.5935,1055.1872,460.5935L1064.5622,460.5935C1065.6622,460.5935,1066.5662,461.4935,1066.5712,462.5935z" Fill="Black" Height="14.219" Stretch="Fill" Width="13.42"/> </Canvas> </Border> </DataTemplate> <DataTemplate x:Key="DetailWayPointTemplate"> <Border Background="#7FFFFFFF" BorderBrush="Yellow" BorderThickness="2" HorizontalAlignment="Center" VerticalAlignment="Top"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="Location" HorizontalAlignment="Center" /> <TextBlock Grid.Row="1" Text="{Binding Path=Latitude}" HorizontalAlignment="Center" /> <TextBlock Grid.Row="2" Text="{Binding Path=Longitude}" HorizontalAlignment="Center" /> </Grid> </Border> </DataTemplate> <DataTemplate x:Key="RightWayPointTemplate"> <Border> <telerik:MapLayer.HotSpot> <telerik:HotSpot X="0.5" Y="1.0" ElementName="Pin" /> </telerik:MapLayer.HotSpot> <Canvas x:Name="Pin" Height="32" Width="20"> <Path Fill="Red" Height="32.005" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="Black" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="20.01" Data="M1054.5088,458.105L1065.5188, 458.105C1067.7278,458.105,1069.5188,459.896,1069.5188,462.105L1069.5188,473.084C1069.5188,475.293,1067.7278,477.084, 1065.5188,477.084C1065.5188,477.084,1062.6868,476.831,1062.2128,479.103C1061.6608,481.751,1060.2208,489.11,1060.2208, 489.11L1059.3548,489.11C1059.3548,489.11,1058.0138,482.546,1057.2888,479.106C1056.8538,477.041,1054.5088,477.084,1054.5088, 477.084C1052.2998,477.084,1050.5088,475.293,1050.5088,473.084L1050.5088,462.105C1050.5088,459.896,1052.2998,458.105,1054.5088,458.105z" /> <Path Canvas.Top="2.989" Canvas.Left="3.188" Data="M1066.6162,472.8125C1066.6212,473.9125,1065.7252,474.8125,1064.6252,474.8125L1055.2502, 474.8125C1054.1502,474.8125,1053.2462,473.9125,1053.2412,472.8125L1053.1962,462.5935C1053.1912,461.4935,1054.0872,460.5935,1055.1872, 460.5935L1064.5622,460.5935C1065.6622,460.5935,1066.5662,461.4935,1066.5712,462.5935z" Fill="Black" Height="14.219" Stretch="Fill" Width="13.42"/> </Canvas> </Border> </DataTemplate> <DataTemplate x:Key="PointOfInterestTemplate"> <Grid x:Name="ParentRoot" Width="50" Height="90" HorizontalAlignment="Center" VerticalAlignment="Top"> <Path Width="{Binding Width,ElementName=ParentRoot}" Height="{Binding Height,ElementName=ParentRoot}" Data="M978.6509,491.334L958.6109,491.334L954.4549,500.874L949.9999,491.334L930.6259,491.334C928.4169, 491.334,926.6259,489.543,926.6259,487.334L926.6259,433.272C926.6259,431.063,928.4169,429.272,930.6259, 429.272L978.6509,429.272C980.8599,429.272,982.6509,431.063,982.6509,433.272L982.6509,487.334C982.6509, 489.543,980.8599,491.334,978.6509,491.334z" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Fill="#CC000000"/> <Grid Width="40" HorizontalAlignment="Center" Margin="0,5,0,0"> <Grid.RowDefinitions> <RowDefinition Height="20" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <!-- Title --> <Border Background="#88888888" Grid.ColumnSpan="2"> <TextBlock Foreground="White" HorizontalAlignment="Center" FontSize="12" Text="{Binding Path=Title}"/> </Border> <!-- Description --> <Border Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Left"> <TextBlock Foreground="White" Width="40" FontSize="10" TextWrapping="Wrap" Text="{Binding Path=Description}" /> </Border> </Grid> </Grid> </DataTemplate> <DataTemplate x:Key="ResizableTemplate"> <Grid x:Name="ParentRoot" Background="Transparent" telerik:MapLayer.Location="{Binding Path=Location}" telerik:MapLayer.ZoomRange="{Binding Path=ZoomRange}" telerik:MapLayer.BaseZoomLevel="{Binding Path=BaseZoomLevel}"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Path Width="{Binding Width,ElementName=ParentRoot}" Height="{Binding Height,ElementName=ParentRoot}" Stretch ="Uniform" Stroke="#AA000000" Data="M743.9844,447.2578L746.0244,447.2578L746.0024,437.9038L756.6344,447.2578L862.0094,447.2578C864.2184,447.2578,866.0094, 449.0488,866.0094,451.2578L866.0094,499.3198C866.0094,501.5288,864.2184,503.3198,862.0094,503.3198L743.9844,503.3198C741.7754,503.3198, 739.9844,501.5288,739.9844,499.3198L739.9844,451.2578C739.9844,449.0488,741.7754,447.2578,743.9844,447.2578z" Fill="#C5FFFFFF" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" /> <Grid Margin="25"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <!--<RowDefinition Height="Auto" />--> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="Location" HorizontalAlignment="Center" /> <TextBlock Grid.Row="1" Text="{Binding Path=Location.Latitude}" HorizontalAlignment="Center" /> <TextBlock Grid.Row="2" Text="{Binding Path=Location.Longitude}" HorizontalAlignment="Center" /> <!--<TextBlock Grid.Row="3" Text="{Binding Path=Description}" HorizontalAlignment="Center" />--> </Grid> </Grid> </DataTemplate> </Grid.Resources> <telerik:RadMap x:Name="RadMap1" Center="19.058092,-14.54148" MapMouseClick="RadMap1_MapMouseClick" ZoomLevel="3" InitializeCompleted="RadMap1_InitializeCompleted" > <telerik:RadMap.Providers> <telerik:OpenStreetMapProvider /> <!--<telerik:BingMapTrafficProvider />--> </telerik:RadMap.Providers> <telerik:InformationLayer x:Name="InformationLayer1" AllowDataTemplateForZoomLevel="True" Visibility="Collapsed" ItemsSource="{StaticResource WayPoints}" /> <telerik:InformationLayer x:Name="InformationLayer2" Visibility="Collapsed" ItemsSource="{StaticResource PointsOfInterest}" ItemTemplate="{StaticResource PointOfInterestTemplate}" /> <telerik:InformationLayer x:Name="InformationLayer3" Visibility="Collapsed" ItemTemplate="{StaticResource ResizableTemplate}" /> </telerik:RadMap> </Grid> </UserControl> public class WayPointCollection : LocationCollection { public WayPointCollection() { } public bool IsDataSource { get { return true; } set { if (value) { this.Load(); } } } /// <summary> /// Load way points from the resource. /// </summary> public void Load() { Location location = new Location(-25.714876, 28.325076); location.Description = "Pretoria, South Africa"; this.Add(location); Location location2 = new Location(48.139126, 11.580186); location2.Description = "Munich, Germany"; this.Add(location2); Location location3 = new Location(29.763284,-95.363272); location3.Description = "Houston, Texas"; this.Add(location3); } }I have Developed one example for map control of data binding from here only but i really don't know how to set tooltip on location indicator icon?
I have attached my code here, in that red & yellow indicators is representing the city location, now i want to display the tooltip of city name on it.
Please help to solve this problem.
Thanks
Shrikant
1 Answer, 1 is accepted
0
Accepted
Hi Shrikant,
You can use binding in a data template for the property you will display as the tooltip. The sample code is below.
Greetings,
Andrey Murzov
the Telerik team
You can use binding in a data template for the property you will display as the tooltip. The sample code is below.
<DataTemplate x:Key="RightWayPointTemplate"> <Border ToolTipService.ToolTip="{Binding Description}"> <telerik:MapLayer.HotSpot> <telerik:HotSpot X="0.5" Y="1.0" ElementName="Pin" /> </telerik:MapLayer.HotSpot> <Canvas x:Name="Pin" Height="32" Width="20"> <Path Fill="Red" Height="32.005" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="Black" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="20.01" Data="M1054.5088,458.105L1065.5188, 458.105C1067.7278,458.105,1069.5188,459.896,1069.5188,462.105L1069.5188,473.084C1069.5188,475.293,1067.7278,477.084, 1065.5188,477.084C1065.5188,477.084,1062.6868,476.831,1062.2128,479.103C1061.6608,481.751,1060.2208,489.11,1060.2208, 489.11L1059.3548,489.11C1059.3548,489.11,1058.0138,482.546,1057.2888,479.106C1056.8538,477.041,1054.5088,477.084,1054.5088, 477.084C1052.2998,477.084,1050.5088,475.293,1050.5088,473.084L1050.5088,462.105C1050.5088,459.896,1052.2998,458.105,1054.5088,458.105z" /> <Path Canvas.Top="2.989" Canvas.Left="3.188" Data="M1066.6162,472.8125C1066.6212,473.9125,1065.7252,474.8125,1064.6252,474.8125L1055.2502, 474.8125C1054.1502,474.8125,1053.2462,473.9125,1053.2412,472.8125L1053.1962,462.5935C1053.1912,461.4935,1054.0872,460.5935,1055.1872, 460.5935L1064.5622,460.5935C1065.6622,460.5935,1066.5662,461.4935,1066.5712,462.5935z" Fill="Black" Height="14.219" Stretch="Fill" Width="13.42"/> </Canvas> </Border> </DataTemplate> Greetings,
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!