title: Running open layer with JSF and .xhtml file
body: <p>I made a jsf project and have the following example from <a href="http://docs.openlayers.org/library/introduction.html" rel="nofollow">http://docs.openlayers.org/library/introduction.html</a> but as a xhtml file this wouldn't run and as a html file it would run. How to run it with jsf and .xhtml. It runs with html though.</p>
  
  <pre><code>     &lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!--
  To change this template, choose Tools | Templates
  and open the template in the editor.
  --&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"&gt;
      &lt;h:head&gt;
          &lt;script src="http://openlayers.org/api/OpenLayers.js"&gt;&lt;/script&gt;
  
      &lt;/h:head&gt;
      &lt;h:body&gt;
          &lt;div style="width:100%; height:100%" id="map"&gt;&lt;/div&gt;
          &lt;script defer="defer" type="text/javascript"&gt;
          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();
        &lt;/script&gt;
      &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Result at browser using firebug:</p>
  
  <pre><code>&lt;head&gt;
  &lt;body&gt;
  &lt;div style="width: 100%; height: 100%; " id="map" class="olMap"&gt;
  &lt;div id="OpenLayers.Map_2_OpenLayers_ViewPort" style="position: relative; overflow-x: hidden; overflow-y: hidden; width: 100%; height: 100%; " class="olMapViewport olControlDragPanActive olControlZoomBoxActive olControlPinchZoomActive olControlNavigationActive"&gt;
  &lt;div id="OpenLayers.Map_2_events" style="position: absolute; width: 100%; height: 100%; z-index: 999; "&gt;
  &lt;div id="OpenLayers.Control.PanZoom_5" style="position: absolute; left: 4px; top: 4px; z-index: 1004; " class="olControlPanZoom olControlNoSelect" unselectable="on"&gt;
  &lt;div id="OpenLayers.Control.ArgParser_6" style="position: absolute; z-index: 1004; " class="olControlArgParser olControlNoSelect" unselectable="on"/&gt;
  &lt;div id="OpenLayers.Control.Attribution_7" style="position: absolute; z-index: 1004; " class="olControlAttribution olControlNoSelect" unselectable="on"/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script defer="defer" type="text/javascript"&gt;
  
  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();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/googleChrome.js"/&gt;
  &lt;/html&gt;
  </code></pre>