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
<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
<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
<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
<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
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
<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
<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
<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
