How to show multiple information layer in rad map

[Asiq Raja]

Hi ,,

    I have situation to show two kind of details at same time in the rad map, so first i have used the information layer and bind the images,  but now i need to show another image to, but which is retrieve from database , so i don't how to do tat in same information layer.

is it possible to bind two different values at the same time, in a single information layer.

Or is there any other way to do this?

Note :  i want to show  Meter images as well as gateway details to, can any one help to find this,,

OR rad map ll support multiple information layers, in a single rad map.

Thanks & Regards
   M.Asiq Raja

[Andrey]

Hello Asiq Raja,

You definitely can use multiple information layers in the RadMap. But in your case it is probably better to use ItemTemplateSelector on the information layer. Similar to the other items controls the InformationLayer allows you set ItemTemplateSelector which will be used to select item template depends on the some conditions. For example, if you have data items of 2 types in the InformationLayer then you can create template selector which returns template depends on the data item type:

public class ItemTemplateSelector : DataTemplateSelector
{
    public override System.Windows.DataTemplate SelectTemplate(
        object item,
        System.Windows.DependencyObject container)
    {
        if (item is DataItem1)
        {
            return this.DataTemplate1;
        }
        else if (item is DataItem2)
        {
            return this.DataTemplate2;
        }
        return null;
    }

    public DataTemplate DataTemplate1
    {
        get;
        set;
    }

    public DataTemplate DataTemplate2
    {
        get;
        set;
    }
}

public MainWindow()
{
    InitializeComponent();

    ItemTemplateSelector selector = new ItemTemplateSelector()
    {
        DataTemplate1 = this.Resources["DataTemplate1"] as DataTemplate,
        DataTemplate2 = this.Resources["DataTemplate1"] as DataTemplate
    };
    this.informationLayer.ItemTemplateSelector = selector;
}

<UserControl.Resources>
    <DataTemplate x:Key="DataTemplate1">
        <Grid telerik:MapLayer.Location="{Binding Location}"
              telerik:MapLayer.HotSpot="0.5,0.5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="16" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="16" />
            </Grid.RowDefinitions>
            <Path Fill="Green" Stretch="Fill">
                <Path.Data>
                    <GeometryGroup>
                        <EllipseGeometry RadiusX="4" RadiusY="4" />
                        <EllipseGeometry RadiusX="8" RadiusY="8" />
                    </GeometryGroup>
                </Path.Data>
            </Path>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="DataTemplate2">
        <Grid telerik:MapLayer.Location="{Binding Location}"
              telerik:MapLayer.HotSpot="0.5,0.5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="16" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="16" />
            </Grid.RowDefinitions>
            <Path Fill="Red" Stretch="Fill">
                <Path.Data>
                    <GeometryGroup>
                        <EllipseGeometry RadiusX="4" RadiusY="4" />
                        <EllipseGeometry RadiusX="8" RadiusY="8" />
                    </GeometryGroup>
                </Path.Data>
            </Path>
        </Grid>
    </DataTemplate>
</UserControl.Resources>

I hope this information helps.

All the best,
Andrey Murzov
the Telerik team

[FieldTRAKS]

Can you refine this example to show how to do this if you were binding polygon and polyline data not just point data? There are absolutely no examples of how do this.

[Andrey]

Hi Matt Fraser,

Here it is an example of using MapPolygon and MapPolyline in data template:

public class MapShapeItem
{
    public MapShapeItem()
    {
        this.Points = new LocationCollection();
    }

    public LocationCollection Points
    {
        get;
        private set;
    }
}

<UserControl x:Class="UsingMapShapesInDataTemplate.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:telerik="http://schemas.telerik.com/2008/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"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>
        <DataTemplate x:Key="MapPolygonDataTemplate">
            <telerik:MapPolygon Fill="#7FFF00FF"
                Points="{Binding Points}" />
        </DataTemplate>

        <DataTemplate x:Key="MapPolylineDataTemplate">
            <telerik:MapPolyline Stroke="Red"
                 StrokeThickness="2"
                 Points="{Binding Points}" />
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadMap x:Name="radMap"
            ZoomLevel="8"
            Center="49,0">
            <telerik:RadMap.Provider>
                <telerik:OpenStreetMapProvider />
            </telerik:RadMap.Provider>
            <telerik:InformationLayer x:Name="informationLayer"
                      ItemTemplate="{StaticResource MapPolygonDataTemplate}" />
            <telerik:InformationLayer x:Name="informationLayer1"
                      ItemTemplate="{StaticResource MapPolylineDataTemplate}" />
        </telerik:RadMap>
    </Grid>
</UserControl>

public partial class MainPage : UserControl
{
    private ObservableCollection<MapShapeItem> collection = new ObservableCollection<MapShapeItem>();

    public MainPage()
    {
        InitializeComponent();

        MapShapeItem item = new MapShapeItem();
        item.Points.Add(new Location(51, 0));
        item.Points.Add(new Location(51, 2));
        item.Points.Add(new Location(49, 2));
        item.Points.Add(new Location(49, 0));
        this.collection.Add(item);

        item = new MapShapeItem();
        item.Points.Add(new Location(48, 0));
        item.Points.Add(new Location(48, 2));
        item.Points.Add(new Location(46, 2));
        item.Points.Add(new Location(46, 0));
        this.collection.Add(item);

        this.informationLayer.ItemsSource = collection;
        this.informationLayer1.ItemsSource = collection;
    }
}

Kind regards,
Andrey Murzov
the Telerik team