Skip to content

Latest commit

 

History

History
130 lines (116 loc) · 5.75 KB

howto-custom-zoom-levels.md

File metadata and controls

130 lines (116 loc) · 5.75 KB
title page_title description slug tags published position
Implement custom zoom levels for MapZoomBar UI
Implement custom zoom levels for MapZoomBar UI
Check our "Implement custom zoom levels for MapZoomBar UI" documentation article for the RadMap {{ site.framework_name }} control.
radmap-howto-custom-zoom-levels
implement,custom,zoom,levels,for,mapzoombar,ui
true
2

Implement custom zoom levels for MapZoomBar UI

It is now possible to customize the default preset zoom levels in the MapZoomBar UI for every map provider.

Customization of the zoom levels in the MapZoomBar

You can add custom zoom level through the MapZoomBar.RegisterSetZoomLevelCommand(zoomLevel, commandText, dataTemplate, imageUri):

  • zoomLevel - Specifies the zoom level to set.

  • commandText - Specifies the command label in the UI (you need to bind it in the DataTemplate as demonstrated below).

  • dataTemplate - Specifies the data template for command presentation in the UI.

  • imageUri - Uniform resource identifier (URI) of the image that is used in the map source button data template (you need to bind it in the DataTemplate as demonstrated below).

Here is a sample code snippet that demonstrates zoom level customization:

XAML

{{region radmap-howto-custom-zoom-levels_0}} <Grid.Resources> <telerik:RadButton Command="{Binding Path=Command}" CommandParameter="{Binding CommandParameter}" HorizontalContentAlignment="Stretch" Height="26" Margin="0,3" CornerRadius="3" Opacity="0.8" BorderBrush="#FF848484"> telerik:RadButton.Background </telerik:RadButton.Background> <Grid.ColumnDefinitions> </Grid.ColumnDefinitions> <Image.Source> </Image.Source> </telerik:RadButton> </Grid.Resources> <telerik:RadMap x:Name="RadMap1" ZoomLevel="15" MinZoomLevel="15" GeoBounds="42.3683598045287, -71.0789727419614, 3.9167707221002743, 2.1883037274811104"> </telerik:RadMap> {{endregion}}

C#

{{region radmap-howto-custom-zoom-levels_1}} private const string ImagePathFormat = "/Map;component/Silverlight/CustomCommands/Images/{0}.png"; private string VEKey; private BingRestMapProvider provider; public MainPage() { this.provider = new BingRestMapProvider(MapMode.Aerial, true, this.VEKey); this.RadMap1.Provider = provider; this.RadMap1.InitializeCompleted += new EventHandler(RadMap1_InitializeCompleted); }

private void RadMap1_InitializeCompleted(object sender, EventArgs e)
{
    // remove the default zoom levels
    RadMap1.MapZoomBar.Commands.Clear();
    this.AddCustomZoomAction(15, "Downtown");
    this.AddCustomZoomAction(18, "Neighborhood");
    this.AddCustomZoomAction(20, "Block");
}
private void AddCustomZoomAction(int zoomLevel, string label)
{
    string imagePath = string.Format(ImagePathFormat, label);
    this.RadMap1.MapZoomBar.RegisterSetZoomLevelCommand(zoomLevel,
        label,
        this.LayoutRoot.Resources["CustomCommandDataTemplate"] as DataTemplate,
        new Uri(imagePath, UriKind.RelativeOrAbsolute));
}

{{endregion}}

VB.NET

{{region radmap-howto-custom-zoom-levels_2}} Private Const ImagePathFormat As String = "/Map;component/Silverlight/CustomCommands/Images/{0}.png" Private VEKey As String Private provider As BingRestMapProvider Public Sub New() Me.provider = New BingRestMapProvider(MapMode.Aerial, True, Me.VEKey) Me.RadMap1.Provider = provider Me.RadMap1.InitializeCompleted += New EventHandler(RadMap1_InitializeCompleted) End Sub

Private Sub RadMap1_InitializeCompleted(sender As Object, e As EventArgs)
 ' remove the default zoom levels '
 RadMap1.MapZoomBar.Commands.Clear()
 Me.AddCustomZoomAction(15, "Downtown")
 Me.AddCustomZoomAction(18, "Neighborhood")
 Me.AddCustomZoomAction(20, "Block")
End Sub
Private Sub AddCustomZoomAction(zoomLevel As Integer, label As String)
 Dim imagePath As String = String.Format(ImagePathFormat, label)
 Me.RadMap1.MapZoomBar.RegisterSetZoomLevelCommand(zoomLevel, label, TryCast(Me.LayoutRoot.Resources("CustomCommandDataTemplate"), DataTemplate), New Uri(imagePath, UriKind.RelativeOrAbsolute))
End Sub

{{endregion}}