Zooming

The RadMap allows the user to zoom in and zoom out the content of the map.

This can be done via the mouse wheel or through the Zoom Bar control in the Commands Bar panel.

ZoomBar Control

By hovering on the button with an icon representing a magnifier, the user is provided with different options to zoom in and zoom out. The main tool is the zoom slider which allows the user to slide between the maximum and minimum zoom level. Together with the slider there are several zoom presets, which represent different ranges from the slider.

Figure 1: The ZoomBar control

Zoom

You can also zoom in and out programmatically by using the Zoom property.

The zoom level determines how much of the world is visible on a map. At low zoom levels, a small set of map tiles covers a large geographical area and vice versa. You can use the Zoom property to set a double value value corresponding to the desired zoom level.

Example 1: Setting Zoom declaratively

• XAML

<dataVisualization:RadMap Zoom="8.2" /> 

ZoomStep

By default, the control will zoom in and out by one level. You can enable smoother zooming by defining a smaller value as the ZoomStep property of the control. This will affect both the zooming initiated by the mouse wheel and the buttons of the zoom slider.

Example 2: Setting ZoomStep

• XAML

<dataVisualization:RadMap ZoomStep="0.2" /> 

MinZoomLevel and MaxZoomLevel

Via the MinZoomLevel and MaxZoomLevel you can limit the zoom level between a certain interval.

Example 3: Setting MinZoomLevel and MaxZoomLevel

• XAML

<dataVisualization:RadMap MinZoomLevel="3" Zoom="6" MaxZoomLevel="13" /> 

MouseWheelMode

The MouseWheelMode property controls the behavior of the mouse wheel. It has three possible values:

• ZoomToPoint: Zooms to the location over the mouse pointer.
• ZoomToCenter: Zooms to the center of the current visible area.
• None: Disables zooming via the mouse wheel.

Example 4: Setting MouseWheelMode

• XAML

<dataVisualization:RadMap MouseWheelMode="None" /> 

Change Default Presets

If you want to modify the default preset labels, you can get ahold of the respective commands of the MapZoomBar and change their Text as demonstrated in Example 5.

Example 5: Changing the default preset labels

• C#
• VB.NET

public MainWindow() 
{ 
    InitializeComponent(); 
    this.RadMap.InitializeCompleted += RadMap_InitializeCompleted; 
} 
 
private void RadMap_InitializeCompleted(object sender, EventArgs e) 
{ 
    this.SetCustomZoomLevelLabel(18, "My Level"); 
} 
 
private void SetCustomZoomLevelLabel(int zoomLevel, string label) 
{ 
    CommandDescription description = (from cmd in this.RadMap.MapZoomBar.Commands 
                                      where (int)cmd.CommandParameter == zoomLevel 
                                      select cmd).FirstOrDefault(); 
    if (description != null) 
    { 
        RoutedUICommand command = description.Command as RoutedUICommand; 
        if (command != null) 
        { 
            command.Text = label; 
        } 
    } 
} 

Public Sub New() 
    InitializeComponent() 
    AddHandler RadMap.InitializeCompleted, AddressOf RadMap_InitializeCompleted 
End Sub 
 
Private Sub RadMap_InitializeCompleted(ByVal sender As Object, ByVal e As EventArgs) 
      Me.SetCustomZoomLevelLabel(18, "My Level") 
End Sub 
 
Private Sub SetCustomZoomLevelLabel(ByVal zoomLevel As Integer, ByVal label As String) 
      Dim description As CommandDescription = ( 
          From cmd In Me.RadMap.MapZoomBar.Commands 
          Where CInt(Fix(cmd.CommandParameter)) = zoomLevel 
          Select cmd).FirstOrDefault() 
      If description IsNot Nothing Then 
            Dim command As RoutedUICommand = TryCast(description.Command, RoutedUICommand) 
            If command IsNot Nothing Then 
                  command.Text = label 
            End If 
      End If 
End Sub 

Figure 2: RadMap with customized presets

Hide Presets

You can hide the panel which holds the zoom presets by setting the ZoomBarPresetsVisibility.

Example 7: Placing the ZoomBar outside of the RadMap

• XAML

<dataVisualization:RadMap ZoomBarPresetsVisibility="Collapsed" /> 

Disable Zooming

To disable the user from zooming, set the ZoomBarVisibility property of the RadMap to Collapsed. Additionally you have to disable the default zooming performed on double click or mouse wheel. To do this, set he MouseDoubleClickMode and MouseWheelMode properties to None.

Example 2: Disabling zooming

• XAML

<dataVisualization:RadMap x:Name="RadMap" 
                ZoomBarVisibility="Collapsed" 
                MouseWheelMode="None" 
                MouseDoubleClickMode="None"> 
</dataVisualization:RadMap> 

ZoomBar outside of RadMap

Note that the UI control is represented by the MapZoomBar control. You are able to use it outside the RadMap and place it somewhere around it. In this case you have to either hide the original zoom bar by using the ZoomBarVisibility property of the RadMap or the UseDefaultLayout one.

The MapZoomBar control is located in the Telerik.UI.Xaml.Controls.DataVisualization.Map namespace so you need to add the appropriate using statement.

Setting the UseDefaultLayout property to False will hide all of the UI controls inside the RadMap. To learn more read here.

In order to use the MapZoomBar outside the RadMap you have to also set its MapControl property to the respective RadMap instance. Here is an example:

Example 3: Placing the ZoomBar outside of the RadMap

• XAML

<Grid Background="Black" xmlns:map="using:Telerik.UI.Xaml.Controls.DataVisualization.Map"> 
    <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto" /> 
        <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 
    <map:MapZoomBar Margin="50" MapControl="{Binding ElementName=RadMap}" /> 
    <dataVisualization:RadMap x:Name="RadMap" Grid.Column="1" ZoomBarVisibility="Collapsed" /> 
</Grid> 

Figure 3: ZoomBar outside of RadMap