<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>
<head>
 <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'>
 <style>BODY{font:10pt Tahoma, Verdana, sans-serif;}</style>
</head>
<body>
Here is how I approached this problem, the basic approach is to define you own feature class in javascript. For example, I add the WFS features to my OpenLayers map as follows:<br><br><br>&nbsp;&nbsp;&nbsp; map.addLayer(new OpenLayers.Layer.WFS("DOT Cameras", "http://localhost:8080/geoserver/wfs?",<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {typename: "vagis:snapshots", maxfeatures: 2000},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { featureClass: ORCI.Feature.wfsSnapshots}));<br><br>Then I define my feature class as:<br><br>ORCI = new Object();<br>ORCI.Feature = new Object();<br><br>var imgCnt = 0;<br>var playSnapshotTimer = 0;<br>var playSnapshotOid = 0;<br>function playSnapshot(oid, cycle, url) {<br>&nbsp;&nbsp;&nbsp; if (playSnapshotTimer != 0) dojo.lang.clearTimeout(playSnapshotTimer);<br>&nbsp;&nbsp;&nbsp; if (oid != playSnapshotOid) return;<br>&nbsp;&nbsp;&nbsp; document.images['SnapshotImg'].src = url + "?" + imgCnt;<br>&nbsp;&nbsp;&nbsp; imgCnt++;<br>&nbsp;&nbsp;&nbsp; var div = document.getElementById("iconDetail");<br>&nbsp;&nbsp;&nbsp; if (div.Oid == oid) playSnapshotTimer = dojo.lang.setTimeout(playSnapshot, cycle * 1000, oid, cycle, url);<br>}<br><br>ORCI.Feature.wfsSnapshots = OpenLayers.Class.create();<br>ORCI.Feature.wfsSnapshots.prototype = <br>&nbsp; OpenLayers.Class.inherit( OpenLayers.Feature, {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; /** <br>&nbsp;&nbsp;&nbsp;&nbsp; * @constructor<br>&nbsp;&nbsp;&nbsp;&nbsp; * <br>&nbsp;&nbsp;&nbsp;&nbsp; * @param {OpenLayers.Layer} layer<br>&nbsp;&nbsp;&nbsp;&nbsp; * @param {XMLNode} xmlNode<br>&nbsp;&nbsp;&nbsp;&nbsp; */<br>&nbsp;&nbsp;&nbsp; initialize: function(layer, xmlNode) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var newArguments = arguments;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var data = this.processXMLNode(xmlNode);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data.icon = cameraIcon.clone();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; newArguments = new Array(layer, data.lonlat, data)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; OpenLayers.Feature.prototype.initialize.apply(this, newArguments);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.createMarker();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.marker.xmlNode = xmlNode;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.marker.Oid = data.cameraId;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.layer.addMarker(this.marker);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.marker.events.register("mousedown", this.marker, function(evt) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (iconPopup != null) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; map.removePopup(iconPopup);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; iconPopup.destroy();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; iconPopup = null;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var html = xslSnapshotsPlay.transformToDocument(this.xmlNode);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var div = document.getElementById("iconDetail");<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; div.Oid = data.cameraId;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; dojo.dom.replaceChildren(div, html.firstChild);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; playSnapshotOid = data.cameraId;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; playSnapshot(data.cameraId, data.cycleSecs, data.snapshotURL);<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Event.stop(evt);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });<br>&nbsp;&nbsp;&nbsp; },<br>&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; destroy: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (this.marker != null) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.layer.removeMarker(this.marker);&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; OpenLayers.Feature.prototype.destroy.apply(this, arguments);<br>&nbsp;&nbsp;&nbsp; },<br><br>&nbsp;&nbsp;&nbsp; /**<br>&nbsp;&nbsp;&nbsp;&nbsp; * @param {XMLNode} xmlNode<br>&nbsp;&nbsp;&nbsp;&nbsp; * <br>&nbsp;&nbsp;&nbsp;&nbsp; * @returns Data Object with 'id', 'lonlat', and private properties set<br>&nbsp;&nbsp;&nbsp;&nbsp; * @type Object<br>&nbsp;&nbsp;&nbsp;&nbsp; */<br>&nbsp;&nbsp;&nbsp; processXMLNode: function(xmlNode) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var point = OpenLayers.Ajax.getElementsByTagNameNS(xmlNode, "http://www.opengis.net/gml", "gml", "Point");<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var text&nbsp; = OpenLayers.Util.getXmlNodeValue(OpenLayers.Ajax.getElementsByTagNameNS(point[0], "http://www.opengis.net/gml","gml", "coordinates")[0]);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var floats = text.split(",");<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var cameraId = OpenLayers.Ajax.getElementsByTagNameNS(xmlNode, "http://www.openroadsconsulting.com/vagis","vagis", "snapshots")[0].attributes['fid'].nodeValue;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var cameraName = OpenLayers.Util.getXmlNodeValue(OpenLayers.Ajax.getElementsByTagNameNS(xmlNode, "http://www.openroadsconsulting.com/vagis","vagis", "camera_name")[0]);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var snapshotURL = OpenLayers.Util.getXmlNodeValue(OpenLayers.Ajax.getElementsByTagNameNS(xmlNode, "http://www.openroadsconsulting.com/vagis","vagis", "snapshot_url")[0]);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var cycleSecs = OpenLayers.Util.getXmlNodeValue(OpenLayers.Ajax.getElementsByTagNameNS(xmlNode, "http://www.openroadsconsulting.com/vagis","vagis", "cycle_seconds")[0]);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return {lonlat: new OpenLayers.LonLat(parseFloat(floats[0]),<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; parseFloat(floats[1])),<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id: cameraId,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cameraId: cameraId,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cameraName: cameraName,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; snapshotURL: snapshotURL,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cycleSecs: cycleSecs<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br><br>&nbsp;&nbsp;&nbsp; },<br>&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; /** @final @type String */<br>&nbsp;&nbsp;&nbsp; CLASS_NAME: "ORCI.Feature.wfsSnapshots"<br>});<br>&nbsp; <br>The "initialize" function creates a "marker" on the WFS layer and then parses the XML document to create the data for the marker. It also then registers the mousedown event to create a popup (in this case, it displays an image that is updated on a timer). The main part of the code that will need to be written is the processXMLNode to parse the GIS data from the WFS and the "mousedown" event handler to do what every you please. I hope this helps. It may look a bit complicated, but when you get right down to doing it in the code it is quite straight forward and efficient. Kudos to the OpenLayer team for how they implemented WFS access!<br><br><br>David Robison<br><blockquote style="border-left: 2px solid rgb(0, 0, 255); padding-left: 5px; margin-left: 5px; margin-right: 0px;"><hr><b>From:</b> John Cole [mailto:john.cole@uai.com]<br><b>To:</b> 'users@openlayers.org' [mailto:users@openlayers.org]<br><b>Sent:</b> Sat, 10 Mar 2007 16:15:32 -0500<br><b>Subject:</b> [OpenLayers-Users] popup with wfs marker layer...<br><br>I'm trying to create a popup based off of a WFS layer, but I'm a little<br>
unclear on which object I should register for the call back.<br>
<br>
I'd like it to work similar to the Text layer, where I click on a marker and<br>
it displays the info from the WFS object.  The Text layer puts a popup<br>
handler on each marker.  With the WFS layer, I can get an event registered<br>
so it is called when a marker is clicked, but I don’t yet understand how to<br>
tie the event back to the information in the WFS layer.<br>
<br>
I'd appreciate a suggestion or pointer on how to implement this type of<br>
popup.<br>
<br>
Thanks,<br>
<br>
John<br>
<br>
-- <br>
No virus found in this outgoing message.<br>
Checked by AVG Free Edition.<br>
Version: 7.5.446 / Virus Database: 268.18.8/716 - Release Date: 3/9/2007<br>
6:53 PM<br>
 <br>
This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the sender. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail.<br>
_______________________________________________<br>
Users mailing list<br>
<a href="mailto:Users@openlayers.org">Users@openlayers.org</a><br>
<a href="http://openlayers.org/mailman/listinfo/users" target="_blank">http://openlayers.org/mailman/listinfo/users</a><br>
</blockquote><style>
</style>
</body></html>