[OpenLayers-Users] Map not showing in IE6 & IE7, FF, Safari and Chrome are fine

Tue Jun 16 06:28:36 EDT 2009

Hi All,

I have a test site for a mapping application I'm building. Depending on the
map I'm trying to serve, I have trouble displaying my map in IE6 and IE7.

The map that is giving issues when I try to display it in IE contains a
single WMS layer that is served by my own Mapserver. When I use a WMS layer
from somewhere else, IE displays it just fine. Apparently IE doesn't like my
init() function. I tried to use  http://getfirebug.com/lite.html Firebug
Lite  to find my error, but this hasn't helped me thus far. It gives this
message in the console:

"'undefined' is empty or not an object (test_ie2.html,690)" (this was
translated from me by Dutch)

test_ie2.html is the name of test site. I don't know what the 690 means. Is
that the line number in the openlayers.js? I checked that line number, but
couldn't make sense of it (no js guru ;-)  ).

For this map, in IE I only get a layerswitcher that is empty and a zoombar
that with zero (?) length. No maptiles are rendered. In Firefox, Google
Chrome and Safari, the map is displayed as it should be.
Like I said, the online WMS map displays just fine in IE too.

I hope the above illustrates the problem I have. I've added the code of the
working file, that uses an online WMS map and of the file that I'm using to
display my mapserver map, which doesn't work in IE.

Any ideas on what I can do to let IE play along? It might just be some
syntax error that the other browsers allow and IE doesn't? It might be
anything else though.... :-) Any help will be greatly appreciated!

Best regards,
Martijn Senden.

_________________________________________________________
Code of working online WMS map:
_________________________________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Untitled</title>
<style type="text/css">
body, 
html {
	overflow: hidden; 
	height: 100%;
}
#map {
	position: absolute;
	z-index:1;
	top: 100px;
	bottom: 50px;
	left: 0;
	width: 70%;
	border: 1px solid black;
	background: red;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
#map {
	bottom: auto;
	height: expression(document.documentElement.clientHeight - 150 +"px");
}
</style>
<![endif]-->
<script type="text/javascript"
src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init(){
	map = new OpenLayers.Map('map', {theme: null});
	layer = new OpenLayers.Layer.WMS(
		"OpenLayers WMS", 
		"http://labs.metacarta.com/wms/vmap0",
		{layers: "basic"}
	);
	map.addLayer(layer);
	vlayer = new OpenLayers.Layer.Vector( "Editable" );
	map.addLayer(vlayer);
	var container = document.getElementById("panel");
	var panel = new OpenLayers.Control.EditingToolbar(vlayer, {div:
container});
	map.addControl(panel);
	map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
}
window.onload=init;
</script> 
</head><body>

<div id="map"></div>

</body></html>
_________________________________________________________

_________________________________________________________
Code of my own mapserver map, which is broken in IE:
_________________________________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Untitled</title>
<style type="text/css">
body, 
html {
	overflow: hidden; 
	height: 100%;
}
#map {
	position: absolute;
	z-index:1;
	top: 100px;
	bottom: 50px;
	left: 0;
	width: 70%;
	border: 1px solid black;
	background: red;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
#map {
	bottom: auto;
	height: expression(document.documentElement.clientHeight - 150 +"px");
}
</style>
<![endif]-->
<script type="text/javascript"
src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
function init(){
  //Create a new OpenLayers mapwindow with associated controls
  var map = new OpenLayers.Map('map', {
		projection: "EPSG:28992",
		maxResolution: 1328.125,
		numZoomLevels: 14,
		maxExtent : new OpenLayers.Bounds(-23500,289000,316500,629000),
		restrictedExtent: new OpenLayers.Bounds(80000,442000,88000,452000),
		units : "meters",
		controls: [
			new OpenLayers.Control.ZoomToMaxExtent(),
			new OpenLayers.Control.PanZoomBar({zoomWorldIcon: true}),
			new OpenLayers.Control.LayerSwitcher({'ascending':false}),
			new OpenLayers.Control.MousePosition(),
			new OpenLayers.Control.MouseDefaults(),
			new OpenLayers.Control.KeyboardDefaults(),
		]                   
	});

  // Add Spoortunnel Delft Mapserver .map-files
  layer = new OpenLayers.Layer.MapServer( "Topografie",
          "/geoviewerbin/mapserv.exe", {map:
"c:/OSGeo4W/apps/geoviewer/maps/spoortunnel.map", layers: "Topografie"} );
  map.addLayer(layer);

  map.zoomToExtent(new OpenLayers.Bounds(83600,446000,84600,448200));

  // Add a permanent link to the current view
  map.addControl(new OpenLayers.Control.Permalink() );
}
window.onload=init;
</script>
</head><body>

<div id="map"></div>

</body></html>
_________________________________________________________
-- 
View this message in context: http://n2.nabble.com/Map-not-showing-in-IE6---IE7%2C-FF%2C-Safari-and-Chrome-are-fine-tp3085560p3085560.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.