Create popups on mouseOver

[vijay]

Hi Team,

I am working with RADMAP and i am binding the nearly 47 states to that map from database now it's working fine and i need to show the tooltip for each state when we enter ot over a mouse there(on each state).

in the tooltip i want to show the state count and some infirmation coming from database.

can you people suggest me what way have to be approach to achieve this with best performance.

I hope will get the replay soon


Thank in advance
-Vijay Kommalapati 

[Andrey]

Hello Vijay,

You can use ExtendedData property of the map shape objects to store information coming from the database. Then you can use it in the tooltip data template. For example:

<UserControl x:Class="TestMapShapes.Views.CodePolygonView"
     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>
        <ResourceDictionary>
            <telerik:ExtendedDataConverter x:Key="ExtendedDataConverter" />

            <DataTemplate x:Key="TooltipTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Column="0" Grid.Row="0" Text="Name:" />
                    <TextBlock Grid.Column="1" Grid.Row="0"
                       Text="{Binding Converter={StaticResource ExtendedDataConverter}, ConverterParameter='Name'}" />

                    <TextBlock Grid.Column="0" Grid.Row="1" Text="Area:" />
                    <TextBlock Grid.Column="1" Grid.Row="1"
                       Text="{Binding Converter={StaticResource ExtendedDataConverter}, ConverterParameter='Area'}" />
                </Grid>
            </DataTemplate>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadMap Name="radMap"
                        ZoomLevel="7"
                        Center="36.5,-121.5">
            <telerik:RadMap.Provider>
                <telerik:OpenStreetMapProvider />
            </telerik:RadMap.Provider>
            <telerik:InformationLayer Name="informationLayer" />
        </telerik:RadMap>
    </Grid>
</UserControl>

this.polygon = new MapPolygon()
{
    Fill = new SolidColorBrush(Colors.Yellow),
    Stroke = new SolidColorBrush(Colors.Red),
    StrokeThickness = 2,
    Points = points
};

// The extended property set can be common for all polygons.
ExtendedPropertySet set = new ExtendedPropertySet();
set.RegisterProperty("Name", "Name", typeof(string), "Polygon");
set.RegisterProperty("Area", "Area", typeof(double), 0d);

// Extended data is specific for every map shape.
// Fill extended data values from the database.
ExtendedData data = new ExtendedData(set);
data.SetValue("Name", "Polygon 1");
data.SetValue("Area", 2d);

// Assign extended data to the shape.
this.polygon.ExtendedData = data;

// Setup tooltip for shape.
ToolTip toolTip = new ToolTip();
toolTip.Content = this.polygon.ExtendedData;
toolTip.ContentTemplate = this.Resources["TooltipTemplate"] as DataTemplate;
ToolTipService.SetToolTip(this.polygon, toolTip);

this.informationLayer.Items.Add(this.polygon);

Regards,
Andrey Murzov 
the Telerik team

[vijay]

Can you Please provide one sample solution for this with source code having the tooltip.
I was unable to reach this exactly.

I was unable to get the following property from current telerik map version.

<telerik:ExtendedDataConverter x:Key="ExtendedDataConverter" />

Thanks
Vijay Kommalapati

[Andrey]

Hello Vijay,

Please, find attached a sample solution. Check that you've referenced all necessary Telerik assemblies from your Silverlight project.

Greetings,
Andrey Murzov
the Telerik team