Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jsf 2 / Openlayers / Xhtml

Running Open Layer With JSF And .xhtml File

Post a Comment
I made a jsf project and have the following example from http://docs.openlayers.org/library/introduction.html but as a xhtml file this wouldn't run and as a html file it would run.

Solution 1:

You're executing JavaScript code inline. This means that the JavaScript code is immediately executed as the webbrowser encounters the particular code line. At that point, the <div id="map"> does not exist in the HTML DOM tree yet! The browser namely parses and executes HTML/JS code from top to bottom.

You need to execute that JavaScript code after the <div id="map"> has been created and added to the HTML DOM tree. You could achieve it the following ways:

  1. Move the <script> block in the markup to after the <div id="map">:

    <h:head>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
</h:head>
<body>
    <div style="width:100%; height:100%" id="map"></div>
    <script 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'} );
        map.addLayer(wms);
        map.zoomToMaxExtent();
    </script>
</body>

  2. Use window.onload to execute the code only when the browser is finished creating the HTML DOM tree.

    <h:head>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">
        window.onload = function() {
            var map = new OpenLayers.Map('map');
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
            map.addLayer(wms);
            map.zoomToMaxExtent();
        };
    </script>
</h:head>

This problem is not related to JSF or XHTML. It's just basic HTML/JS.


Solution 2:

I run int the same problem but my extentiong was .jspx. I did like this give it a try. 

<html 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:ui="http://java.sun.com/jsf/facelets"  
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">  

<head>
<script src="http://piturralhpxp:1983/geoserver/openlayers/OpenLayers.js" type="text/javascript"></script>
        <script type="text/javascript">
     //<![CDATA[
          var map;
           etc ....
            //]]>
        </script>
        </head>
        <f:view>        
        <body onload="init()">

        </body>
</f:view>
</html>

Solution 3:

@BalusC is right. Seems like a bug in OpenLayers. JSF Pages crash when the <!DOCTYPE html> declaration is added.

I removed It, and It worked fine anyway. I'm aware It's not the best practice, but It's the only way I found to get this done. Give It a try.


Post a Comment for "Running Open Layer With JSF And .xhtml File"