Shrink and move US state

2 posts, 0 answers
  1. David Gregory
    David Gregory avatar
    5 posts
    Member since:
    Jun 2012

    Posted 12 Dec 2011 Link to this post

    Hello,

    I'm trying to display a map that has all the USA states. I don't want for the user to have to zoom out to see Alaska and Hawaii. I want to be able to display Alaska and Hawaii down in the bottom left-hand corner (preferably with a box around them) of the display area next to the map of the US.

    I used the shape files from census.gov and converted them to KML files and I'm using the KMLReader.

    The problem is Alaska renders bigger than the US and its in the proper geographic location. How do I move and shrink Alaska and Hawaii in code-behind?

    Thanks.

    Blair

  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 15 Dec 2011 Link to this post

    Hi David Gregory,

    Unfortunately the RadMap does not contain a built-in functionality to do it.
    But I think you can use separate RadMap instances for displaying US map, Alaska and Hawaii. This approach also allows you to use different zoom levels for each one.
    The sample code is below.
    <UserControl x:Class="USAMap.MainPage"
        mc:Ignorable="d"
        d:DesignHeight="500" d:DesignWidth="800"
        Height="500" Width="800">
        <Grid x:Name="LayoutRoot" Background="White">
            <!-- USA map -->
            <telerik:RadMap x:Name="usaMap"
                            Center="35,-100"
                            ZoomLevel="4"
                            UseDefaultLayout="False">
                <telerik:RadMap.Provider>
                    <telerik:EmptyProvider />
                </telerik:RadMap.Provider>
                <telerik:InformationLayer x:Name="usaLayer">
                    <telerik:InformationLayer.Reader>
                        <telerik:MapShapeReader Source="/USAMap;component/USA.kml"/>
                    </telerik:InformationLayer.Reader>
                </telerik:InformationLayer>
            </telerik:RadMap>
            <!-- Alaska map -->
            <telerik:RadMap x:Name="alaskaMap"
                            Width="250" Height="250"
                            VerticalAlignment="Bottom" HorizontalAlignment="Left"
                            Center="64.5,-155"
                            MinZoomLevel="3"
                            MaxZoomLevel="3"
                            ZoomLevel="3"
                            UseDefaultLayout="False"
                            Background="Transparent"
                            BorderBrush="Black"
                            BorderThickness="1">
                <telerik:RadMap.Provider>
                    <telerik:EmptyProvider />
                </telerik:RadMap.Provider>
                <telerik:InformationLayer x:Name="alaskaLayer">
                    <telerik:InformationLayer.Reader>
                        <telerik:MapShapeReader Source="/USAMap;component/Alaska.kml"/>
                    </telerik:InformationLayer.Reader>
                </telerik:InformationLayer>
            </telerik:RadMap>
            <!-- Hawaii map -->
            <telerik:RadMap x:Name="hawaiiMap"
                            Width="100" Height="100"
                            VerticalAlignment="Bottom" HorizontalAlignment="Left"
                            Margin="260,0,0,0"
                            Center="20.2,-157.5"
                            MinZoomLevel="4"
                            MaxZoomLevel="4"
                            ZoomLevel="4"
                            UseDefaultLayout="False"
                            Background="Transparent"
                            BorderBrush="Black"
                            BorderThickness="1">
                <telerik:RadMap.Provider>
                    <telerik:EmptyProvider />
                </telerik:RadMap.Provider>
                <telerik:InformationLayer x:Name="hawaiiLayer">
                    <telerik:InformationLayer.Reader>
                        <telerik:MapShapeReader Source="/USAMap;component/Hawaii.kml"/>
                    </telerik:InformationLayer.Reader>
                </telerik:InformationLayer>
            </telerik:RadMap>
        </Grid>
    </UserControl>

    Best wishes,
    Andrey Murzov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
Back to Top