Bootstrap Display a map in a tab page within a tab control
Bootstrap Display a map in a tab page within a tab control
Recently i was working with bootstrap and i needed to display a map within a tab page of a tab control. The task look simple enough, below is the html and javascript codes:
<html>
<head>
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap.additional.css" rel="stylesheet" type="text/css" />
<script src="./jslib/jquery-1.8.3.min.js"></script>
<script src="./jslib/bootstrap.min.js"></script>
<script src="./jslib/OpenLayers.js"></script>
<script>
$(function(){
$("#tabs").tab();
var lat = 1.3000;
var lon = 103.8000;
updateMap("myMap", lon, lat);
});
function updateMap(mapElementId, lon, lat) {
var layer = new OpenLayers.Layer.OSM();
map = new OpenLayers.Map(mapElementId);
map.addLayer(layer);
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var projectTo = map.getProjectionObject();
var lonLat = new OpenLayers.LonLat(lon, lat).transform(epsg4326, projectTo);
var zoom = 10;
var popup = null;
map.setCenter (lonLat, zoom);
}
</script>
</head>
<body>
<div role="tabpanel">
<!-- Nav tabs -->
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab1</a></li>
<li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab2</a></li>
<li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab3</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
This is tab 1 (Active by default)
</div>
<div role="tabpanel" class="tab-pane active" id="tab2">
<div id="myMap" style="width:440px; height:300px; vertical-align: middle; margin-top: 10px; margin-bottom: 10px">
</div>
<div role="tabpanel" class="tab-pane active" id="tab3">
This is tab 3
</div>
</div>
</div>
</body>
</html>
I expected it to work, but somehow the map fails to show up. After some digging, it seems that the map fails to realize it height in the tab page if the tab page is not initially active. The solution is to add style="height:100%" to the <div class="tab-content"> so that it becomes like <div class="tab-content" style="height:100%">.
Comments
Post a Comment