I am writing a page where you can view both the area information and the map. Details are on one tab, and the map is on another. Below is the relevant part of HTML and the classes are 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>
The tile level is from OSM, and the vector layer is loaded via the URL serving the KML file. He does this using OpenLayers 3.0.0 as follows:
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(); });
This displays the map when the map tab is clicked, causing a slight delay. Is there a way to load it even if the tab is not selected? If I try to do this and do not redraw when the map tab is selected, then the canvas is empty when I switch to the map tab and only the increase and decrease buttons are displayed.
Is there a way to render the map in an element that is not displayed?
source share