[OpenLayers-Users] WFS selection layer deformed

[Peter Becker]

Hello all,

I'm trying to let the user select polygons on a map and started creating some 
JavaScript based on http://openlayers.org/dev/examples/getfeature-wfs.html

As opposed to the example everything I use is in WGS84, so I don't need all 
the extra projection options. The polygons I have are served from a local 
Geoserver instance (1.7.5). The OpenLayers version is the hosted one (BTW: may 
I recommend adding a version number into the URL and then setting all cache 
headers so clients don't have to hit the server for 304s all the time? That 
tends to make a huge difference for client-side performance and also takes load 
of the server. I can dig out a detailed explanation if wanted.)

I encountered two problems: at first both the WMS layer and the selection layer 
where vertically squashed. Somehow I fixed that by adding the {singleTile: 
true} option for that layer, but I don't understand why that should be needed 
or why it helps. But even after that change the selection layer is still in 
the old form, i.e. the highlights don't match the map. They tend to be higher, 
the difference seems to be in screen coordinates, not in the geospatial 
coordinates. The selection itself seems to work correctly in every case: 
wherever I click I seem to select the polygon that should be there, 
independent of what is or is not displayed in the location.

Why is this happening? How do I fix it? Is there any documentation I might have 
missed to explain this type of frontend? It would be very useful if it works.

Code below.

TIA,
  Peter


    <script type="text/javascript">
        var map, styleMap;
        function init(){
            OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
            var bounds = new OpenLayers.Bounds(151.5516558, -28.48572915,
                    153.6472702, -25.87920985);
            var options = {
                controls: [],
                projection: "EPSG:4326",
                units: 'degrees'
            };
            map = new OpenLayers.Map('map', options);

            var gsat = new OpenLayers.Layer.Google(
                "Google Satellite",
                {type: G_SATELLITE_MAP, numZoomLevels: 20}
            );
            var gphy = new OpenLayers.Layer.Google(
                "Google Physical",
                {type: G_PHYSICAL_MAP}
            );
            var gmap = new OpenLayers.Layer.Google(
                "Google Streets",
                {numZoomLevels: 20}
            );
            var ghyb = new OpenLayers.Layer.Google(
                "Google Hybrid",
                {type: G_HYBRID_MAP, numZoomLevels: 20}
            );
            var ehmpLayer = new OpenLayers.Layer.WMS(
                    "ehmp:catchments", "http://localhost:8080/geoserver/wms",
                    {
                        layers: 'ehmp:catchments92',
                        styles: 'catchments',
                        srs: 'EPSG:4326',
                        transparent: true,
                        tiled: false,
                        format: "image/png"
                    },
                    {singleTile: true} // needed, otherwise catchments are 
vertically squashed
                );
            var select = new OpenLayers.Layer.Vector("Selection", {styleMap: 
                new 
OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
            });
            map.addLayers([gsat, gphy, gmap, ghyb, ehmpLayer, select]);

            // build up all controls
            map.addControl(new OpenLayers.Control.PanZoomBar({
                position: new OpenLayers.Pixel(2, 15)
            }));
            map.addControl(new OpenLayers.Control.Navigation());
            map.addControl(new OpenLayers.Control.Scale($('scale')));
            map.addControl(new OpenLayers.Control.MousePosition({element: 
$('location')}));
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            var control = new OpenLayers.Control.GetFeature({
                protocol: OpenLayers.Protocol.WFS.fromWMSLayer(ehmpLayer),
                box: false,
                hover: false,
                multipleKey: "shiftKey",
                toggleKey: "ctrlKey"
            });
            control.events.register("featureselected", this, function(e) {
                select.addFeatures([e.feature]);
            });
            control.events.register("featureunselected", this, function(e) {
                select.removeFeatures([e.feature]);
            });
            map.addControl(control);
            control.activate();

            map.zoomToExtent(bounds);
        }

    </script>