Radmap bootstrap tabs

[Lee]

Hi,

I'm trying to get multiple maps showing on the same page and looking to handle it in twitter bootstrap tabs.  The issue I'm facing is that the map is cut off when navigating to a second tab, I have tried calling the resize function without any success.  My markup is like this

<div class="centered-pills">
    <ul class="nav nav-pills" id="myTab">
        <li class="active">
            <a href="#response" data-toggle="pill" >Response</a>
        </li>
        <li><a href="#eng" data-toggle="pill">Eng</a></li>
        <li><a href="#bias" data-toggle="pill">Bias</a></li>
        <li><a href="#sus" data-toggle="pill">Sus</a></li>
    </ul>
</div>

<div class="tab-content">
    <div class="tab-pane active" id="response">
        <telerik:RadMap runat="server" ID="RadMap1" Zoom="2" Height="600px" MinZoom="2" MaxZoom="2" Pannable="false" CssClass="Map" >
            <ClientEvents OnShapeCreated="shapeCreated" OnShapeMouseEnter="shapeMouseEnter" OnShapeMouseLeave="shapeMouseLeave" />
                <LayersCollection>
                    <telerik:MapLayer ClientDataSourceID="RadClientDataSource1" Type="Shape" Opacity="1" TitleField="name" ValueField="response" Key="response" />
                </LayersCollection>
            <CenterSettings Longitude="32" Latitude="7" />
        </telerik:RadMap>
    </div>

    <div class="tab-pane" id="eng">
        <telerik:RadMap runat="server" ID="RadMap2" Zoom="2" Height="600px" MinZoom="2" MaxZoom="2" Pannable="false" CssClass="Map" >
            <ClientEvents OnShapeCreated="shapeCreated" OnShapeMouseEnter="shapeMouseEnter" OnShapeMouseLeave="shapeMouseLeave" />
                <LayersCollection>
                    <telerik:MapLayer ClientDataSourceID="RadClientDataSource1" Type="Shape" Opacity="1" TitleField="name" ValueField="eng" Key="eng" />
                </LayersCollection>
            <CenterSettings Longitude="32" Latitude="7" />
        </telerik:RadMap>
    </div>

    <div class="tab-pane" id="bias">
        <telerik:RadMap runat="server" ID="RadMap3" Zoom="2" Height="600px" MinZoom="2" MaxZoom="2" Pannable="false" CssClass="Map" >
            <ClientEvents OnShapeCreated="shapeCreated" OnShapeMouseEnter="shapeMouseEnter" OnShapeMouseLeave="shapeMouseLeave" />
                <LayersCollection>
                    <telerik:MapLayer ClientDataSourceID="RadClientDataSource1" Type="Shape" Opacity="1" TitleField="name" ValueField="sus" Key="sus" />
                </LayersCollection>
            <CenterSettings Longitude="32" Latitude="7" />
        </telerik:RadMap>
    </div>

    <div class="tab-pane" id="sus">
        <telerik:RadMap runat="server" ID="RadMap4" Zoom="2" Height="600px" MinZoom="2" MaxZoom="2" Pannable="false" CssClass="Map" >
            <ClientEvents OnShapeCreated="shapeCreated" OnShapeMouseEnter="shapeMouseEnter" OnShapeMouseLeave="shapeMouseLeave" />
                <LayersCollection>
                    <telerik:MapLayer ClientDataSourceID="RadClientDataSource1" Type="Shape" Opacity="1" TitleField="name" ValueField="bias" Key="bias" />
                </LayersCollection>
            <CenterSettings Longitude="32" Latitude="7" />
        </telerik:RadMap>
    </div>
</div>

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})

any help would be appreciated

[Ianko]

Hello Lee,

Additionally to calling resize, you should reset the center of the map, e.g.,:

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');

    var maps = $(".RadMap");
    maps.each(function (index, elm) {

        elm.control.get_kendoWidget().resize();
        elm.control.get_kendoWidget().center([3, 72]);

    })
})

This code, iterates all map controls and reset their center. You can rather implement an optimized solution to fix only the shown map.

Note that when an initially hidden map is shown via JS, its center is set based on the initially hidden state. Therefore, the center is not calculated based on the with of the actual map, but to a buffer size corresponding at null when hidden.

Regards,
Ianko
Telerik