Radmap bootstrap tabs

2 posts, 0 answers
  1. Lee
    Lee avatar
    5 posts
    Member since:
    Jan 2008

    Posted 17 Feb 2015 Link to this post

    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
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 19 Feb 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top