RadMap with custom MapCommandBar and MapZoomBar position

5 posts, 1 answers
  1. Michael
    Michael avatar
    35 posts
    Member since:
    Jan 2012

    Posted 06 Dec 2012 Link to this post

    Hello,

    i have a problem with the custom position of MapCommandBar and MapZoomBar of the RadMap control.

    I've attached a few pictures that shows my problem.

    Do you know what Im doing wrong.
    The origin MapZoomBar item works.

    PS: I create a sample project and there it works fine.

    best
    mike
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 07 Dec 2012 Link to this post

    Hello Michael,

    I've created a sample solution using the following approach from our online help:
    http://www.telerik.com/help/silverlight/radmap-features-view-modes.html
    http://www.telerik.com/help/silverlight/radmap-features-zoom-modes.html

    Unfortunately we can't reproduce the problems without your code. Could you, please, provide us with a small sample solution which reproduces it?

    Regards,
    Andrey Murzov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Michael
    Michael avatar
    35 posts
    Member since:
    Jan 2012

    Posted 07 Dec 2012 Link to this post

    Hello Andrey,

    you can reproduce the problem doing following:

    MainPage.xaml
    <UserControl x:Class="RadMapBug_CustomZoomBar.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/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"
                 
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                 
        d:DesignHeight="300" d:DesignWidth="400">
     
        <Grid x:Name="LayoutRoot" Background="White">
            <!--<telerik:RadMap x:Name="radMap" />-->
     
            <telerik:RadDataForm >
                <telerik:RadDataForm.ReadOnlyTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
     
                            <telerik:RadMap x:Name="xMap"
                                  ScaleVisibility="Collapsed"
                                  MouseLocationIndicatorVisibility="Collapsed"
                                  CommandBarVisibility="Collapsed"
                                  ZoomBarVisibility="Collapsed"
                                  NavigationVisibility="Collapsed"
                                  ZoomLevel="18" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2"
                                  Width="800" Height="600">
                                <telerik:InformationLayer Name="xInformationLayer" >
                                    <telerik:InformationLayer.ItemTemplate>
                                        <DataTemplate>
                                            <Border Background="Transparent">
                                                <ToolTipService.ToolTip>
                                                    <ToolTip>
                                                        <ToolTip.Content>
                                                            <Grid>
                                                                <StackPanel Orientation="Vertical">
                                                                    <StackPanel Orientation="Horizontal">
                                                                        <TextBlock Text="Latitude=" />
                                                                        <TextBlock Text="{Binding Path=Latitude}" />
                                                                    </StackPanel>
                                                                    <StackPanel Orientation="Horizontal">
                                                                        <TextBlock Text="Longitude=" />
                                                                        <TextBlock Text="{Binding Path=Longitude}" />
                                                                    </StackPanel>
                                                                </StackPanel>
                                                            </Grid>
                                                        </ToolTip.Content>
                                                    </ToolTip>
                                                </ToolTipService.ToolTip>
                                                <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 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" Fill="White" Height="32.005" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="Red" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="20.01"/>
                                                    <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="Red" Height="14.219" Stretch="Fill" Width="13.42"/>
                                                </Canvas>
                                            </Border>
                                        </DataTemplate>
                                    </telerik:InformationLayer.ItemTemplate>
                                </telerik:InformationLayer>
                            </telerik:RadMap>
     
                            <telerik:MapMouseLocationIndicator MapControl="{Binding ElementName=xMap}" Foreground="Black"
                                                     Grid.Row="0" Grid.Column="0" Width="250" Margin="2,2,0,0"
                                                     VerticalAlignment="Top" HorizontalAlignment="Left"/>
     
                            <telerik:MapScale MapControl="{Binding ElementName=xMap}"
                                    VerticalAlignment="Bottom" HorizontalAlignment="Right"
                                    DistanceUnit="Kilometer" Margin="0,0,40,2"
                                    Grid.Row="1" Grid.Column="1"/>
     
                            <telerik:MapCommandBar MapControl="{Binding ElementName=xMap}"
                                         AllowedCommands="Road,Aerial,Birdseye"
                                         Grid.Row="1" Grid.Column="1" Margin="0"
                                         VerticalAlignment="Bottom" HorizontalAlignment="Right" />
     
                            <telerik:MapZoomBar MapControl="{Binding ElementName=xMap}"
                                      Grid.Row="1" Grid.Column="0" Margin="0"
                                      VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
     
                            <Button VerticalAlignment="Top" HorizontalAlignment="Right" Width="150" Height="25" 
                          Content="Toggle Full Screen" Click="ToggleFullScreen" 
                          Grid.Row="2" />
                        </Grid>
                    </DataTemplate>
                </telerik:RadDataForm.ReadOnlyTemplate>
            
                <telerik:RadDataForm.EditTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
     
                            <telerik:RadMap x:Name="xMap"
                                  ScaleVisibility="Collapsed"
                                  MouseLocationIndicatorVisibility="Collapsed"
                                  CommandBarVisibility="Collapsed"
                                  ZoomBarVisibility="Collapsed"
                                  NavigationVisibility="Collapsed"
                                  ZoomLevel="18" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2"
                                  Width="800" Height="600"
                                            Loaded="xMap_Loaded">
                                <telerik:InformationLayer Name="xInformationLayer" Loaded="xInformationLayer_Loaded">
                                    <telerik:InformationLayer.ItemTemplate>
                                        <DataTemplate>
                                            <Border Background="Transparent">
                                                <ToolTipService.ToolTip>
                                                    <ToolTip>
                                                        <ToolTip.Content>
                                                            <Grid>
                                                                <StackPanel Orientation="Vertical">
                                                                    <StackPanel Orientation="Horizontal">
                                                                        <TextBlock Text="Latitude=" />
                                                                        <TextBlock Text="{Binding Path=Latitude}" />
                                                                    </StackPanel>
                                                                    <StackPanel Orientation="Horizontal">
                                                                        <TextBlock Text="Longitude=" />
                                                                        <TextBlock Text="{Binding Path=Longitude}" />
                                                                    </StackPanel>
                                                                </StackPanel>
                                                            </Grid>
                                                        </ToolTip.Content>
                                                    </ToolTip>
                                                </ToolTipService.ToolTip>
                                                <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 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" Fill="White" Height="32.005" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="Red" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Width="20.01"/>
                                                    <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="Red" Height="14.219" Stretch="Fill" Width="13.42"/>
                                                </Canvas>
                                            </Border>
                                        </DataTemplate>
                                    </telerik:InformationLayer.ItemTemplate>
                                </telerik:InformationLayer>
                            </telerik:RadMap>
     
                            <telerik:MapMouseLocationIndicator MapControl="{Binding ElementName=xMap}" Foreground="Black"
                                                     Grid.Row="0" Grid.Column="0" Width="250" Margin="2,2,0,0"
                                                     VerticalAlignment="Top" HorizontalAlignment="Left"/>
     
                            <telerik:MapScale MapControl="{Binding ElementName=xMap}"
                                    VerticalAlignment="Bottom" HorizontalAlignment="Right"
                                    DistanceUnit="Kilometer" Margin="0,0,40,2"
                                    Grid.Row="1" Grid.Column="1"/>
     
                            <telerik:MapCommandBar MapControl="{Binding ElementName=xMap}"
                                         AllowedCommands="Road,Aerial,Birdseye"
                                         Grid.Row="1" Grid.Column="1" Margin="0"
                                         VerticalAlignment="Bottom" HorizontalAlignment="Right" />
     
                            <telerik:MapZoomBar MapControl="{Binding ElementName=xMap}"
                                      Grid.Row="1" Grid.Column="0" Margin="0"
                                      VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
     
                            <Button VerticalAlignment="Top" HorizontalAlignment="Right" Width="150" Height="25" 
                          Content="Toggle Full Screen" Click="ToggleFullScreen" 
                          Grid.Row="2" />
                        </Grid>
                    </DataTemplate>
                </telerik:RadDataForm.EditTemplate>
            </telerik:RadDataForm >
        </Grid>
    </UserControl>
    


    MainPage.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
     
    using Telerik.Windows.Controls.Map;
    using Telerik.Windows.Controls;
     
    namespace RadMapBug_CustomZoomBar
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
            }
     
            private RadMap _Map = null;
            private InformationLayer _InformationLayer = null;
            private Location _Loc = new Location(48.30811152463302, 14.315182979910142);
     
            private void MapMouseClick(object sender, MapMouseRoutedEventArgs eventArgs)
            {
                this._InformationLayer.Items.Clear();
                this._InformationLayer.Items.Add(eventArgs.Location);
            }
     
     
            private void ToggleFullScreen(object sender, RoutedEventArgs e)
            {
                Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;
            }
     
            private void xMap_Loaded(object sender, RoutedEventArgs e)
            {
                this._Map = sender as RadMap;
     
                this._Map.Provider = new BingMapProvider(MapMode.Aerial, true"AtDk4MimUYFV3HOu_OrjYIAtvcL4leb3sZvuuBnZKQJSHQUqxxtfUcuzX8HSWqfK");
                this._Map.Center = this._Loc;
            }
     
            private void xInformationLayer_Loaded(object sender, RoutedEventArgs e)
            {
                this._InformationLayer = sender as InformationLayer;
                this._InformationLayer.Items.Add(this._Loc);
            }
     
     
     
        }
    }
    


    I hope this helps you to fix the problem.

    Best
    Mike

  5. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 12 Dec 2012 Link to this post

    Hi Michael,

    When you use custom MapCommandBar and custom MapZoomBar within a template then you should specify the MapControl property of them after they are loaded and after assigning the map provider. So, you can use the same RadMap.Loaded event handler for specifying the MapControl property of MapCommandBar and MapZoomBar.
    The sample code is below.
    <DataTemplate>
        <Grid>
            <telerik:RadMap x:Name="xMap" Loaded="xMap_Loaded" ...>
    ...
            </telerik:RadMap>
            <telerik:MapCommandBar x:Name="commandBar"  ... />
            <telerik:MapZoomBar x:Name="zoomBar" ... />
    ...
        </Grid>
    </DataTemplate>

    private void xMap_Loaded(object sender, RoutedEventArgs e)
    {
        this._Map = sender as RadMap;
     
        this._Map.Provider = new BingMapProvider(MapMode.Aerial, true, "xxxx-yyyy-zzzz");
        this._Map.Center = this._Loc;
     
        MapBaseControl control = (this._Map.Parent as FrameworkElement).FindName("zoomBar") as MapBaseControl;
        control.MapControl = this._Map;
     
        control = (this._Map.Parent as FrameworkElement).FindName("commandBar") as MapBaseControl;
        control.MapControl = this._Map;
    }

    Regards,
    Andrey Murzov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Michael
    Michael avatar
    35 posts
    Member since:
    Jan 2012

    Posted 12 Dec 2012 Link to this post

    Hi Andrey,

    thx for your reply ... that do it for me!

    To complete: The binding in Xaml on the MapControl property must be removed.

    best
    Mike
Back to Top
DevCraft banner