0

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. How to run it with jsf and .xhtml. It runs with html though.

     <?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>
        <script src="http://openlayers.org/api/OpenLayers.js"></script>

    </h:head>
    <h: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>
    </h:body>
</html>

Result at browser using firebug:

<head>
<body>
<div style="width: 100%; height: 100%; " id="map" class="olMap">
<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">
<div id="OpenLayers.Map_2_events" style="position: absolute; width: 100%; height: 100%; z-index: 999; ">
<div id="OpenLayers.Control.PanZoom_5" style="position: absolute; left: 4px; top: 4px; z-index: 1004; " class="olControlPanZoom olControlNoSelect" unselectable="on">
<div id="OpenLayers.Control.ArgParser_6" style="position: absolute; z-index: 1004; " class="olControlArgParser olControlNoSelect" unselectable="on"/>
<div id="OpenLayers.Control.Attribution_7" style="position: absolute; z-index: 1004; " class="olControlAttribution olControlNoSelect" unselectable="on"/>
</div>
</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>
<script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/googleChrome.js"/>
</html>
kinkajou
  • 3,664
  • 25
  • 75
  • 128

3 Answers3

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.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • thanks for you very very very good answer :) well why is the difference in execution of code in html and xhtml? – kinkajou May 02 '12 at 03:32
  • JSF/Facelets runs in webserver and generates HTML/JS which in turn runs in webbrowser. It are two physically entirely different environments which are connected by HTTP. – BalusC May 02 '12 at 03:37
  • I tested the code with changes you asked it does not generate map while the same code in html generates map without jsf tags. I can see the changes using firebug though. the script has ran successfully but no map is visible? – kinkajou May 02 '12 at 03:53
  • Seems like a bug in OpenLayers. I checked their tutorial, copypasted their [complete HTML example](http://docs.openlayers.org/library/introduction.html#putting-it-all-together) and it works. Once I add just a ` ` line to top, it breaks. Thus, still not a JSF specific problem, it's as said just a HTML code generator :) I suggest to create a new question and focus on OpenLayers+Doctype issue (and ignore the JSF story for now). Once you got the answer from OpenLayers/HTML experts, transition the code to JSF so that it generates exactly the desired HTML. – BalusC May 02 '12 at 04:02
  • You're welcome. Please note that the OpenLayers own example exactly matches the 1st suggestion in my answer. Perhaps try following tutorials a bit more closely? :) – BalusC May 02 '12 at 04:12
  • yea followed everyway and also http://dev.openlayers.org/releases/OpenLayers-2.11/examples/xhtml.html which demonstrate xhtml with openlayers – kinkajou May 02 '12 at 04:25
  • Please note that that example is presenting (abusing) plain XHTML as HTML. It should not be confused with using a XML based view technology to generate HTML (like as Facelets). See also http://stackoverflow.com/a/3869174/157882 – BalusC May 02 '12 at 04:28
0

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>
IturPablo
  • 1,572
  • 2
  • 22
  • 35
0

@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.

elcocolio
  • 1