Disegno di una mappa OpenLayers 3 in un elemento nascosto

Question

Sto scrivendo una pagina in cui è possibile visualizzare entrambi i dettagli su un'area e una mappa. I dettagli sono in una scheda e la mappa in un'altra. La parte rilevante dell'HTML è sotto e le classi sono da Bootstrap.

<div class="col-xs-8"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#tab-details" data-toggle="tab">Details</a></li> 
     <li><a href="#tab-map" data-toggle="tab">Map</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div id="tab-details" class="tab-pane fade in active"></div> 
     <div id="tab-map" class="tab-pane fade"> 
      <div id="map-container" class="map"></div> 
     </div> 
    </div> 
</div> 

Lo strato piastrella è da OSM e lo strato vettore viene caricato tramite un URL che serve un file KML. Lo fa utilizzando OpenLayers 3.0.0 come segue:

function ShowMap() { 
    var area = $('#AreaCode').val(); 
    $('#map-container').empty(); 
    if (area != null && area != '') { 
     var kmlUrl = '/kml?code=' + area; 
     var tile = new ol.layer.Tile({ source: new ol.source.OSM() }); 
     var vectorSource = new ol.source.KML({ url: kmlUrl, projection: 'EPSG:3857' }); 
     var vector = new ol.layer.Vector({ source: vectorSource }); 
     vector.setOpacity(.3); 
     var map = new ol.Map({ 
      target: 'map-container', 
      layers: [tile, vector], 
      view: new ol.View({ 
       center: [0, 0], 
       zoom: 2 
      }) 
     }); 

     vector.addEventListener("change", function(event) { 
      map.getView().fitExtent(vectorSource.getExtent(), map.getSize()); 
     }); 
    } 
} 

$('#tab-map-link').on('shown.bs.tab', function(event) { 
    ShowMap(); 
}); 

Questo rende la mappa quando la pagina della mappa viene cliccato causando un piccolo ritardo. C'è un modo per caricarlo anche quando la scheda non è selezionata? Se provo a farlo e non lo ridisegno quando viene selezionata la scheda della mappa, la tela è vuota quando si passa alla scheda della mappa e vengono visualizzati solo i pulsanti di zoom in e out.

C'è un modo per rendere la mappa in un elemento che non è visibile?

Answer 1

È possibile inizializzare la mappa in un contenitore nascosto e poi, quando è attivata la scheda, è possibile chiamare updateSize sulla mappa:

map.updateSize()