[OpenLayers-Users] layers features displayed with css visibility set to hidden

Thu Apr 29 10:43:38 EDT 2010

I'm trying to reinvent the wheel by doing a simple tabs widget.
In one of the tabs I want to put a map.
I tried to use a couple of classes to show hide the divs that act as
tabs but I found out a weird behaviour.

When the tab with the map should be hidden I assign a class="invisible"
that sets visibility: hidden.
Tha baselayer and the navigation controls are not visible but a feature
added to a vector layer (e.g. a point) is visible.

Any idea of what can be wrong?

thank you maxx

test code (same behaviour in 2.8 and 2.9)
As you can see loading the file the point feature is visible.
If you click on the button "tab2" the other parts of the map become visible.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1//EN">
<!-- $Id Exp $ -->
<!--Generated by quanta Plus template - freely use and distribute-->
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta name="GENERATOR" content="Quanta Plus">
  <link>
	<script src="http://openlayers.org/api/OpenLayers.js"
type="text/javascript"></script>
  <style type="text/css">

.visible
{
	visibility: visible;
}

.invisible
{
	visibility: hidden;
}

  </style>
 	<script type="text/javascript">
function init()
{
	var options = {
	projection: new OpenLayers.Projection("EPSG:900913"),
	displayProjection: new OpenLayers.Projection("EPSG:4326"),
	units: "degree",
	maxResolution: 156543.0339,
	maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
						20037508.34, 20037508.34)
	};

	map = new OpenLayers.Map('map', options);

	var metalayer = new OpenLayers.Layer.WMS(
			"OpenLayers WMS",
			"http://labs.metacarta.com/wms/vmap0",
			{layers: 'basic'}
	);
	map.addLayer(metalayer);

	vlayer = new OpenLayers.Layer.Vector("vector layer",
		{
			projection: map.displayProjection
		}
	);
	map.addLayer(vlayer);

	var pointFeature0 = new OpenLayers.Feature.Vector(new
OpenLayers.Geometry.Point(1390542.4183704,5145129.2472156));
	vlayer.addFeatures(pointFeature0);

	var lonLat = new OpenLayers.LonLat(12.51,
41.9).transform(map.displayProjection, map.projection);	
	map.setCenter(lonLat, 5);
}

function setTab(tab)
{
	if (tab)
	{
		document.getElementById("tab2").setAttribute("class", "visible");
		document.getElementById("tab1").setAttribute("class", "invisible");
	} else
	{
		document.getElementById("tab1").setAttribute("class", "visible");
		document.getElementById("tab2").setAttribute("class", "invisible");
	}
}

  	</script>
</head>
<body onload="init()">
<div id="container" style="clear: both; border: 1px solid black;">
	<div id="tab1" class="visible">
		content of tab 1
	</div>
	<div id="tab2"  class="invisible">
		<div id="map" style="width:400px; height: 400px;"></div>	
	</div>
</div>
<FORM>
Tab1
<INPUT type="button" name="t1" onclick="setTab(false)">
Tab2
<INPUT type="button" name="t2" onclick="setTab(true)">
</FORM>
</body>
</html>