How to show multiple information layer in rad map

4 posts, 0 answers
  1. Asiq Raja
    Asiq Raja avatar
    30 posts
    Member since:
    Jul 2010

    Posted 09 Feb 2011 Link to this post

    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
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 11 Feb 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
  4. FieldTRAKS
    FieldTRAKS avatar
    25 posts
    Member since:
    Apr 2009

    Posted 01 Apr 2011 Link to this post

    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.
  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 06 Apr 2011 Link to this post

    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: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"
                 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top