This is a migrated thread and some comments may be shown as answers.

Radmap bootstrap tabs

1 Answer 110 Views
Map
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Lee asked on 17 Feb 2015, 12:43 PM
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

1 Answer, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 19 Feb 2015, 10:55 AM
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
Tags
Map
Asked by
Lee
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Share this question
or