<div>Hi,</div>
<div>Can someone please tell me why my WFS layer is drifting off my WMS location.</div>
<div>Both layers are using WGS84 co-ord.</div>
<div>Have attached jpg of track that should display around lake.</div>
<div> </div>
<div>Any help much appreciated.</div>
<div> </div>
<div>Regards</div>
<div>Chris</div>
<div><span lang="EN-NZ">
<p>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</p>
<p>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;DTD/xhtml1-strict.dtd&quot;&gt;</p>
<p>&lt;html xmlns=&quot;<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>&quot;&gt;</p>
<p>&lt;head&gt;</p>
<p>&lt;title&gt;OpenLayers map preview&lt;/title&gt;</p>
<p>&lt;!-- Import OL CSS, auto import does not work with our minified OL.js build --&gt;</p>
<p>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;<a href="http://localhost:8080/geoserver/openlayers/theme/default/style.css">http://localhost:8080/geoserver/openlayers/theme/default/style.css</a>&quot;/&gt;</p>

<p>&lt;!-- Basic CSS definitions --&gt;</p>
<p>&lt;style type=&quot;text/css&quot;&gt;</p>
<p>/* General settings */</p>
<p>body {</p>
<p>font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;</p>
<p>font-size: small;</p>
<p>}</p>
<p>/* Toolbar styles */</p>
<p>#toolbar {</p>
<p>position: relative;</p>
<p>padding-bottom: 0.5em;</p>
<p>display: none;</p>
<p>}</p>
<p></p>
<p>#toolbar ul {</p>
<p>list-style: none;</p>
<p>padding: 0;</p>
<p>margin: 0;</p>
<p>}</p>
<p></p>
<p>#toolbar ul li {</p>
<p>float: left;</p>
<p>padding-right: 1em;</p>
<p>padding-bottom: 0.5em;</p>
<p>}</p>
<p></p>
<p>#toolbar ul li a {</p>
<p>font-weight: bold;</p>
<p>font-size: smaller;</p>
<p>vertical-align: middle;</p>
<p>color: black;</p>
<p>text-decoration: none;</p>
<p>}</p>
<p>#toolbar ul li a:hover {</p>
<p>text-decoration: underline;</p>
<p>}</p>
<p></p>
<p>#toolbar ul li * {</p>
<p>vertical-align: middle;</p>
<p>}</p>
<p>/* The map and the location bar */</p>
<p>#map {</p>
<p>clear: both;</p>
<p>position: relative;</p>
<p>width: 800px;</p>
<p>height: 371px;</p>
<p>border: 1px solid black;</p>
<p>}</p>
<p></p>
<p>#wrapper {</p>
<p>width: 800px;</p>
<p>}</p>
<p></p>
<p>#location {</p>
<p>float: right;</p>
<p>}</p>
<p></p>
<p>#options {</p>
<p>position: absolute;</p>
<p>left: 13px;</p>
<p>top: 7px;</p>
<p>z-index: 3000;</p>
<p>}</p>
<p>/* Styles used by the default GetFeatureInfo output, added to make IE happy */</p>
<p>table.featureInfo, table.featureInfo td, table.featureInfo th {</p>
<p>border: 1px solid #ddd;</p>
<p>border-collapse: collapse;</p>
<p>margin: 0;</p>
<p>padding: 0;</p>
<p>font-size: 90%;</p>
<p>padding: .2em .1em;</p>
<p>}</p>
<p></p>
<p>table.featureInfo th {</p>
<p>padding: .2em .2em;</p>
<p>text-transform: uppercase;</p>
<p>font-weight: bold;</p>
<p>background: #eee;</p>
<p>}</p>
<p></p>
<p>table.featureInfo td {</p>
<p>background: #fff;</p>
<p>}</p>
<p></p>
<p>table.featureInfo tr.odd td {</p>
<p>background: #eee;</p>
<p>}</p>
<p></p>
<p>table.featureInfo caption {</p>
<p>text-align: left;</p>
<p>font-size: 100%;</p>
<p>font-weight: bold;</p>
<p>text-transform: uppercase;</p>
<p>padding: .2em .2em;</p>
<p>}</p>
<p>&lt;/style&gt;</p>
<p>&lt;script src=&quot;<a href="http://localhost:8080/geoserver/openlayers/OpenLayers.js">http://localhost:8080/geoserver/openlayers/OpenLayers.js</a>&quot; type=&quot;text/javascript&quot;&gt;</p>
<p>&lt;/script&gt;</p>
<p>&lt;script defer=&quot;defer&quot; type=&quot;text/javascript&quot;&gt;</p>
<p>var map;</p>
<p>var untiled;</p>
<p>var tiled;</p>
<p>var pureCoverage = true;</p>
<p>// pink tile avoidance</p>
<p>OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;</p>
<p>// make OL compute scale according to WMS spec</p>
<p>OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;</p>
<p></p>
<p>function init(){</p>
<p>// if this is just a coverage or a group of them, disable a few items,</p>
<p>// and default to jpeg format</p>
<p>format = &#39;image/png&#39;;</p>
<p>if(pureCoverage) {</p>
<p>document.getElementById(&#39;filterType&#39;).disabled = true;</p>
<p>document.getElementById(&#39;filter&#39;).disabled = true;</p>
<p>document.getElementById(&#39;antialiasSelector&#39;).disabled = true;</p>
<p>document.getElementById(&#39;updateFilterButton&#39;).disabled = true;</p>
<p>document.getElementById(&#39;resetFilterButton&#39;).disabled = true;</p>
<p>document.getElementById(&#39;jpeg&#39;).selected = true;</p>
<p>format = &quot;image/jpeg&quot;;</p>
<p>}</p>
<p></p>
<p>var bounds = new OpenLayers.Bounds(</p>
<p>174.38698427874348, -39.46185934677626,</p>
<p>174.4352962787435, -39.43797334677626</p>
<p>);</p>
<p>var options = {</p>
<p>controls: [],</p>
<p>maxExtent: bounds,</p>
<p>maxResolution: 0.00018871875,</p>
<p>projection: &quot;EPSG:4326&quot;,</p>
<p>units: &#39;degrees&#39;</p>
<p>};</p>
<p>map = new OpenLayers.Map(&#39;map&#39;, options);</p>
<p></p>
<p>// setup tiled layer</p>
<p>tiled = new OpenLayers.Layer.WMS(</p>
<p>&quot;topp:RectifyTRC_APP_wgs - Tiled&quot;, &quot;<a href="http://localhost:8080/geoserver/wms">http://localhost:8080/geoserver/wms</a>&quot;,</p>
<p>{</p>
<p>layers: &#39;topp:RectifyTRC_APP_wgs&#39;,</p>
<p>styles: &#39;&#39;,</p>
<p>height: &#39;371&#39;,</p>
<p>width: &#39;800&#39;,</p>
<p>srs: &#39;EPSG:4326&#39;,</p>
<p>format: format,</p>
<p>tiled: &#39;true&#39;,</p>
<p>tilesOrigin : &quot;174.38698427874348,-39.46185934677626&quot;</p>
<p>},</p>
<p>{buffer: 0} </p>
<p>);</p>
<p>wfs = new OpenLayers.Layer.WFS(</p>
<p>&#39;topp:walkingtrkwgs&#39;, &quot;<a href="http://localhost:8080/geoserver/wfs">http://localhost:8080/geoserver/wfs</a>&quot;,</p>
<p>{</p>
<p>srs: &#39;EPSG:4326&#39;,</p>
<p>typename:&quot;walkingtrkwgs&quot;,</p>
<p>height: &#39;544&#39;,</p>
<p>styles: &#39;&#39;,</p>
<p>format: format,</p>
<p>tiled: &#39;true&#39;,</p>
<p>tilesOrigin : &quot;174.39553846817478,-39.46070911608958&quot;</p>
<p>},</p>
<p>{buffer: 0} </p>
<p>); </p>
<p></p>
<p>// setup single tiled layer</p>
<p>untiled = new OpenLayers.Layer.WMS(</p>
<p>&quot;topp:RectifyTRC_APP_wgs - Untiled&quot;, &quot;<a href="http://localhost:8080/geoserver/wms">http://localhost:8080/geoserver/wms</a>&quot;,</p>
<p>{</p>
<p>layers: &#39;topp:RectifyTRC_APP_wgs&#39;,</p>
<p>styles: &#39;&#39;,</p>
<p>height: &#39;371&#39;,</p>
<p>width: &#39;800&#39;,</p>
<p>srs: &#39;EPSG:4326&#39;,</p>
<p>format: format</p>
<p>},</p>
<p>{singleTile: true, ratio: 1} </p>
<p>);</p>
<p></p>
<p>map.addLayers([untiled, tiled, wfs]);</p>
<p>// build up all controls </p>
<p>map.addControl(new OpenLayers.Control.PanZoomBar({</p>
<p>position: new OpenLayers.Pixel(2, 15)</p>
<p>}));</p>
<p>map.addControl(new OpenLayers.Control.Navigation());</p>
<p>map.addControl(new OpenLayers.Control.OverviewMap());</p>
<p>map.addControl(new OpenLayers.Control.Scale($(&#39;scale&#39;)));</p>
<p>map.addControl(new OpenLayers.Control.LayerSwitcher());</p>
<p>map.addControl(new OpenLayers.Control.MousePosition({element: $(&#39;location&#39;)}));</p>
<p>map.zoomToExtent(bounds);</p>
<p></p>
<p>// wire up the option button</p>
<p>var options = document.getElementById(&quot;options&quot;);</p>
<p>options.onclick = toggleControlPanel;</p>
<p></p>
<p>// support GetFeatureInfo</p>
<p>map.events.register(&#39;click&#39;, map, function (e) {</p>
<p>document.getElementById(&#39;nodelist&#39;).innerHTML = &quot;Loading... please wait...&quot;;</p>
<p>var params = {</p>
<p>REQUEST: &quot;GetFeatureInfo&quot;,</p>
<p>EXCEPTIONS: &quot;application/vnd.ogc.se_xml&quot;,</p>
<p>BBOX: map.getExtent().toBBOX(),</p>
<p>X: e.xy.x,</p>
<p>Y: e.xy.y,</p>
<p>INFO_FORMAT: &#39;text/html&#39;,</p>
<p>QUERY_LAYERS: map.layers[0].params.LAYERS,</p>
<p>FEATURE_COUNT: 50,</p>
<p>Layers: &#39;topp:RectifyTRC_APP_wgs&#39;,</p>
<p>Styles: &#39;&#39;,</p>
<p>Srs: &#39;EPSG:4326&#39;,</p>
<p>WIDTH: map.size.w,</p>
<p>HEIGHT: map.size.h,</p>
<p>format: format};</p>
<p>OpenLayers.loadURL(&quot;<a href="http://localhost:8080/geoserver/wms">http://localhost:8080/geoserver/wms</a>&quot;, params, this, setHTML, setHTML);</p>
<p>OpenLayers.Event.stop(e);</p>
<p>});</p>
<p>}</p></span></div>
<div> </div>