1

I have the following layout, produced with Django and Bootsrap frameworks: some tabs with inside each one of them other 3 sub-tabs. In every first sub-tab I have an OpenLayers-2.13 map. This is what I've produced so far:

  • onload.js

    $(document).ready(function(){
        $('a[data-toggle="tab"]').on('shown', function (e) {
            e.target // activated tab
            e.relatedTarget // previous tab
        })
    
        // Show shapefile tabs
        $('#shape-tabs-links a:first').tab('show');
    
        // Put css modifications here, otherwise OpenLayers complains that about map div size is missing
        $('.map').css('width', '100%');
        $('.map').css('height', '50%');
    
        $(window).resize(function() {
            var w = $('.map').width();
            $('.map').css('height', w*3/6);
        });
    
        // Stuff to do per tab
        $('.shapes').each(function() {
            shpId = $(this).val();
            // Show view, cods and info subtabs
            $('#per-shape-tabs-links-'+shpId+' a:first').tab('show');
            renderMaps(shpId); // Map render function defined in anothe js file
        });
    });
    
  • style.css

    .map{background-color:#fff}
    
  • page.html

    <ul id="shape-tabs-links" class="nav nav-pills">
    {% for shape in shape_list %}
        <li><a href="#tabs-{{ shape.id }}" data-toggle="tab">{{ shape.name }}</a></li>
    {% endfor %}
    </ul>
    <div id="shape-tabs" class="tab-content"><!-- First level tabs -->
    {% for shape in shape_list %}
        <div id="tabs-{{ shape.id }}" class="tab-pane">
            <ul id="per-shape-tabs-links-{{ shape.id }}" class="nav nav-tabs">
                <li><a href="#tabs-view-{{ shape.id }}" data-toggle="tab">Data Visualization</a></li>
                <li><a href="#tabs-cods-{{ shape.id }}" data-toggle="tab">CODs Management</a></li>
                <li><a href="#tabs-info-{{ shape.id }}" data-toggle="tab">Shapefile Info</a></li>
            </ul>
    
            <div id="per-shape-tabs" class="tab-content"><!-- Second level tabs -->
                <div id="tabs-view-{{ shape.id }}" class="tab-pane"><!-- subtab 1 -->
                    <div class="row-fluid">
                        <div class="span4"></div>
                        <div class="span8 well well-small">
                            <div id="view-map-{{ shape.id }}" class="span8 map"></div>
                        </div>
                    </div>   
                </div><!-- subtab 1 -->
    
                <div id="tabs-cods-{{ shape.id }}" class="tab-pane"><!-- subtab 2 -->
                    <div class="row-fluid">
                        <div class="span12"></div>
                    </div>
                </div><!-- subtab 2 -->
    
                <div id="tabs-info-{{ shape.id }}" class="tab-pane"><!-- subtab 3 -->
                    <div class="row-fluid">
                        <div class="span12"></div>
                    </div>
                </div><!-- subtab 3 -->
            </div>
        </div>
    {% endfor %}
    </div>
    

I've put css modifications inside onload.js and not inside style.css because OpenLayers complained that my div was without dimensions. Probably a that is a matter of library loading order, but I've tried several combinations and the better one is the one in this code.

What I get loading the page it is a map div with the correct width, but with an height of few pixels in a way that the map is not visible. If I resize my window everything get right and I can visualize my map correctly. But if I refresh the page, I get the bad visualization described above.

On top of onload.js I've inserted the event function described in Bootstrap docs: maybe I have to render map when I'm sure that every tab component is [properly loaded, but I do not exactly how to use it and if this is the a possible solution.

Any ideas on how to solve this problem?

Thanks in advance.

EDIT here you are a simplified, working example of my issue: http://jsfiddle.net/ZrazJ/14/

  • Please note that a good question is expected to include proof of basic research effort and - if applicable - code so far. Questions requesting code to copy&paste are generally not well received. – underdark Jun 17 '13 at 20:14
  • Ok, sorry. I've completely rewritten my question, trying to explain my issue in detail. – caneta Jun 18 '13 at 9:52
1

What have you tried and failed to have work? I usually simply set the #map div (or in the case of that above example, a class) to match a CSS rule:

#map {
   width: 100%;
}

That should make it fill out the container. You might need to explicitly set height as well. I often do this with jQuery so that my map is never too far out of a certain aspect ratio. Something like:

$(window).resize(function() {
    var w = $("#map").width();
    $("#map").css("height", w*3/4);
}

This should work to create a map with dynamic width that doesn't look horrible if the window is resized.

  • I've completely rewritten my question using partially your solution, thanks. But unfortunately, I've not solved definitively my issue. – caneta Jun 18 '13 at 9:54
1

I send resize event to fix this bug (when show the map)

$window.dispatchEvent(new Event('resize')); 
0

I've solved with this workaround.

I've also submitted a bug to Bootstrap developers

0

You need to call updateSize method if you change parent node size

http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.