How To set Tooltip for map control of Binding example?

2 posts, 1 answers
  1. Shrikant
    Shrikant avatar
    38 posts
    Member since:
    Jul 2011

    Posted 21 Jul 2011 Link to this post

    <UserControl x:Class="SalesFusionSL.Views.WebMapActivity"
        mc:Ignorable="d"
                  
        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);
            }
        }
    Hi Telerik Team,
     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
  2. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 25 Jul 2011 Link to this post

    Hi Shrikant,

    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!

  3. DevCraft banner
Back to Top