RadMap with custom MapCommandBar and MapZoomBar position

[Michael]

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

[Andrey]

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

[Michael]

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

[Andrey]

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

[Michael]

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