Distance and Scale

The RadMap uses two measure units for distance: mile and kilometer. The measure units are need for the placement of the MapShapes, as their width and height are measured in the selected unit. To choose the most suitable unit you have to set the DistanceUnit property of the RadMap.

The default DistanceUnit is Kilometer.

Example 1: Set Mile Distance Unit

<dataVisualization:RadMap DistanceUnit="Mile" /> 

The DistanceUnit also affects the Scale control displayed at the lower right corner of the RadMap. If you want to hide it, you just have to set the ScaleVisibility property to Collapsed.

Example 2

<dataVisualization:RadMap ScaleVisibility="Collapsed" /> 

The UI control is represented by the MapScale 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 one by using the ScaleVisibility property of the RadMap or the UseDefaultLayout one.

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 MapScale outside the RadMap you have to set its MapControl property to the respective RadMap instance. Additionally you can modify its appearance.

Here is an example:

When using an outside MapScale control, it's the value of the DistanceUnit property of this control that will be counted, not the one of the RadMap's DistanceUnit property.

Example 3

<Grid> 
    <dataVisualization:RadMap x:Name="map"> 
        <dataVisualization:RadMap.Provider> 
            <telerikMap:OpenStreetMapProvider APIKey="Your API Key" StandardModeUserAgent="Your User Agent"/> 
        </dataVisualization:RadMap.Provider> 
        <telerikMap:VisualizationLayer x:Name="visualizationLayer"> 
            <telerikMap:VisualizationLayer.ShapeFill> 
                <telerikMap:MapShapeFill Fill="Red" Stroke="Blue" StrokeThickness="2" /> 
            </telerikMap:VisualizationLayer.ShapeFill> 
        </telerikMap:VisualizationLayer> 
    </dataVisualization:RadMap> 
    <telerikMap:MapScale MapControl="{Binding ElementName=map}" 
                        ScaleLabelBackground="Orange"  
                        ScaleLabelBorderBrush="DarkRed" 
                        BorderBrush="DarkRed" 
                        Background="Orange" 
                        Foreground="DarkRed" 
                        HorizontalAlignment="Left" 
                        VerticalAlignment="Bottom" 
                        Margin="10" 
                        DistanceUnit="Kilometer" /> 
</Grid> 

Here is a snapshot of the result:

See Also

• Navigation
• Click Modes
• Zoom Modes
• Mouse Location
• Default Layout