I have the follwoing code generated from netbean and some modification from this link.
The code works well after removing while it doesn’t with it. What might be the issue? <!DOCTYPE html>
<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
**<!DOCTYPE html>**
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</h:head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
var dm_wms = new OpenLayers.Layer.WMS(
"Canadian Data",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{
layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true",
format: "image/png"
},
{isBaseLayer: false}
);
map.addLayers([wms, dm_wms]);
map.zoomToMaxExtent();
</script>
</body>
</html>
Maybe it’s too late to answer this question, but it can help somebody else, so I’ll try.
The cause of this behavior remains unknown to me, but I found the solution: you must assign a “position: fixed;” property to div#map. I haven’t tested it with XML, but in HTML document it works properly.