|
Home
This is a basic guide on how to use the Geo-Faces OpenLayers JSP or Facelets tag in a existing or new RichFaces JSF application. (Note: RichFaces is required because the component tag is built using the RichFaces/Ajax4jsf CDK, which currently relies on the RichFaces libraries at runtime). Build Geo-Faces from Sources1. Download and install Apache Maven (http://maven.apache.org/index.html). 2. Download and install SVN (http://subversion.tigris.org ) client. 3. Download and install RichFaces support for either Netbeans or Eclipse. Eclipse: Jboss tools http://wiki.jboss.org/wiki/JBossTools Netbeans: RichFaces plugin https://nbrichfacessupport.dev.java.net/ 4. Check out the source code from repository svn checkout http://geo-faces.googlecode.com/svn/trunk/openlayers openlayers-component 5. Compile the project using maven. This build generates the file target/openlayers-1.0-SNAPSHOT.jar, which is the JSF component library mvn package Using Geo-Faces Open LayerInstructions for creating a RichFaces enabled project are located at: Netbeans: http://blogs.sun.com/geertjan/entry/richfaces_for_netbeans_ide_6 Eclipse: nourl 1. Add openlayers.jar to your project build path 2a. Create a JSP page and add the following tag library reference. <%@taglib prefix="ol" uri="http://osi.tetratech.com/jsf/geofaces/openlayers"%> 2b. Create a Facelets page and add the following tag library reference. xmlns:ol="http://osi.tetratech.com/jsf/geofaces/openlayers"
3. The default map can be added to the page with the following tag. <ol:openlayers id="olMap"></ol:openlayers>
4. Build and run project. The result should be the default map with a single map layer and default navigation controls.
5. The default map can be customized using the map options property. Modify the default map with the following map options property to add a Zoom Bar control. <ol:openlayers id="olMap" mapOptions="{ controls: [new OpenLayers.Control.PanZoomBar()] }"/>
6. Add more controls to the map and change the map source to another server using the layer options property. See the resources section for more information on open layers <ol:openlayers id="olMap" serviceName="JPL Global Imagery Service"
serviceURL="http://wms.jpl.nasa.gov/wms.cgi"
layerOptions="{layers: 'global_mosaic', format: 'image/png'}"
centerX="-77.02506256103516" centerY="38.90180969238281" zoomLevel="13"
mapOptions="{ controls: [new OpenLayers.Control.PanZoomBar()] }"/> 7. Below is the complete source code for the map shown in step 6. The map can be further enhanced by invoking some Open Layers API functions from JSF components.
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="ol" uri="http://osi.tetratech.com/jsf/geofaces/openlayers"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Geo-Faces OpenLayes Example</title>
<style type="text/css">
body {
padding:0px;
margin:0px;
}
#olMap {
width:1200px;
height:800px;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<f:view>
<h:panelGrid columns="1" title="Geo-Faces Open Layers Example" style=" ">
<rich:panel header="Geo-Faces Open Layers Example" style="padding:0px;">
<ol:openlayers id="olMap" serviceName="JPL Global Imagery Service"
serviceURL="http://wms.jpl.nasa.gov/wms.cgi"
layerOptions="{layers: 'global_mosaic', format: 'image/png'}"
centerX="-77.02506256103516" centerY="38.90180969238281"
zoomLevel="13"
mapOptions="{ controls: [new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.MousePosition(), new OpenLayers.Control.ScaleLine(), new OpenLayers.Control.OverviewMap(), new OpenLayers.Control.Permalink(), new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('pnlLayerControls')})] }"/>
</rich:panel>
</h:panelGrid>
</f:view>
</body>
</html>
|
Sign in to add a comment
